Веб-типографика: текст, который читается

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

Уровень: начальный 13 разделов 2 часа

1. Типографика — 95% интерфейса

Текст — главный интерфейс веб-сайта. Кнопки, меню, карточки товаров, статьи, формы — всё это в первую очередь текст. По разным оценкам, на сплошном тексте построено от 80 до 95% содержания интерфейса, поэтому качество текста определяет впечатление от сайта больше, чем любой другой элемент.

Плохой шрифт портит хороший дизайн: нечитаемый размер, слипшиеся строки, кривые кавычки заметны мгновенно, и пользователь уходит, даже не осознав, почему именно. Хорошая же типографика не привлекает внимания — она работает тихо, ведёт глаз по тексту и делает чтение лёгким.

Золотое правило: типографика должна быть незаметной. Если читатель восхищается шрифтом — возможно, он вместо этого должен был восхититься содержанием.

Основные параметры, за которые отвечает веб-разработчик:

шрифт — какой гарнитурой написан текст;
размер — крупность букв и её связь с базовым размером страницы;
интерлиньяж — расстояние между строками;
мера строки — длина строки в символах;
иерархия — как заголовки отличаются от абзацев.

2. Шрифтовые категории

Шрифты делятся на категории, и у каждой — своё предназначение. Для текста сайта чаще всего выбирают гротески, для акцентов и заголовков — иногда серифные шрифты, а для кода — моноширинные.

Категория	Особенности	Когда уместна
sans-serif (гротеск)	без засечек, чистые линии	основной текст и интерфейсы
serif (с засечками)	засечки, классический вид	статьи, лонгриды, брендовые заголовки
monospace	все буквы одной ширины	код, таблицы цифр, терминал
display	декоративные, выразительные	постеры, крупные заголовки, логотипы

Выбор зависит от контента: для блога уместен серифный шрифт, для панели управления — гротеск, для лендинга продуктов — аккуратный гротеск с display-акцентом в шапке.

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

Кириллица и латиница в одном шрифте

Русскоязычные шрифты должны поддерживать кириллицу и латиницу одновременно: на странице почти всегда есть и русские, и английские слова, адреса, коды. Проверяйте глифы до покупки: некоторые красивые латинские шрифты не содержат кириллицы, и браузер заменит буквы fallback-шрифтом с другого шрифта — получится визуальный разнобой.

Простая проверка: впишите слово «Вафельница» (в нём есть все редкие кириллические буквы: ф, ц, щ и й) в превью шрифта — и убедитесь, что каждый символ отрисован родным начертанием.

3. Системные стеки

Системные шрифты уже установлены в операционной системе пользователя. Их не нужно скачивать, поэтому страница грузится мгновенно. Чтобы текст выглядел одинаково хорошо на любой ОС, составляют стек — список шрифтов через запятую: браузер берёт первый установленный.

font-family: system-ui, -apple-system, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;

Разные операционные системы поставляют разные шрифты: в Windows есть «Segoe UI» и «Arial», в macOS — San Francisco (system-ui резолвится в него), в Android — Roboto, в iOS — тоже system-ui. Общий стек покрывает все платформы, а в конце всегда стоит категория sans-serif — если ни один шрифт не нашёлся, браузер выберет свой.

/* Знакомый стек для русскоязычного сайта */
font-family: "Segoe UI", Arial, "Helvetica Neue", sans-serif;

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

4. Подключение своих шрифтов

Системные шрифты не всегда дают нужное настроение. Свои шрифты подключаются через CSS-правило @font-face: вы объявляете имя семейства и указываете файл начертания.

