CSS · Производительность · Доступность

Веб-типографика: принципы и практика

От системных шрифтовых стеков и @font-face до переменных шрифтов и адаптивной типографики с CSS clamp(). Технический и дизайнерский взгляд на работу со шрифтами в браузере.

Контекст

Веб — другая среда для типографики

Веб-типографика решает задачи, незнакомые печатному дизайну. Шрифт на странице отображается на устройствах с разрешением от 72 до 800+ PPI, на экранах шириной от 320 до 5120 пикселей, в браузерах с разными движками рендеринга и операционных системах с разным сглаживанием шрифтов.

Исторически веб-дизайнеры были вынуждены работать только с системными шрифтами — теми, что установлены в операционной системе пользователя. Спецификация @font-face (изначально CSS2, затем CSS3) позволила загружать шрифты с сервера, открыв эру настоящей веб-типографики с 2009–2010 годов.

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

Ключевая метрика: По данным HTTP Archive (2024), медианная страница загружает 5 шрифтовых файлов. Неоптимизированные шрифты — одна из главных причин замедления отрисовки текста и показателя FOIT (Flash of Invisible Text).

Код CSS с настройками шрифтов на экране монитора разработчика, подключение Google Fonts через font-face

Системные шрифты

Шрифтовые стеки и системные гарнитуры

Системный шрифтовой стек — первый уровень надёжности в веб-типографике. Он гарантирует читаемый шрифт даже при отказе загрузки кастомного.

Современный системный стек для UI

font-family: -apple-system, BlinkMacSystemFont,
  "Segoe UI", Roboto, Oxygen, Ubuntu,
  Cantarell, "Open Sans", "Helvetica Neue",
  sans-serif;

Этот стек использует нативный системный шрифт на каждой платформе: SF Pro на macOS/iOS, Segoe UI на Windows, Roboto на Android. Результат — нулевое время загрузки и максимальная интеграция с платформой.

Обратная сторона: потеря контроля над типографикой. У пользователей разных платформ страница выглядит по-разному. Для информационных сайтов с акцентом на идентичность это неприемлемо.

Классический стек с засечками

font-family: Georgia, "Times New Roman",
  "DejaVu Serif", Times, serif;

Georgia — специально разработанная для экранного отображения антиква Мэтью Картера (1993). Крупный x-height и тщательно прорисованные засечки обеспечивают хорошую читаемость на большинстве дисплеев.

Этот стек доступен на 98%+ устройств и обеспечивает прогнозируемый результат для длинных текстовых блоков.

CSS-свойства

Ключевые CSS-свойства типографики

Свойство	Что делает	Рекомендуемые значения
`font-size`	Кегль шрифта	16px базовый, 1rem = 16px, clamp() для адаптивности
`line-height`	Интерлиньяж	1.5–1.7 для текста, 1.1–1.3 для заголовков
`letter-spacing`	Трекинг	0 для текста, 0.05–0.1em для капители
`font-weight`	Вес начертания	400 (Regular), 600 (SemiBold), 700 (Bold)
`font-variant-ligatures`	Лигатуры OpenType	common-ligatures normal
`font-variant-numeric`	Стиль цифр	oldstyle-nums для текста, lining-nums для таблиц
`text-rendering`	Режим рендеринга	optimizeLegibility для текста, auto для больших блоков
`-webkit-font-smoothing`	Сглаживание (macOS)	antialiased (большинство случаев)
`hyphens`	Переносы	auto (с lang="ru" на html)
`max-width` (у p)	Длина строки	60–75ch для текстового блока

Адаптивный кегль с clamp()

/* Заголовок: 24px → 48px */
font-size: clamp(1.5rem, 3vw + 1rem, 3rem);

/* Подзаголовок: 18px → 32px */
font-size: clamp(1.125rem, 2vw + 0.75rem, 2rem);

/* Текст: 15px → 18px */
font-size: clamp(0.9375rem, 1vw + 0.5rem, 1.125rem);

Функция clamp(min, preferred, max) создаёт плавно масштабирующийся кегль без медиазапросов. Более эффективна, чем отдельные breakpoints для каждого уровня иерархии.

Подключение Google Fonts оптимально

