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

CSS и управление типографикой

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

Адаптивная типографика

Адаптивная типографика означает автоматическое изменение типографических параметров в зависимости от размера вьюпорта. Современный CSS предлагает два основных подхода:

Viewport units + clamp()

Функция clamp(min, preferred, max) позволяет задать плавно масштабируемый размер шрифта с ограничениями. Пример:

font-size: clamp(1rem, 2.5vw, 1.5rem);

Это означает: минимальный размер 16px, максимальный 24px, плавно масштабируется между ними в зависимости от ширины экрана. Такой подход устраняет необходимость в большинстве медиазапросов для типографики.

CSS Container Queries

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

Веб-шрифты: форматы и загрузка

Основной современный формат веб-шрифтов — WOFF2. Он обеспечивает наилучшее соотношение качества и размера файла, поддерживается всеми актуальными браузерами. WOFF (без «2») — запасной вариант для устаревших браузеров.

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

• font-display: swap — текст отображается системным шрифтом до загрузки веб-шрифта, предотвращая FOIT (Flash of Invisible Text)
• Preload — предзагрузка критически важных шрифтовых файлов через <link rel="preload">
• Subsetting — подмножество символов: включать только необходимые Unicode-диапазоны (латиница, кириллица, базовые знаки препинания)
• Variable fonts — один файл заменяет несколько начертаний, что снижает общий объём загрузки при использовании трёх и более вариантов насыщенности

Google Fonts и open-source экосистема

Google Fonts (fonts.google.com) предоставляет бесплатный доступ к более чем 1400 гарнитурам, включая высококачественные кириллические шрифты. Для русскоязычных проектов рекомендуемые гарнитуры из каталога:

• Inter — универсальный гротеск, оптимизированный для интерфейсов, отличная кириллица
• Playfair Display — элегантная антиква с высоким контрастом, подходит для заголовков
• Nunito / Nunito Sans — мягкий гуманистический гротеск, скруглённые окончания
• Literata — книжная антиква Google, разработанная специально для длинного чтения
• Manrope — современный геометрический гротеск с полной кириллицей

Системные шрифтовые стеки

Для максимальной производительности и нативного ощущения многие проекты используют системные шрифтовые стеки — они не требуют загрузки и идеально согласованы с интерфейсом операционной системы:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;