/* Regular — обычное начертание */
@font-face {
  font-family: "MyFont";
  src: url("fonts/myfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bold — жирное начертание отдельным файлом */
@font-face {
  font-family: "MyFont";
  src: url("fonts/myfont-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

После объявления шрифт используется как обычно: font-family: "MyFont", sans-serif;. Важно подключать отдельные начертания, а не весь пакет: файл «MyFont» с начертаниями 100–900 весит в разы больше и качает лишние килобайты каждому посетителю.

src — адрес файла и его формат (woff2 сегодня достаточно);
font-weight — какое начертание несёт файл (400, 700, 900…);
font-style — обычное или наклонное начертание;
font-display: swap — сначала показать системный шрифт, потом подменить своим (не блокирует текст).

Когда подключаете несколько начертаний, каждое должно ждать браузер по своему font-weight. Иначе font-weight: 700 не найдёт файл и браузер «синтезирует» жирность сам — результат часто выглядит размытым.

5. Размер: px, rem, em

Шрифтовой размер задаётся единицами px, rem, em и %. Каждая отсчитывается от своей базы:

Единица	От чего зависит	Пример
px	фиксированные пиксели экрана	20px — всегда 20px
rem	от корневого размера (<html>)	1.25rem = 20px при базе 16px
em	от размера родителя	1em тот же размер, что у отца
%	от размера родителя (как em)	200% = вдвое больше родителя

Для размеров шрифта рекомендуют rem: он не зависит от вложенности, поэтому масштабирование всей страницы — одна правка корневого размера. Базовый размер браузера — 16px, и это хорошая точка отсчёта: 1rem = 16px, 1.5rem = 24px.

html { font-size: 16px; }          /* база, обычно её не меняем */
body { font-size: 1rem; }           /* 16px */
.h2  { font-size: 1.5rem; }        /* 24px */
.small { font-size: 0.875rem; }    /* 14px */

Резиновый размер даёт функция clamp(): минимум, комфортное значение и максимум. Между ними размер «дышит» вместе с шириной экрана — так заголовок не будет гигантским на телефоне и мелким на мониторе.

/* не меньше 20px, комфортно ~4vw, не больше 40px */
h1 { font-size: clamp(1.25rem, 4vw, 2.5rem); }

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
  body { font-family: system-ui, sans-serif; margin: 16px; }
  .px   { font-size: 24px; }
  .rem  { font-size: 1.5rem; }
  .clamp { font-size: clamp(1rem, 3vw, 2rem); }
  .note2 { font-size: 0.75rem; color: #777; }
</style>
</head>
<body>
  <p class="px">24px — фиксированный размер, экран не важен</p>
  <p class="rem">1.5rem = 24px от базы 16px, масштабируется</p>
  <p class="clamp">clamp(): резиновый размер между 16 и 32px</p>
  <p class="note2">Сузьте окно предпросмотра, чтобы увидеть разницу</p>
</body>
</html>

Меняйте строку clamp во вкладке и нажимайте «Запустить»: обратите внимание, как заголовок сжимается на узком окне. Если для текста достаточно rem — используйте clamp только для крупных заголовков.

6. Межстрочный интервал

Свойство line-height задаёт высоту строки вместе с промежутками между ними. Для сплошного текста комфортный диапазон — 1.4–1.7 (единицы без указания px — множитель от размера шрифта, это удобно).

/* текст легко читается */
body { line-height: 1.6; }

/* заголовкам интервал меньше — они крупные сами по себе */
h1, h2, h3 { line-height: 1.2; }

Заголовкам задают меньший интервал: крупный кегль создаёт визуальные «дыры» при line-height 1.6, а строки таких заголовков почти никогда не переносятся дважды. Для кнопок и мелких подписей интервал часто прижимают к единице — line-height: 1.

У русских букв есть нисходящие «хвосты»: «у», «д», «р», «щ». При жёсткой обрезке контейнера по высоте такие буквы упираются в границу. Давайте тексту немного вертикального запаса и проверяйте, что сетка не «съедает» хвосты.

Не записывайте line-height в пикселях: при изменении размера шрифта интервал не будет масштабироваться вместе с ним. Множитель (1.4, 1.6) привязан к размеру автоматически.

7. Мера строки

Мера строки — это длина строки в символах. Слишком короткая строка рвёт текст на куски, слишком длинная заставляет глаз теряться при переходе на следующую строку. Классическая норма для кириллицы — 45–75 символов на строку, комфортный центр около 65.

/* ограничиваем ширину абзаца и даём тексту дышать */
p {
  max-width: 65ch;      /* 65 символов — хорошая мера */
  line-height: 1.6;
  letter-spacing: normal;
}

Единица ch — это ширина символа «0» в текущем шрифте; для текста она близка к «символу на строку» и поэтому идеальна для ограничения меры. Если колонка шире — увеличьте размер шрифта или межстрочный интервал, а не меру.

С осторожностью используйте letter-spacing: разрядка уместна только в мелких заголовках и надписях, для сплошного текста она ухудшает чтение. А text-transform: uppercase применяйте только для мелкого акцента (кнопки, метки, меню) — сплошной КАПС трудно читать.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
  body { font-family: system-ui, sans-serif; margin: 16px; }
  .narrow { max-width: 32ch; line-height: 1.6; }
  .wide   { max-width: 90ch; line-height: 1.2; }
  .label  { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #777; }
</style>
</head>
<body>
  <p class="label">Колонка ~32 символа</p>
  <p class="narrow">Эта колонка шириной 32 символа — ближе к нижней границе нормы. Глаз легко перескакивает со строки на строку, текст читается быстро и без напряжения.</p>
  <p class="label">Колонка 90 символов, line-height 1.2</p>
  <p class="wide">А эта колонка растянута до 90 символов и прижата низким интервалом: глазу трудно найти следующую строку, чтение утомляет. Текст даже с идеальным шрифтом становится неудобным, когда мера строки далека от 45–75 символов.</p>
</body>
</html>

Сравните две колонки в примере: при одинаковом шрифте разница восприятия огромна. Поменяйте max-width у первой колонки на 50ch и снова нажмите «Запустить».

8. Иерархия заголовков

Заголовки создают скелет страницы: читатель пробегает по ним глазами и решает, где остановиться. Иерархия строится контрастом размеров и веса, а не разными шрифтами и цветами.

/* согласованный масштаб от h1 к h6 */
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; }
h2 { font-size: 1.6rem;   font-weight: 700; }
h3 { font-size: 1.25rem;  font-weight: 600; }
h4 { font-size: 1.1rem;   font-weight: 600; }
h5 { font-size: 1rem;     font-weight: 600; }
h6 { font-size: 0.9rem;   font-weight: 600; letter-spacing: 0.05em; }

Соотношение размеров лучше задавать по математическому масштабу: базовый 1rem, затем 1.25, 1.5, 2 и так далее — шаг 1.25× на каждом уровне даёт гармоничную лестницу. Важно, чтобы разница между соседними уровнями ощущалась хотя бы на пару ступеней: h2 и h3, отличающиеся на 1px, выглядят как опечатка.

Вес заголовка — тоже инструмент иерархии: крупный жирный заголовок «кричит», как КАПС. Применяйте вес 500–700 вместо манипуляций с регистром и восклицательными знаками — так смысл передаётся, а спокойствие страницы сохраняется.

один h1 на страницу — главная мысль;
пять-семь шагов от h1 к самому мелкому тексту — предел;
разные уровни не должны совпадать по размеру с текстом между ними;
не сбрасывайте интервалы между заголовком и абзацем до нуля — дайте заголовку пространство сверху и небольшие отступы снизу.

9. Типографика кириллицы

Русский текст диктует свои правила типографики, которые легко забыть. Главные — правильные кавычки «ёлочки», длинное тире вместо дефиса и грамотные значения в тексте.

Знак	Как ввести	Ошибка
«ёлочки»	« … »	лапки " " или "
— длинное тире	—	дефис - вместо тире
неразрывный пробел		разрыв между числом и единицей

<p>Он сказал: &laquo;Вернёмся — и продолжим&raquo;.</p>
<p>Вес — 100&nbsp;кг, это &asymp; 5% от массы страницы.</p>

Кавычки-ёлочки в тексте обязательны: «лапки» в русской типографике допускаются только внутри ёлочек, да и то редко. Длинное тире ставится между частями предложения, а дефис — только внутри слов («веб-дизайн»). Между числом и единицей измерения ставьте неразрывный пробел  , чтобы строка не переносилась посередине.

Эти знаки берутся из шрифта: если в подключённой гарнитуре кириллической кавычки нет, браузер подставит кавычку из fallback-шрифта — она будет заметно другой формы. Проверяйте «ёлочки» и тире в каждом кандидате на основной шрифт.

Когда вкладываете кавычки друг в друга, чередуйте: «… про „вложенную“ цитату …». «Лапки» для вложенного уровня — разрешённый стандарт, а ёлочки внутри ёлочек выглядят громоздко.

10. Производительность шрифтов

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

WOFF2 — современный сжатый формат. Используйте только его; старые eot/ttf больше не нужны;
preload критичного файла — браузер начнёт качать его раньше, чем получит CSS:
font-display: swap — текст покажется системным шрифтом, а потом подменится своим: пользователь не смотрит на пустоту;
subsetting — вырежьте из файла только нужные символы: для русскоязычного сайта кириллица + базовая латиница + цифры;
системные шрифты — лучший выход, когда фирменной гарнитуры нет: они не качаются вовсе.

<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>

/* в CSS — шрифт с subsetting и swap */
@font-face {
  font-family: "MyFont";
  src: url("fonts/myfont.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0020-007E;  /* кириллица + латиница */
}

Правило hands-off: чем меньше начертаний и весов, тем меньше трафика. Одна гарнитура с Regular и Bold вместо трёх — заметная разница в скорости.

Проверьте, как выглядит страница при выключенных шрифтах: системные шрифты должны читаться без переломов вёрстки. Кнопки, заголовки и абзацы не должны «прыгать» при загрузке своего шрифта.

11. Параметры текста

Помимо размера и интервала, на чтение влияют выравнивание, переносы и поведение длинных элементов вроде URL.

body { text-align: left; }                                 /* не justify */

h1, h2, h3 { text-wrap: balance; }                          /* ровный заголовок */

a { overflow-wrap: anywhere; }                              /* длинные URL не вылезут */

text-align: justify — выравнивание по ширине создаёт «реки» пустот в словах и ухудшает чтение. Слева — лучше;
text-wrap: balance — браузер распределит слова в заголовке на две строки почти поровну: красиво и компактно;
overflow-wrap — длинные URL и слова без пробелов должны переноситься, а не разрывать вёрстку;
hyphens — автопереносы по слогам полезны в узких колонках, но мешают в обычных абзацах, если текст и так умещается.

article { hyphens: auto; }   /* для языков с твёрдыми слогами на узких колонках */

Для URL перенос без дефиса — лучший вариант: добавлять хитрости типа разрыва по точке не нужно, достаточно overflow-wrap: anywhere.

12. Проверка типографики

Перед тем как считать типографику готовой, пройдитесь по ней критическим взглядом. Поверьте глазам, а не настройкам: то, что «в коде всё правильно», не значит, что текст читается.

читаемый размер — основной текст не меньше 16px (1rem); не опускайтесь до 12px без необходимости;
контраст — текст заметно темнее фона; светлосерый текст на белом — частая ошибка (см. курс Цвет и контраст);
короткие строки — мера 45–75 символов, максимум 80;
лимит шрифтов — максимум 2–3 гарнитуры на страницу: основная, акцентная и, возможно, моноширинная для кода;
сироты — не оставляйте «вырванную» строку из одного-двух слов на последней строке абзаца;
кавычки и тире — ёлочки, длинное тире, никаких дефисов-тире и лапок.

Контрольная фраза для оценки шрифта: «Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства» — в ней есть и широкие буквы, и хвосты, и редкие строчные. Если фраза читается ровно, шрифт готов к работе.

Не проверяйте типографику «на глаз» в коде — отрисуйте страницу в браузере в реальном размере (100%), как её увидит пользователь. Только так видны настоящие сироты, реки и слипшиеся строки.

13. Чек-лист перед сдачей

Финальная проверка страницы занимает пару минут, если держать список под рукой. Это тот самый минимум, о котором приятно споткнуться на ревью.

на странице максимум 2 шрифта (основной + акцентный), не считая системного для кода;
размер текста — только rem и clamp(), без жёстких px для шрифтов;
мера строки абзацев — 45–75 символов через max-width;
кириллица и кавычки «ёлочки» проверены в выбранной гарнитуре;
шрифты оптимизированы: WOFF2, font-display: swap, subsetting, preload критичного файла;
контраст текста и фона проходит проверку (см. Цвет и контраст);
иерархия заголовков видна с расстояния вытянутой руки;
никаких сирот и «реков» в абзацах, длинные URL переносятся.

Скачайте страницу в PDF или покажите её человеку, который не видел макета: если он прочитает и найдёт тему без подсказки — типографика работает.

Типографика и цвет работают в связке: даже идеальные шрифты теряются при плохом контрасте. Продолжите освоение в курсе Цвет и контраст.

Что дальше

Ты разобрался, как выбрать шрифт, задать размеры и интервалы и сделать текст по-настоящему читаемым. Дальше закрепи типографику практикой: базовые свойства шрифтов подробнее — в курсе CSS, цвет и контраст раскрыты в уроке Цвет и контраст, а собранная страница с текстом, размером и иерархией пригодится в практическом уроке Практика: лендинг, где ты соберёшь первый полноценный макет с нуля.

← Вернуться к курсам