Основные CSS свойства для текста

Текст — это фундаментальный элемент любого веб-сайта. Он передает информацию, формирует пользовательский опыт и напрямую влияет на восприятие контента. Грамотное оформление текста с помощью CSS — это не просто вопрос эстетики, это мощный инструмент для повышения читабельности, доступности и общего визуального впечатления. В этой статье мы детально разберем ключевые CSS-свойства, которые позволяют полностью контролировать внешний вид текстовых блоков на вашей странице. От базовых параметров шрифта до тонких типографских настроек — вы получите все необходимые знания для профессиональной работы с веб-типографикой.

font-size

Свойство font-size - контролирует размер шрифта. Это один из самых важных параметров, так как он напрямую определяет иерархию информации и удобство чтения. Размер можно задавать с помощью различных единиц измерения, каждая из которых имеет свои особенности применения. Например, абсолютные единицы, такие как px (пиксели), дают фиксированный и предсказуемый размер, что полезно для точного соответствия макету. Относительные единицы, такие как em и rem, обеспечивают гибкость и доступность, так как они зависят от размера шрифта родительского элемента или корневого элемента (html) соответственно. Использование rem считается современной лучшей практикой, так как это позволяет пользователям масштабировать текст в браузере без почитаемости макета. Проценты (%) также являются относительной единицей, основывающейся на размере шрифта родителя.

font-size: px;

Привет, Мир!

p {
    font-size: 25px;
}

font-family

Свойство font-family - определяет семейство шрифтов, которое будет использоваться для элемента. Это свойство позволяет задать так называемый "стек шрифтов" — список приоритетных гарнитур, разделенных запятыми. Браузер будет пытаться применить первый шрифт в списке; если он не доступен на устройстве пользователя, перейдет к следующему и так далее. Всегда рекомендуется завершать список одним из родовых семейств, таких как serif (шрифты с засечками), sans-serif (рубленые шрифты без засечек), monospace (моноширинные шрифты) или cursive (шрифты, имитирующие рукописный текст), чтобы гарантировать, что текст будет отображен в любом случае в подходящем стиле. Подключение веб-шрифтов, например, через Google Fonts или @font-face, значительно расширяет ваш дизайнерский арсенал. Шрифт по умолчанию - Times New Roman

font-family: ;

Привет, Мир!

p {
    font-family: Times New Roman;
}

font-weight

Свойство font-weight - это свойство управляет толщиной или "жирностью" шрифта. Оно принимает как ключевые слова (normal, bold), так и числовые значения, обычно в диапазоне от 100 (Thin) до 900 (Ultra Black) с шагом в 100. Значение 400 обычно соответствует normal, а 700 — bold. Важно понимать, что браузер сможет отобразить конкретную насыщенность только в том случае, если соответствующий файл шрифта ее поддерживает. Если указать font-weight: 800, а у шрифта нет такой насыщенности, браузер либо приблизит ее алгоритмически (что может выглядеть нечетко), либо отобразит ближайшую доступную. Это свойство незаменимо для создания акцентов и визуального разделения заголовков, подзаголовков и важных частей текста.

100

200

300

400

500

600

700

800

900

normal

bold

Задаем толщину шрифта - 100

Задаем толщину шрифта - 200

Задаем толщину шрифта - 300

Задаем толщину шрифта - 400

Задаем толщину шрифта - 500

Задаем толщину шрифта - 600

Задаем толщину шрифта - 700

Задаем толщину шрифта - 800

Задаем толщину шрифта - 900

Задаем толщину шрифта - normal. Значение normal аналогично значению - 400

Задаем толщину шрифта - bold. Значение bold аналогично значению - 700

Привет, Мир!

p {
    font-weight: 400;
}

font-style

Свойство font-style - отвечает за наклон шрифта. Чаще всего оно используется для придания тексту курсивного начертания с помощью значения italic. Важно отличать italic от значения oblique. Курсив (italic) — это, как правило, отдельный, специально нарисованный вариант glyph (графем) шрифта, часто с более каллиграфичным и плавным видом. Наклонное начертание (oblique), напротив, представляет собой обычный прямой шрифт, искусственно наклоненный на несколько градусов. Не все шрифтовые семейства имеют истинный курсив, поэтому в таких случаях браузер может симулировать italic с помощью oblique. Значение normal отменяет любой наклон.

normal

italic

Значение по умолчанию. Задает обычное начертание тексту

Задает курсивное начертание тексту

Привет, Мир!

p {
    font-style: normal;
}

color

