Типографика в вебе: от @font-face до переменных шрифтов

Веб давно стал главной средой текстового потребления. Но технические возможности браузерной типографики до сих пор используются на 20% от их потенциала.

Подключение веб-шрифтов: три способа

1. Google Fonts / сторонние CDN — самый простой путь. Минус: дополнительный DNS-запрос, возможная задержка, зависимость от внешнего сервиса. Плюс: кэширование (если другие сайты уже загружали этот шрифт) и простота.

2. Самохостинг через @font-face — оптимальный выбор для производительности. Шрифт хранится на вашем сервере, загружается с того же домена, контролируется вами. Используйте форматы WOFF2 (приоритет) и WOFF (фолбэк).

3. Системные шрифты (font-stack) — нулевая задержка, максимальная производительность. Современный системный стек: font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

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

• font-display: swap — текст показывается системным шрифтом немедленно, заменяется кастомным после загрузки. Предотвращает Flash of Invisible Text (FOIT)
• Subsetting — загрузка только нужных символов. Кириллический текст не требует латинских расширений и символов CJK. Инструменты: fonttools, glyphhanger
• preload — директива <link rel="preload"> указывает браузеру начать загрузку шрифта до разбора CSS
• WOFF2 вместо WOFF — WOFF2 в среднем на 30% меньше WOFF и поддерживается всеми современными браузерами

Переменные шрифты (Variable Fonts)

Переменные шрифты — наиболее революционное нововведение в веб-типографике за последние 20 лет. Один файл содержит весь диапазон начертаний вместо отдельных файлов для Regular, Bold, Italic и т.д.

Каждая «ось» переменного шрифта управляется через CSS:

• font-weight: 100–900 (wght) — любое промежуточное значение, не только 400 или 700
• font-variation-settings: 'wdth' 75 (wdth) — сжатие/растяжение
• font-optical-sizing: auto (opsz) — автоматическая оптическая корректировка для разных кеглей

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

Свойство	Значение	Назначение
font-size	clamp(1rem, 2.5vw, 1.5rem)	Адаптивный размер без медиазапросов
line-height	1.5–1.7	Межстрочный интервал
letter-spacing	0.01–0.03em	Трекинг — для всех капс, маленького кегля
text-rendering	optimizeLegibility	Кернинг и лигатуры на движке браузера
-webkit-font-smoothing	antialiased	Антиалиасинг на macOS/iOS
font-feature-settings	"liga" 1, "kern" 1	OpenType функции: лигатуры, кернинг

Hinting и рендеринг на разных устройствах

Hinting — встроенные в шрифтовой файл инструкции для растеризатора, помогающие отображать глифы чётко при малых кеглях на экранах с низким разрешением. На Retina-дисплеях (>2× плотность пикселей) hinting практически не нужен — шрифт и без него выглядит чётко. На экранах 1× (96 dpi) качество hinting критично для кеглей до 16px.