Шрифты в вебе и типографический масштаб

Типографика — это 95% веба. Большинство страниц — это в первую очередь текст. Хорошо настроенный шрифт делает половину работы дизайнера.

«Типографика существует, чтобы почтить содержание». — Роберт Брингхёрст

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

Модульный масштаб

Размеры заголовков не берут с потолка. Их строят как масштаб — геометрическую прогрессию с шагом (например, ×1.25). Это создаёт визуальный ритм, как ноты в музыке.

/* Масштаб как переменные, шаг ~1.25 */
:root {
  --text-sm: 0.8rem;    /* 13px */
  --text-md: 1rem;      /* 16px база */
  --text-lg: 1.563rem;  /* 25px */
  --text-xl: 1.953rem;  /* 31px */
  --text-2xl: 2.441rem; /* 39px */
}

/* Запасной стек + плавная подмена шрифта */
body {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--text-md);
}
@font-face {
  font-family: "Inter";
  src: url(/fonts/inter.woff2) format("woff2");
  font-display: swap;  /* показать текст сразу запасным шрифтом */
}

  МОДУЛЬНЫЙ МАСШТАБ (шаг x1.25)
  ----------------------------
  H1  #########################  39
  H2  ###################        31
  H3  ###############            25
  Body ##########               16
  Small ########               13
  ритм размеров, а не случайные числа

Разбор глубже: типографика как инженерия, а не только вкус

Существует известное наблюдение, что веб — это в основном текст: подавляющая часть того, ради чего люди заходят на сайты, выражена словами. Это значит, что типографика — не декоративный слой поверх дизайна, а его несущая конструкция. Грамотно настроенный шрифт делает интерфейс читаемым и спокойным даже без иллюстраций; плохо настроенный убивает даже богатый визуально макет. Поэтому к шрифту в вебе относятся как к фундаменту, а не как к финальному штриху.

Ключевое отличие веб-типографики от печатной — шрифт надо загрузить, и это инженерная задача. Пока кастомная гарнитура едет по сети, текст должен оставаться видимым и читаемым запасным шрифтом. Стратегия font-display: swap показывает контент сразу системным шрифтом и плавно подменяет его, когда загрузится кастомный, — пользователь читает с первой секунды. Альтернатива (block) прячет текст до загрузки и даёт «вспышку невидимого текста» (FOIT), когда человек смотрит на пустоту. Поэтому веб-дизайнер обязан думать не только «какой шрифт красивый», но и «как он грузится и что видит пользователь в первые 200 мс».

Модульный масштаб приносит в типографику ту же дисциплину, что spacing-шкала — в отступы. Вместо случайных 22, 28, 35 размеры строят как прогрессию от базового кегля с постоянным коэффициентом (часто около 1.2–1.25). Получается математически согласованный набор ступеней, который глаз считывает как ритм и гармонию — по тем же причинам, по которым ухо слышит гармонию в музыкальном строе. Дополнительный практический выигрыш: ограниченный набор размеров проще поддерживать и переносить в токены, а соблазн «добавить ещё один размерчик под этот конкретный случай» дисциплинированно гасится.

Нельзя обойти и тему системных и переменных шрифтов. Системный шрифтовой стек (system-ui и далее) не требует загрузки вообще — он берёт родной шрифт операционной системы, мгновенно и без веса. Для многих интерфейсов это отличный выбор по умолчанию: ноль задержки, ноль трафика, привычный пользователю вид. Если же нужен брендовый шрифт, современный формат — это вариативные (variable) шрифты: один файл содержит весь диапазон начертаний и насыщенностей, что легче, чем грузить отдельный файл под каждое. Понимание этих опций помогает дизайнеру осознанно выбирать между «бесплатной» системной типографикой и брендовой ценой в килобайтах, а не подключать пяток гарнитур по привычке.

Как делают ПЛОХО

Подключают пять разных гарнитур и десять начертаний — страница «кричит» и грузится вечность. Размеры заголовков случайные: 22, 28, 35. Шрифт грузится с font-display: block — пользователь видит пустоту вместо текста (FOIT).

Как делают ХОРОШО

1–2 гарнитуры, ограниченный набор начертаний. Размеры — из модульного масштаба. font-display: swap и запасной стек: текст читается мгновенно, шрифт подменяется плавно. Формат woff2 — самый лёгкий.

Чек-лист

• Не больше 1–2 гарнитур и разумного числа начертаний.
• Размеры построены как масштаб, а не выбраны на глаз.
• Есть запасной стек шрифтов (system-ui, sans-serif).
• font-display: swap — текст виден сразу.
• Шрифты в формате woff2.

Итог. Текст — основа веба. Модульный масштаб даёт ритм размеров, а swap и запасной стек — мгновенную читаемость, пока грузится гарнитура.