Содержание
Веб против печати: ключевые отличия
Печатный типограф работает с фиксированным носителем: известен точный размер страницы, разрешение печати (как правило 300–600 dpi), тип бумаги и условия просмотра. Веб-дизайнер этой роскоши лишён. Его текст будет отображаться на телефоне с 5-дюймовым экраном и ноутбуке с 27-дюймовым монитором, в ярко освещённой комнате и в темноте, на дисплее с разрешением 96 ppi и Retina-экране с 500 ppi.
Это фундаментальное различие определяет все особенности веб-типографики: необходимость адаптивных размеров, системных запасных шрифтов, оптимизации загрузки и учёта доступности.
Веб-шрифты и их загрузка
До 2009 года веб-разработчики были ограничены набором «безопасных» системных шрифтов (Arial, Georgia, Verdana, Times New Roman, Trebuchet MS и несколькими другими), присутствующих на большинстве компьютеров. CSS-директива @font-face (финально стандартизирована в 2009 году) открыла возможность использования пользовательских шрифтов, загружаемых с сервера.
Современные форматы веб-шрифтов: WOFF2 (рекомендуемый, поддерживается всеми современными браузерами, наилучшее сжатие), WOFF, TTF/OTF (для устаревших браузеров). Подключение шрифта через @font-face:
Формат подключения: @font-face { font-family: 'MyFont'; src: url('font.woff2') format('woff2'); font-display: swap; } — директива font-display: swap критически важна для производительности.
Google Fonts предоставляет бесплатный хостинг для более чем 1400 гарнитур. Популярные альтернативы: Adobe Fonts (Typekit), Font Squirrel, Fonts.com. При использовании внешних сервисов необходимо учитывать политику конфиденциальности (в ряде юрисдикций загрузка шрифтов с Google-серверов требует явного согласия пользователя).
Единицы измерения в веб-типографике
Понимание единиц измерения критично для адаптивной типографики:
- px (пиксели) — абсолютная единица, не масштабируется при изменении пользователем размера шрифта в браузере. Использование px для font-size нарушает доступность.
- em — относительная единица: 1em = текущий font-size элемента. Составные вложения дают неожиданные результаты: 1.2em внутри 1.2em = 1.44em.
- rem — относительная единица: 1rem = font-size корневого элемента (<html>). Наиболее предсказуема и рекомендована для font-size и отступов.
- vw/vh — процент от ширины/высоты вьюпорта. Используется для «жидкой» типографики, изменяющей размер плавно с шириной экрана.
- clamp() — CSS-функция, задающая минимальный, предпочтительный и максимальный размер. Пример:
font-size: clamp(1rem, 2.5vw, 1.5rem)— шрифт не меньше 16px и не больше 24px, плавно изменяется.
Адаптивная типографика
Адаптивная типографика — это система, при которой размеры текста, интерлиньяж и длина строки автоматически адаптируются к размеру экрана. Три ключевых подхода:
- Медиазапросы (Media queries) — задание разных font-size для разных breakpoints. Простой и надёжный метод, но требует ручного прописывания каждого состояния.
- Жидкая типографика (Fluid typography) — использование viewport-единиц (vw) с функцией clamp() для плавного масштабирования без «ступенек».
- CSS Container Queries — новый стандарт (2023), позволяющий масштабировать типографику в зависимости от размера контейнера, а не всего вьюпорта.
Производительность
Шрифты — один из главных источников задержки рендеринга страниц. Каждый подключённый шрифт требует отдельного HTTP-запроса. Типичная страница с тремя гарнитурами по два начертания каждая делает 6+ запросов на шрифтовые файлы. Стратегии оптимизации:
- Ограничение количества шрифтов — не более 2 гарнитур, не более 2–3 начертаний каждой.
- Субсеттинг (subsetting) — включение в шрифтовый файл только нужных символов (кириллица, базовая латиница). Сокращает размер файла на 70–90%.
- font-display: swap — браузер немедленно отображает текст системным шрифтом, заменяя его на целевой по загрузке.
- Предзагрузка (preload) — директива
<link rel="preload">для критических шрифтов. - Переменные шрифты — один файл вместо нескольких начертаний.
Доступность
Стандарты WCAG 2.1 задают минимальные требования к контрастности текста:
- Уровень AA: обычный текст — 4,5:1; крупный текст (≥18pt / ≥14pt жирный) — 3:1.
- Уровень AAA: обычный текст — 7:1; крупный текст — 4,5:1.
Дополнительные рекомендации: минимальный размер текста в интерфейсе — 16px; не используйте font-size: px для body (блокирует браузерное масштабирование); задавайте line-height в безразмерных единицах (1.5, не 24px), чтобы он корректно масштабировался.
Системные стеки шрифтов
Системный стек (font stack) — список запасных шрифтов, отображаемых если целевая гарнитура недоступна. Современный универсальный стек для UI:
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
Этот стек использует системный шрифт каждой платформы (San Francisco на macOS/iOS, Segoe UI на Windows, Roboto на Android), что даёт наилучшую читаемость и нулевое время загрузки. Для интерфейсов с высокими требованиями к производительности системный стек часто предпочтительнее любого веб-шрифта.