Основы типографики для веб- и интерфейсного дизайна

Что такое типографика в интерфейсе

Типографика — это не выбор красивого шрифта. Это набор правил для размера, интервалов, длины строки и начертания, благодаря которым текст читается и просматривается без усилий. На экране текст несёт почти весь интерфейс: кнопки, подписи, ошибки, навигация.

Хорошая новость: несколько базовых значений закрывают большинство задач. Начните с проверенных настроек, а дальше корректируйте, глядя на реальный контент на реальных устройствах.

Стартовые значения

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

Шкала размеров

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

Частый подход — модульная шкала: каждый шаг равен предыдущему, умноженному на коэффициент, например 1,2 или 1,25. От базы 16px с коэффициентом 1,25 получаются примерно 16, 20, 25, 31, 39, 49. Округлите до целых пикселей и оставьте 5–7 ступеней: если размеров больше, иерархия обычно размыта.

В CSS шкалу задают один раз — переменными или токенами:

:root {
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.25rem;   /* 20px */
  --text-xl: 1.5625rem; /* 25px */
  --text-2xl: 1.9375rem;/* 31px */
}
body { font-size: var(--text-base); line-height: 1.5; }

Единицы rem позволяют тексту учитывать настройки размера шрифта в браузере пользователя.

Интерлиньяж и длина строки

Интерлиньяж помогает глазу вернуться к началу следующей строки. Слишком плотный — строки слипаются, слишком свободный — абзац рассыпается. Основному тексту нужно больше воздуха, чем заголовкам: крупный заголовок с интерлиньяжем 1,5 выглядит разорванным.

Длину строки часто упускают на широких десктопных макетах. Текст на 1400px в ширину утомляет. Ограничьте контейнер, например max-width: 65ch — так ширина привязывается к количеству символов шрифта.

Начертания и трекинг

• Начертания создают иерархию. Полужирный — для заголовков и акцентов, обычный — для чтения. Тонкие начертания (100–300) в мелком кегле теряют контраст и плохо читаются.
• Трекинг (межбуквенный интервал) для основного текста обычно оставляют по умолчанию. Крупным заголовкам часто идёт лёгкий отрицательный трекинг, мелким подписям капсом — небольшой положительный.
• Контраст важен не меньше размера. Светло-серый текст на белом красиво смотрится в макете, но подводит реальных пользователей. Проверяйте контраст по требованиям WCAG.

Типичные ошибки

1. Слишком много размеров и начертаний. Каждое новое значение ослабляет иерархию.
2. Основной текст меньше 16px на мобильных. Приходится увеличивать, а в некоторых мобильных браузерах мелкий текст в полях ввода вызывает автоматический зум.
3. Абзацы на всю ширину большого экрана.
4. Длинный текст по центру. Центрирование подходит коротким заголовкам, но не абзацам.
5. Иерархия только через размер. Начертание, цвет и отступы работают не хуже.
6. Жёсткие px везде, без учёта настроек пользователя.

Как проверить типографику

• Откройте страницу на телефоне и ноутбуке и прочитайте абзац целиком, а не просто посмотрите на него.
• Увеличьте масштаб браузера до 200% и убедитесь, что ничего не ломается и не наезжает.
• Прищурьтесь: иерархия заголовков, подзаголовков и текста должна оставаться заметной.
• Тестируйте на реальном контенте, включая длинные слова и переводы на другие языки.