/* В <head> перед CSS */
<link rel="preconnect" 
  href="https://fonts.googleapis.com">
<link rel="preconnect" 
  href="https://fonts.gstatic.com" 
  crossorigin>
<link href="https://fonts.googleapis.com/
css2?family=Inter:wght@400;600;700
&display=swap" rel="stylesheet">

display=swap предотвращает FOIT (невидимый текст при загрузке). preconnect сокращает время DNS-разрешения. Загружайте только нужные веса.

Переменные шрифты

Variable Fonts в веб-типографике

Переменные шрифты (OpenType 1.8, 2016) хранят все начертания гарнитуры в одном файле через математическое описание осей вариации. Для загрузки сайта это означает один HTTP-запрос вместо 4–8 для полной шрифтовой семьи.

В CSS управление осями происходит через свойство font-variation-settings или через высокоуровневые свойства: font-weight, font-stretch, font-style — при условии, что шрифт поддерживает соответствующие оси.

Стандартные оси вариации

wght — вес (Weight): 100–900. Отвечает за font-weight.
wdth — ширина (Width): 50–200%. Отвечает за font-stretch.
ital — курсив (Italic): 0 или 1.
slnt — наклон (Slant): -90° до +90°.
opsz — оптический размер (Optical size): автоподбор деталей под кегль.

Оптимизация шрифтов для скорости загрузки

Форматы шрифтовых файлов

WOFF2 — современный стандарт для веба (поддержка 96%+ браузеров). Обеспечивает на 30% лучшее сжатие, чем WOFF. TTF/OTF — для совместимости; в вебе не рекомендуются из-за большого размера. SVG-шрифты — устарели.

Subsetting (подмножества)

Создание подмножества шрифта, содержащего только необходимые символы (например, только латиница и кириллица). Сокращает размер файла на 50–80%. Инструменты: fonttools, glyphanger, Fontaine. Google Fonts делает это автоматически через &subset=.

Font Display API

CSS-свойство font-display управляет поведением при загрузке. Значения: auto, block (FOIT), swap (FOUT — рекомендуется), fallback, optional. Для производительности рекомендуется font-display: swap для основного текста и optional для декоративных шрифтов.

Preloading критичных шрифтов

size-adjust и ascent-override

Новые CSS-дескрипторы @font-face позволяют метрически выровнять запасной шрифт с основным, устраняя «прыжок» при смене шрифта в процессе загрузки. Повышают Core Web Vitals метрику CLS (Cumulative Layout Shift).

Кеширование шрифтов

При самостоятельном хостинге — настройте Cache-Control: max-age=31536000 для шрифтовых файлов. При использовании Google Fonts — шрифты кешируются браузером на 1 год; пользователи, уже посещавшие сайты с теми же шрифтами, получают их мгновенно из кеша.

Типографическая шкала

Модульные шкалы в веб-типографике

Модульная шкала — система пропорциональных кеглей, основанная на едином множителе. Наиболее распространены: Большая терция (1.250), Золотое сечение (1.618), Большая секста (1.667). Шрифт, построенный на такой шкале, создаёт ощущение музыкальной гармонии.

Практически в вебе удобно задавать шкалу через CSS Custom Properties (переменные), чтобы изменение множителя перестраивало всю систему:

:root {
  --scale: 1.25; /* Большая терция */
  --text-base: 1rem;        /* 16px */
  --text-sm:   0.8rem;      /* 12.8px */
  --text-md:   1rem;        /* 16px */
  --text-lg:   calc(1rem * var(--scale));    /* 20px */
  --text-xl:   calc(1rem * var(--scale)*var(--scale)); /* 25px */
  --text-2xl:  clamp(1.8rem, 3vw, 2.5rem);
  --text-3xl:  clamp(2.2rem, 4.5vw, 3.5rem);
}

Демонстрация модульной шкалы

12.8px Подпись, метаданные, примечания

16px Основной текст — оптимальный кегль

20px Подзаголовок H4

25px H3-уровень

32px H2

40px H1

Изучите инструменты для типографической работы

Обзор программ для создания шрифтов, тестирования читаемости и оптимизации веб-производительности.

Инструменты

↑