Современный подход к веб-типографике: чистая иерархия, достаточное пространство, адаптивные размеры.
Основы CSS-типографики
CSS предоставляет исчерпывающий набор свойств для управления типографикой. Ключевые из них: font-family, font-size, line-height, letter-spacing, font-weight, font-style, text-rendering и относительно новые свойства переменных шрифтов.
Базовая настройка типографики для сайта должна устанавливать: стек шрифтов с надёжными запасными вариантами, оптимальный размер для основного текста (16–18px), интерлиньяж 1.5–1.7 для длинных текстов, максимальную ширину текстовой колонки и правильный рендеринг текста.
Адаптивная типографика
Адаптивная типографика решает задачу масштабирования текста в зависимости от размера экрана. Существует несколько подходов:
CSS clamp() — современный подход, позволяющий задать минимальный, предпочтительный и максимальный размер за одно значение: font-size: clamp(1.2rem, 3vw, 2rem). Это элегантно и не требует медиазапросов для размера шрифта.
Viewport-единицы (vw, vh, vmin, vmax) — размер привязывается к ширине или высоте окна браузера. Требуют ограничения через clamp() или min()/max(), чтобы текст не становился слишком маленьким или слишком большим.
Медиазапросы — классический метод, задающий разные размеры для разных точек перелома. Более трудоёмкий, но предоставляет точный контроль.
CSS-переменные и кастомные свойства — позволяют создать централизованную систему типографических значений, изменяемых через один медиазапрос в корне документа.
Шрифтовые стеки и производительность
Выбор между пользовательскими и системными шрифтами — важный компромисс между эстетикой и производительностью. Веб-шрифты требуют загрузки, что задерживает первый содержательный рендеринг (FCP) и может вызывать нежелательное мигание текста.
Системные шрифтовые стеки — нулевая задержка загрузки, нативное ощущение на каждой платформе. Примерный стек для интерфейса: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif.
Google Fonts — более 1400 бесплатных гарнитур с CDN-доставкой. Рекомендации по оптимизации: загрузка только необходимых начертаний (font-display: swap), включение preconnect в head, выбор только нужных подмножеств символов (Latin, Cyrillic).
Self-hosted шрифты — полный контроль над форматами (WOFF2 — оптимально), заголовками кэширования и приватностью. font-display: optional полностью исключает FOUT, font-display: swap обеспечивает немедленную видимость текста.
Оптимизация производительности шрифтов
Используйте только формат WOFF2 — он обеспечивает 30% меньший размер файла, чем WOFF, и поддерживается всеми современными браузерами. Для крупных сайтов рассматривайте subsetting — удаление неиспользуемых символов из файла шрифта через инструменты pyftsubset или glyphhanger.
Вариативные шрифты в вебе
Вариативные шрифты (Variable Fonts) — технология OpenType, позволяющая хранить в одном файле целый диапазон начертаний. Вместо загрузки отдельных файлов для Regular, Bold и Italic можно использовать один файл с осями изменения.
Ключевые CSS-оси: font-weight (100–900), font-style (italic / oblique), font-stretch (ширина). Дополнительные пользовательские оси управляются через font-variation-settings с четырёхбуквенными идентификаторами: wght, wdth, slnt, ital, opsz (оптический размер).
Оптический размер (opsz) — особенно ценная ось: гарнитуры с ней оптимизируют формы букв для разных кеглей, имитируя традицию создания отдельных «оптических размеров» для металлических шрифтов.
Типографика и доступность (a11y)
Доступность — неотъемлемая часть веб-типографики. Ключевые требования WCAG 2.1:
- Минимальный коэффициент контрастности 4.5:1 для основного текста (уровень AA).
- Текст должен масштабироваться до 200% без потери содержимого и функциональности.
- Высота строк не менее 1.5, межбуквенное расстояние не менее 0.12em, расстояние между абзацами не менее 2em.
- Никакого текста, отображаемого только через изображения (кроме случаев, когда дизайн критически важен).
Использование относительных единиц (rem, em) вместо абсолютных (px) гарантирует уважение к пользовательским настройкам размера текста в браузере.
CSS-свойства для продвинутой типографики
text-rendering: optimizeLegibility — включает лигатуры и кернинг, может замедлить рендеринг крупных текстов.
font-feature-settings — прямой контроль OpenType-функций: лигатуры ("liga" 1), числа старого стиля ("onum" 1), малые капитали ("smcp" 1), дробные числа ("frac" 1).
font-variant — более высокоуровневый интерфейс для OpenType-функций: font-variant-numeric: oldstyle-nums, font-variant-ligatures: common-ligatures.
hanging-punctuation — выносит знаки препинания за основной блок текста, улучшая оптическое выравнивание.
hyphens: auto — автоматические переносы слов, критически важные для блочного (justify) выравнивания и для мобильных экранов с узкими колонками.
Иерархия в веб-интерфейсах
Веб-интерфейсы принципиально отличаются от книжных страниц: пользователь не читает, а сканирует. Исследования Nielsen Norman Group показывают, что большинство пользователей веба читают по F-образному паттерну — сначала горизонтально по верхнему контенту, затем вниз по левому краю.
Это требует агрессивной типографической иерархии: заголовки должны немедленно сигнализировать о теме раздела, первые предложения абзацев несут максимальную информационную нагрузку, ключевые слова могут быть выделены жирным — но умеренно.