Типографика как UI: когда текст важнее кнопки

Почему шрифт — это интерфейс

Кнопка говорит «нажми». Текст говорит «куда смотреть, что важно и чем это закончится». В 80% интерфейсов, которые мы разрабатываем, пользователь принимает решение до того, как коснется любого элемента управления.

Когда мы говорим «типографика как UI», мы имеем в виду, что гарнитура, кегль, интерлиньяж и ритм абзацев формируют ту же функциональную нагрузку, что и иконки, ссылки и кнопки. В интерфейсах финтеха, например, число с правильным табулированным начертанием — это и есть элемент управления: он не просто отображает данные, он снижает когнитивную нагрузку.

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

Анатомия читабельного текста на экранах

Экран — это не бумага. Пиксели не имеют физического веса, а субпиксельная рендеризация искажает тонкие детали глифов. Поэтому правила типографики для веба отличаются от печатных.

Кегль и интерлиньяж. Для основного текста мы держим кегль в диапазоне 16–20px и интерлиньяж 1.5–1.7. При кегле меньше 14px интерлиньяж нужно увеличивать до 1.8, иначе строки сливаются. Для заголовков — наоборот, интерлиньяж 1.0–1.15 и отрицательный трекинг.

Длина строки. Оптимальная мера строки — 45–75 символов. Мы используем CSS-утилиту max-width: 60ch для основного текста, что автоматически ограничивает ширину в 60 символов текущего шрифта. Это проще, чем считать пиксели.

Контраст. Минимальный контраст текста на фоне — 4.5:1 для основного текста и 3:1 для крупных заголовков. На темных фонах, как в наших проектах, белый текст (#f0f0f5) на #0f0e13 дает контраст 15.2:1 — это безопасная зона без потери читаемости.

Кеирнинг, трекинг и сетки

Кеирнинг — это расстояние между конкретными парами букв. Трекинг — это расстояние между всеми буквами. В вебе мы почти никогда не трогам кеирнинг вручную, но трекинг — наш главный инструмент для контроля плотности текста.

Трекинг заголовков. Для крупного кегля (32px и выше) мы используем letter-spacing: -0.02em. Это сжимает буквы на 2% от кегля, делая заголовок визуально плотнее и «дороже». Для мелкого текста (подписи, метки) трекинг положительный: letter-spacing: 0.1em или больше, особенно для капса.

Типографические сетки. Мы работаем на модульной сетке с базовым шагом 8px. Все отступы, кегли и интерлиньяжи должны быть кратны этому шагу. Это создает ритм, который пользователь чувствует подсознательно. Когда сетка ломается — интерфейс выглядит «криво», даже если все элементы выровнены по пикселям.

Функциональный трекинг. В навигации и навигационных элементах мы увеличиваем трекинг до 0.05em для капса. Это не эстетика — это функциональность: разведенные буквы легче читаются при быстром сканировании, чем плотные.

Рекомендации по выбору гарнитур

Не выбирайте шрифт по «нравится». Выбирайте по функциональности, читаемости и характеру.

Одна гарнитура — три веса. Для большинства проектов достаточно одной гарнитуры с весами 400, 600 и 700. Space Grotesk, Manrope, Inter или General Sans покрывают 90% задач. Добавляйте вторую гарнитуру только если нужна контрастность между текстом и данными (например, моноширинная для цифр).

Тестируйте на реальном контенте. Не смотрите на шрифт в образце. Вставьте в него свой текст — длинные абзацы, заголовки, подписи. Проверьте, как он ведет себя на разных кеглях. Многие шрифты, которые прекрасно выглядят на 72px, рассыпаются на 14px.

Следите за субпиксельной рендеризацией. На Retina-дисплеях тонкие детали глифов (апострофы, кавычки, дефисы) могут теряться. Тестируйте шрифт на 100% и 125% зума. Если текст выглядит «мыльным» — гарнитура не подходит для вашего проекта.

Используйте системные фолбэки. Всегда указывайте font-family: 'Space Grotesk', sans-serif;. Если шрифт не загрузится, пользователь не увидит «шрифт не найден» — он увидит системный sans-serif, который сохранит базовую читаемость.