Свойство color - задает цвет самого текста (не фона). Цвет можно определить множеством способов: с помощью ключевых слов (red, blue), HEX-кода (#ff0000), RGB/RGBA-формата (rgb(255, 0, 0) или rgba(255, 0, 0, 0.5) для полупрозрачности) и HSL/HSLA (hsl(0, 100%, 50%)). Выбор цвета текста — это критически важный аспект дизайна, напрямую влияющий на контрастность и, как следствие, на читабельность. Низкий контраст между цветом текста и фоном делает контент трудным для восприятия, особенно для людей с нарушениями зрения. Всегда проверяйте уровень контраста с помощью специальных инструментов.

color: ;

Привет, Мир!

p {
    color: #ffffff;
}

text-transform

Свойство text-transform - это свойство управляет регистром символов, не изменяя исходный текст в HTML-разметке. Оно чрезвычайно полезно для единообразного оформления заголовков, кнопок или элементов навигации. Значение uppercase преобразует все буквы в заглавные, lowercase — в строчные, а capitalize превращает первую букву каждого слова в заглавную. Это гораздо более правильный и гибкий способ управления регистром, чем ручное изменение текста в коде, так как он отделяет содержание от его представления.

none

uppercase

lowercase

capitalize

Значение по умолчанию. Не меняет регистр символов. Регистр букв выводится так, как указан в HTML документе

Все символы текста становятся прописными (верхний регистр)

Все символы текста становятся строчными (нижний регистр)

Первый символ каждого слова будет заглавным. Остальные символы свой вид не меняют

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, amet sapiente atque provident dolor pariatur laudantium consectetur neque labore recusandae!

p {
    text-transform: none;
}

text-align

Свойство text-align - отвечает за выравнивание текстового блока по горизонтали относительно его контейнера. Стандартные значения включают left (выравнивание по левому краю, стандартно для языков с письмом слева направо), right (по правому краю), center (центрирование) и justify (выравнивание по ширине). Выравнивание по ширине (justify) создает ровные края как слева, так и справа, добавляя пробелы между словами и буквами. Однако с ним нужно быть осторожным, так как в узких блоках оно может привести к появлению некрасивых "рек" — больших промежутков между словами.

auto

left

right

center

justify

start

end

Значение по умолчанию. Не изменяет положение элемента

Выравнивание текста по левому краю

Выравнивание текста по правому краю

Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок

Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами

Аналогично значению left. В странах, где текст пишется справа на лево, аналогичен значению right

Аналогично значению right. В странах, где текст пишется справа на лево, аналогичен значению left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, amet sapiente atque provident dolor pariatur laudantium consectetur neque labore recusandae!

p {
    text-align: auto;
}

text-shadow

Свойство text-shadow - добавляет одну или несколько теней к тексту, позволяя создавать различные визуальные эффекты — от легкого объема до неонового свечения. Синтаксис позволяет задать четыре параметра: смещение по X (горизонтальная тень), смещение по Y (вертикальная тень), радиус размытия и цвет тени. Можно перечислять несколько теней через запятую, чтобы создать сложные комбинации. Например, можно добавить тень с нулевым размытием для имитации "плотной" тени или использовать несколько теней с размытием для эффекта свечения. Отрицательные значения смещения сдвигают тень влево и вверх.

text-shadow: ;

Привет, Мир!

p {
    text-shadow: 2px 5px 7px red;
}

letter-spacing

Свойство letter-spacing - также известное как "трекинг", это свойство управляет интервалом между символами в тексте. Оно принимает значения в единицах длины (px, em). Положительное значение увеличивает расстояние между буквами, делая текст более разреженным и "воздушным", что может улучшить читабельность в заголовках, набранных капителью или при использовании капслока. Отрицательное значение, напротив, уменьшает интервал, уплотняя текст. С ним нужно работать очень аккуратно, так как слишком маленький letter-spacing может сделать слова неразборчивыми.

letter-spacing: px;

Привет, Мир!

p {
    letter-spacing: 0px;
}

text-indent

Свойство text-indent - задает размер отступа первой строки текстового блока. Оно является наследственным и часто используется для визуального отделения абзацев друг от друга, создавая традиционный "красный ряд". В качестве значения можно использовать любые единицы длины (px, em, rem, %). Использование относительных единиц, таких как em, предпочтительнее, так как отступ будет масштабироваться пропорционально размеру шрифта. Также можно задать отрицательное значение, чтобы создать "выступающий" отступ, когда первая строка выступает левее основного текстового блока.

text-indent: px;

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt iusto non repellat ab repudiandae enim nisi accusantium, beatae, nulla ad aliquam. Modi, saepe non deleniti dicta quam iusto aspernatur tempore.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem quas earum tempora ullam eligendi repellendus omnis iste eum. Quisquam ducimus illum id blanditiis error maiores iure dolores optio tempora mollitia?

p {
    text-indent: 0px;
}

text-decoration-line

Свойство text-decoration-line - это основное свойство для определения типа линии оформления текста. Оно заменяет устаревшие отдельные свойства и является частью современного составного свойства text-decoration. Оно принимает значения none (убрать оформление), underline (подчеркивание), overline (линия над текстом) и line-through (перечеркивание). Также можно комбинировать эти значения через пробел, чтобы, например, одновременно подчеркнуть и перечеркнуть текст. Исторически подчеркивание использовалось для ссылок, но сейчас с помощью этого свойства можно декорировать любой текст

none

underline

overline

line-through

Значение по умолчанию. Не меняет регистр символов. Регистр букв выводится так, как указан в HTML документе

Все символы текста становятся прописными (верхний регистр)

Все символы текста становятся строчными (нижний регистр)

Первый символ каждого слова будет заглавным. Остальные символы свой вид не меняют

Привет, Мир!

p {
    text-decoration-line: none;
}

text-decoration-style

Свойство text-decoration-style - данное свойство работает в паре с text-decoration-line и определяет стиль линии. Оно позволяет выбрать, будет ли линия сплошной (solid), двойной (double), пунктирной (dotted), штриховой (dashed) или волнистой (wavy). Волнистая линия (wavy) часто используется для выделения орфографических ошибок в текстовых полях, но может быть применена и в дизайнерских целях.

solid

double

dotted

dashed

wavy

Сплошная (одинарная) линия

Двойная линия

Точечная линия

Пунктирная линия

Волнистая линия

Привет, Мир!

p {
    text-decoration-line: underline;
    text-decoration-style: solid;
}

text-decoration-color

Свойство text-decoration-color - как следует из названия, управляет цветом линии декора. Оно позволяет независимо от основного цвета текста (color) задать свой собственный цвет для подчеркивания, перечеркивания или надчеркивания. Это открывает широкие возможности для кастомизации, например, можно сделать подчеркивание ссылки другим цветом, чтобы оно гармонировало с дизайном, но не конфликтовало с основным текстом.

text-decoration-color: ;

Привет, Мир!

p {
    text-decoration-line: underline;
    text-decoration-color: #ffffff;
}

text-decoration-skip-ink

Свойство text-decoration-skip-ink - это относительно новое, но очень полезное свойство для улучшения читабельности подчеркнутого текста. Оно контролирует, как линия декора ведет себя при пересечении с нижними выносными элементами букв (например, у "р", "у", "g"). По умолчанию часто установлено значение auto, при котором браузер автоматически разрывает линию вокруг выносных элементов, чтобы они не сливались с подчеркиванием. Значение none отключает это поведение, и линия проходит сплошной под всеми символами. Для основного текста рекомендуется использовать auto.

auto

none

Значение по умолчанию. Линия прерывается на выносных элементах символов

Линия отображается сплошной

Привет, Мир!

p {
    text-decoration-line: underline;
    text-decoration-skip-ink: auto
}

text-decoration

Свойство text-decoration - это составное (shorthand) свойство, которое позволяет в одной строке задать сразу несколько параметров декора: text-decoration-line, text-decoration-style, text-decoration-color и, опционально, text-decoration-thickness. Запись выглядит так: text-decoration: underline wavy red;. Использование составного свойства делает код более кратким и удобным для чтения.

font-decoration: ;

Привет, Мир!

p {
    text-decoration: underline solid red;
}

line-height

Свойство line-height - определяет высоту строки, то есть расстояние между базовыми линиями соседних строк текста. Это один из ключевых факторов читабельности больших текстовых блоков. Слишком маленькая высота строки делает текст скученным и трудным для чтения, а слишком большая — разрывает его, мешая глазу переходить с одной строки на другую. Значение можно задать безразмерным числом (например, 1.5), которое умножается на текущий font-size, что является рекомендуемым способом, так как оно наследуется предсказуемо. Также можно использовать единицы длины (px, em) или проценты.

line-height: ;

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse consequatur perferendis quo cupiditate molestiae ipsum dolores et ab ad quas illum praesentium veniam, eveniet fugiat inventore suscipit. Aliquam, molestiae nobis.

p {
    line-height: 1.4;
}

overflow-wrap

Свойство overflow-wrap - управляет тем, может ли браузер разрывать строку внутри слова, если это слово слишком длинное и не помещается в свой контейнер. Значение normal разрешает разрыв только в точках переноса (например, дефис). Значение break-word позволяет браузеру разорвать слово в любом месте, если иначе оно вызовет переполнение контейнера по горизонтали. Это свойство спасает макет от появления горизонтальной полосы прокрутки из-за одного длинного слова (частая ситуация с URL-адресами или техническими терминами).

normal

break-word

anywhere

Длинные слова или строки с неразрывным пробелом не переносятся, даже если выходят за границы родителя (значение по умолчанию)

Cлово разбивается в любом месте, если не помещается в размеры, заданные родительскому элементу. Правила мягкого переноса не учитываются

Как и при значении break-word, слово разбивается в любом месте, но во внимание берутся правила мягкого переноса. Это сильно заметно, если родителю в качестве значения ширины задано min-content. Браузер расставляет мягкие переносы на своё усмотрение

Lorem ipsum consectetur adipisicing elit

p {
    width: 100px;
    border: 1px dashed #fff;
    overflow-wrap: normal
}

white-space

Свойство white-space - контролирует то, как браузер обрабатывает пробелы и переносы строк внутри исходного HTML-кода. Понимание этого свойства критически важно для корректного отображения контента, особенно когда важно сохранить исходное форматирование, например, при вставке кода, стихотворений или данных с определенным выравниванием. По умолчанию браузер, встречая в HTML несколько пробелов подряд, "схлопывает" их в один. Аналогично, переносы строк в исходном коде преобразуются в обычный пробел. Свойство white-space позволяет переопределить это поведение. Давайте рассмотрим каждое из его значений.

normal

nowrap

pre

pre-wrap

pre-line

break-spaces

Значение по умолчанию. Поведение, привычное для обычного текста. При котором браузер схлопывает все последовательные пробелы и табуляции в один пробел, полностью игнорирует переносы строк, указанные в исходном HTML-коде, и автоматически переносит строки текста по словам, когда он достигает границы своего контейнера. Это стандартный способ отображения сплошного текста в абзацах.

Заставляет текст оставаться в одной строке, запрещая автоматический перенос по словам; при этом пробелы и табуляции по-прежнему схлопываются, а переносы строк в коде игнорируются. Текст будет продолжать идти в одну строку, потенциально выходя за пределы контейнера, пока не встретится явный тег <br>, что полезно для создания неразрывных заголовков или элементов меню.

Pre (от "preformatted") заставляет браузер сохранять исходное форматирование текста точно так, как оно есть в HTML-коде: все пробелы и табуляции остаются на своих местах, а переносы строк происходят только там, где они явно указаны в разметке; при этом автоматический перенос строк по границе контейнера полностью отключается, что может привести к появлению горизонтальной прокрутки и делает это значение идеальным для отображения фрагментов кода или ASCII-арта.

Является гибридным вариантом: как и pre, оно сохраняет все пробелы, табуляции и явные переносы строк из кода, но при этом разрешает браузеру выполнять автоматический перенос строк, когда текст упирается в границу контейнера. Это позволяет сохранить ручное форматирование, одновременно предотвращая появление горизонтальной прокрутки, что удобно для длинных цитат или сообщений с особым выравниванием.

Действует более избирательно: оно схлопывает подряд идущие пробелы и табуляции (как normal), но при этом уважает и сохраняет явные переносы строк, указанные в коде, и так же разрешает браузеру автоматически переносить строки по словам. Этот вариант отлично подходит для отображения пользовательского ввода, такого как стихи или сообщения в форуме, где важна разбивка на абзацы, но не критично выравнивание пробелами.

Ведет себя практически идентично pre-wrap, сохраняя все пробелы и переносы, но с одним ключевым отличием: в отличие от pre-wrap, где пробелы в конце строки "висят" и не влияют на разрыв, break-spaces позволяет браузеру разорвать строку в любом пробельном символе, включая те, что находятся в конце. Это обеспечивает более строгий контроль над переносом, что может быть важно в интерактивных текстовых редакторах.

Lorem ipsum dolor sit amet consectetur adipisicing elit

p {
    width: 300px;
    border: 1px dashed #fff;
    white-space: normal
}

Заключение

Владение этими CSS-свойствами — это основа для создания типографики, которая не только красива, но и функциональна. Комбинируя их, вы сможете тонко настраивать внешний вид текста, создавая уникальный и комфортный для чтения дизайн, который будет правильно отображаться на всех устройствах и в любых браузерах.