Стилизация текста в CSS: шрифт, размер, интерлиньяж и читаемость

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

Базовые настройки

html {  font-family: Manrope, Arial, sans-serif;  font-size: 100%;  color: #20242c;  background-color: #ffffff;}​body {  margin: 0;  font-size: 1rem;  line-height: 1.6;}​

Системный fallback нужен на случай, если основной шрифт не загрузится. font-size: 100% сохраняет пользовательскую настройку браузера; обычно не нужно фиксировать корневой размер в пикселях.

Безразмерный line-height: 1.6 наследуется как множитель от размера каждого элемента. Это надёжнее фиксированной высоты в пикселях.

Семейство шрифта

font-family перечисляет варианты по порядку:

body {  font-family: Inter, Roboto, Arial, sans-serif;}​code,pre {  font-family: "JetBrains Mono", Consolas, monospace;}​

Название из нескольких слов заключают в кавычки. Последним указывают общее семейство: sans-serif, serif или monospace.

Если используете веб-шрифт, загружайте только нужные начертания и проверьте кириллицу. Неподходящий fallback может заметно менять длину строк и размеры компонентов.

Размер текста

Для текста внутри компонентов удобны rem и em:

.article {  font-size: 1rem;}​.article__lead {  font-size: 1.125rem;}​.badge {  padding: 0.35em 0.7em;  font-size: 0.875rem;}​

rem зависит от корневого размера, em — от размера текущего элемента. В .badge внутренние отступы масштабируются вместе с текстом.

Для крупных заголовков можно плавно ограничить размер:

.article h1 {  font-size: clamp(2rem, 1.4rem + 3vw, 4.5rem);  line-height: 1.05;}​

clamp() задаёт минимум, предпочтительное гибкое значение и максимум. Не делайте основной текст зависимым только от ширины viewport: он должен увеличиваться при пользовательском масштабировании.

Насыщенность и начертание

.article h1,.article h2 {  font-weight: 700;}​.article__meta {  font-weight: 500;  color: #5d6675;}​.term {  font-style: italic;}​

Убедитесь, что шрифт действительно содержит нужные веса. Иначе браузер может синтезировать начертание, которое выглядит хуже оригинального.

Не передавайте смысл только жирностью или курсивом. В HTML важность обозначает <strong>, смысловое ударение — <em>, а CSS оформляет их.

Длина строки

Очень широкую колонку трудно читать: взгляд теряет следующую строку. Для статьи задайте максимальную меру через ch:

.article__body {  max-inline-size: 70ch;  margin-inline: auto;  padding-inline: 1rem;}​

ch приблизительно связан с шириной символа 0 текущего шрифта и удобен как ориентир, а не абсолютная типографская гарантия. Проверьте реальный текст на разных экранах.

Абзацы и вертикальный ритм

.article__body > * {  margin-block: 0;}​.article__body > * + * {  margin-block-start: 1.25rem;}​.article__body h2 {  margin-block-start: 2.5rem;}​

Такой подход задаёт расстояние между соседними элементами и избегает случайного схлопывания множества разных margin.

Не выравнивайте длинный русский текст по ширине без настройки переносов: неравномерные пробелы ухудшают чтение. Для основного текста обычно лучше text-align: start.

Переносы и длинные строки

.article__body {  overflow-wrap: break-word;  hyphens: auto;}​

Автоматические переносы зависят от языка документа, поэтому у <html> должен быть lang="ru". Для кода переносы часто нежелательны — блоку <pre> лучше дать горизонтальную прокрутку.

pre {  overflow-x: auto;  tab-size: 2;}​

Ссылки

.article a {  color: #4f46e5;  text-decoration-line: underline;  text-decoration-thickness: 0.08em;  text-underline-offset: 0.18em;}​.article a:hover {  text-decoration-thickness: 0.14em;}​.article a:focus-visible {  outline: 3px solid #f59e0b;  outline-offset: 3px;}​

Не убирайте подчёркивание у ссылок внутри текста, если цвет остаётся единственным отличием.

Что лучше не использовать

• font-size меньше комфортного ради помещения текста в карточку;
• фиксированную height для блока с текстом;
• text-transform: uppercase для длинных абзацев;
• большое положительное letter-spacing в основном тексте;
• отключение масштабирования через viewport;
• текст внутри изображения вместо настоящего HTML;
• низкоконтрастный серый для «второстепенной» информации.

Минимальный набор для статьи

.article {  font-family: Manrope, Arial, sans-serif;  font-size: 1rem;  line-height: 1.65;  color: #20242c;}​.article__body {  max-inline-size: 70ch;  margin-inline: auto;  padding-inline: clamp(1rem, 4vw, 2rem);}​.article h1 {  font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem);  line-height: 1.08;  text-wrap: balance;}​.article p {  text-wrap: pretty;}​

Новые свойства text-wrap можно использовать как улучшение: без их поддержки текст всё равно останется читаемым.

Что запомнить

Начинайте с удобочитаемого базового размера, безразмерной высоты строки и ограниченной ширины колонки. Сохраняйте пользовательское масштабирование, проверяйте кириллицу и fallback-шрифты, а оформление ссылок и фокуса тестируйте клавиатурой.

report Сообщить об ошибке в статье