Типографика в интерфейсе: как выбрать шрифты и настроить читаемость

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

При этом типографику часто недооценивают. Дизайнер выбирает шрифт на старте, расставляет размеры по ощущению и переходит к другим задачам. В итоге в продукте появляются 8 разных размеров текста без логики, три гарнитуры без причины и основной контент в 13px на мобильном.

В этой статье разберем, как выстроить типографику в интерфейсе системно: от выбора шрифта до настройки иерархии и проверки читаемости на разных устройствах.

Что такое типографическая система и зачем она нужна

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

Без системы каждый экран решается заново. Один дизайнер ставит заголовок в 24px, другой - в 28px, третий берет полужирное начертание там, где достаточно обычного. Разработчики начинают хардкодить значения, и через полгода в коде живет 15 разных font-size без связи с дизайном.

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

Как выбрать шрифт для интерфейса

Выбор гарнитуры - первое решение, и оно влияет на все остальное. Здесь важно не искать «красивый» шрифт, а понять, какие задачи он должен решать.

Критерии выбора

Читаемость на экране. Шрифты, разработанные для экранов, имеют увеличенную x-высоту (высоту строчных букв) и более открытые формы символов. Inter, IBM Plex Sans, Roboto, SF Pro - все они проектировались с учетом пиксельных сеток и рендеринга на разных устройствах.

Поддержка кириллицы. Если продукт на русском языке, проверяйте качество кириллического начертания отдельно. У некоторых популярных шрифтов кириллица добавлена позже и выглядит хуже латиницы - другие пропорции, другой ритм. Хорошо работают: Inter, Golos Text, Manrope, PT Sans, IBM Plex Sans.

Набор начертаний. Для интерфейса нужны минимум три: Regular, Medium или SemiBold, Bold. Если шрифт поставляется только в двух начертаниях, выстроить иерархию сложнее.

Лицензия. Для коммерческих продуктов важно проверить условия использования. Google Fonts и большинство шрифтов на них - бесплатны для коммерческого применения. Системные шрифты (SF Pro, Segoe UI) - только для соответствующих платформ.

Сколько гарнитур использовать

Для большинства интерфейсов достаточно одной. Две гарнитуры оправданы, если нужно разделить UI-текст и контентный текст - например, в медиапродукте, где статьи читаются долго. В таком случае один шрифт для интерфейса (навигация, кнопки, метки), другой - для длинных текстов.

Три и больше гарнитуры - почти всегда лишнее. Это усложняет систему, увеличивает вес страницы и создает визуальный шум.

Типографическая шкала: как не придумывать размеры на глаз

Типографическая шкала - это набор размеров, связанных между собой математическим соотношением. Вместо произвольных значений (13, 15, 17, 22, 31) используется логика, где каждый следующий размер получается умножением на коэффициент.

Популярные соотношения для интерфейсов:

Если базовый размер 16px и коэффициент 1.25, шкала выглядит так: 12.8 - 16 - 20 - 25 - 31.25 - 39. На практике значения округляют: 13 - 16 - 20 - 24 - 32 - 40.

Инструменты для генерации шкалы: typescale.com и modularscale.com. Они позволяют выбрать базу и коэффициент и сразу видеть результат.

Базовый размер

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

14px допустимо для вспомогательного текста: подписи, метки, мелкие подсказки. Меньше 12px - только для декоративных элементов, не несущих смысловой нагрузки.

На мобильных устройствах минимальный размер интерактивного текста (ссылки, кнопки) - 16px. Apple Human Interface Guidelines и Material Design оба указывают на это как на требование доступности.

Иерархия: как читатель понимает структуру страницы

Иерархия - это визуальная система, которая показывает, что важнее. Пользователь не читает интерфейс линейно: он сканирует, выхватывает заголовки, ищет нужное. Если иерархия не выстроена, взгляд блуждает.

Иерархию создают четыре инструмента: размер, насыщенность (weight), цвет и регистр. Использовать все четыре одновременно - избыточно. Обычно достаточно двух-трех.

Уровни иерархии в типичном интерфейсе

• H1 / Page title - главный заголовок страницы или экрана. 24-40px, Bold или SemiBold.
• H2 / Section title - заголовок раздела. 18-24px, SemiBold.
• H3 / Card title - заголовок карточки или блока. 16-18px, Medium или SemiBold.
• Body - основной текст. 16px, Regular.
• Secondary - вспомогательный текст, подписи. 13-14px, Regular, пониженный контраст.
• Caption / Label - метки, теги, мелкие подписи. 11-12px.

Важно: разница между уровнями должна быть заметной. Если H2 и H3 отличаются только на 2px, иерархия не читается. Минимальный шаг между соседними уровнями - 4px, лучше 4-6px.

Межстрочный интервал и ширина строки

Два параметра, которые сильнее всего влияют на комфорт чтения, но часто остаются с дефолтными значениями.

Line-height

Для основного текста оптимальный межстрочный интервал - 1.4-1.6 от размера шрифта. Для 16px это 22-26px. Слишком маленький интервал (1.1-1.2) делает текст плотным и трудным для чтения. Слишком большой (1.8+) разрывает связь между строками.

Для заголовков интервал меньше: 1.1-1.3. Крупный текст с большим межстрочным выглядит разорванным.

Для интерфейсных элементов - кнопок, меток, навигации - line-height обычно равен высоте элемента или близок к 1.2-1.3.

Ширина строки

Оптимальная длина строки для чтения - 45-75 символов, или примерно 600-750px при 16px. Это правило из типографики для печати, но оно работает и для экранов.

Слишком широкая строка (более 90 символов) утомляет: глаз теряет начало следующей строки. Слишком узкая (менее 35 символов) заставляет часто переносить взгляд и разрывает смысловые единицы.

На практике для контентных блоков ограничивают max-width: 680-720px. Для интерфейсных элементов (карточки, формы) ширина строки обычно определяется шириной компонента.

Контраст и цвет текста

WCAG 2.1 устанавливает минимальный контраст для текста: 4.5:1 для обычного текста и 3:1 для крупного (от 18px обычного или 14px жирного). Это не просто требование доступности - это порог, ниже которого текст становится некомфортным для чтения в разных условиях освещения.

Серый текст на белом фоне - распространенная ловушка. #999999 на #FFFFFF дает контраст 2.85:1 - ниже минимума. Для вспомогательного текста безопасный вариант - #767676 на белом (4.54:1) или #6B7280 (соответствует gray-500 в Tailwind, контраст около 4.6:1).

Проверить контраст можно в Figma через плагин Contrast или на сайте WebAIM Contrast Checker.

Начертания: как не перегрузить интерфейс жирным

Bold и SemiBold привлекают внимание. Именно поэтому их нельзя использовать везде - иначе они перестают выделять что-либо.

Рабочее правило: жирное начертание должно занимать не более 20-30% текста на экране. Если больше - иерархия разрушается, все кажется одинаково важным.

Regular - для основного текста и вспомогательных элементов. Medium - для меток, навигации, кнопок, где нужна чуть большая заметность без акцента. SemiBold - для заголовков карточек, важных подписей. Bold - для заголовков страниц и разделов, ключевых акцентов.

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

Типографика в компонентах: кнопки, формы, навигация

Интерфейс - это не только заголовки и основной текст. У каждого компонента свои требования.

Кнопки

Текст кнопки должен читаться с первого взгляда. Оптимальный размер - 14-16px, начертание Medium или SemiBold. Все буквы в верхнем регистре (ALL CAPS) снижают читаемость и сейчас используются реже - Material Design 3 отказался от этого подхода в пользу обычного регистра с заглавной буквы.

Формы

Label над полем - 12-14px, Medium, пониженный контраст или основной цвет. Placeholder - 16px, Regular, серый (но не слишком светлый - контраст не ниже 3:1). Текст ошибки - 12-13px, красный, достаточный контраст.

Навигация

Пункты навигации - 14-16px, Regular или Medium. Активный пункт выделяется цветом или начертанием, но не размером - иначе навигация «прыгает» при переключении.

Типичные ошибки в интерфейсной типографике

Как проверить типографику в готовом дизайне

Прежде чем передавать макеты в разработку, стоит пройтись по нескольким проверкам.

Инструменты для работы с типографикой

Figma - основной инструмент. Text Styles и Variables позволяют хранить типографическую систему и применять ее по всему файлу. С Variables (Figma 2023+) можно создавать адаптивные стили, которые меняются в зависимости от режима (светлая/темная тема, десктоп/мобильный).

Google Fonts - бесплатная библиотека с фильтрацией по языку, начертаниям и категориям. Позволяет сравнивать шрифты в паре и проверять кириллицу.

Fontpair.co - подборки шрифтовых пар для тех, кто хочет использовать две гарнитуры.

Contrast Checker от WebAIM - проверка контраста по WCAG. Показывает результат для AA и AAA уровней.

Typescale.com - генератор типографических шкал с предпросмотром.

Типографика на мобильных: что меняется по сравнению с десктопом

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

Размер текста. На мобильном 14px воспринимается иначе, чем на десктопе с большим экраном: физический размер символа меньше. Поэтому минимум для основного текста на мобильном - те же 16px, а для пожилой аудитории или продуктов с длинными текстами стоит рассматривать 17-18px.

Межстрочный интервал. На узком экране строки короче, переносов больше. Интервал 1.5-1.6 работает лучше, чем 1.4, потому что помогает глазу не терять строку при частых переносах взгляда.

Ширина строки. На мобильном она определяется шириной экрана минус отступы. Стандартные отступы 16-20px с каждой стороны дают примерно 35-45 символов на строку при 16px - это нижняя граница комфортного чтения. Если отступы меньше, строка становится слишком широкой для маленького экрана.

Интерактивные элементы. Текст в кнопках, ссылках и пунктах меню не должен быть меньше 16px - это напрямую связано с размером зоны касания. Apple HIG рекомендует минимальную зону касания 44x44pt, Google Material - 48x48dp. Мелкий текст в интерактивном элементе почти всегда означает, что зона касания тоже занижена.

Типографика и производительность: что важно знать дизайнеру

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

Каждое начертание - отдельный файл. Если подключить Inter в шести начертаниях (Thin, Light, Regular, Medium, SemiBold, Bold), браузер загрузит шесть файлов. Для большинства интерфейсов достаточно трех: Regular, Medium или SemiBold, Bold. Это сокращает объем загружаемых данных примерно вдвое.

Variable fonts решают эту проблему иначе: один файл содержит все начертания, и вес выбирается через CSS-свойство font-variation-settings. Inter, Roboto Flex, Manrope доступны как variable fonts. Размер файла при этом меньше, чем сумма отдельных начертаний.

Подмножества (subsets). Если продукт только на русском, нет смысла загружать полный набор символов шрифта с латиницей, греческим и расширенными символами. Google Fonts автоматически отдает нужный subset по заголовку Accept-Language. При самостоятельном хостинге шрифтов стоит генерировать подмножества вручную через fonttools или аналогичные инструменты.

Font display. CSS-свойство font-display: swap позволяет браузеру сначала показать текст системным шрифтом, а после загрузки заменить его на нужный. Это убирает «невидимый текст» во время загрузки и улучшает воспринимаемую скорость.

Как документировать типографическую систему для команды

Типографическая система работает только тогда, когда все участники команды понимают ее одинаково. Дизайнер знает, что «заголовок карточки» - это 18px SemiBold с line-height 1.3. Но разработчик, получив макет без документации, может поставить 17px Bold с line-height 1.4 - и формально это «похоже».

Хорошая документация типографики включает несколько элементов.

Именованные стили с четкими значениями. Каждый уровень иерархии получает имя и полный набор параметров: font-family, font-size, font-weight, line-height, letter-spacing, color. Имена должны отражать назначение, а не внешний вид: «Body/Default» лучше, чем «16px Regular».

Примеры использования. Для каждого стиля показывается, в каких компонентах он применяется. Это снимает вопросы «а это для чего?» при передаче в разработку.

Правила комбинирования. Какие уровни иерархии сочетаются друг с другом. Например: заголовок карточки H3 + основной текст Body + подпись Caption. Это помогает дизайнерам, которые присоединяются к проекту позже, не изобретать комбинации заново.

Исключения и крайние случаи. Что делать, если текст не помещается в отведенное место: обрезать с многоточием, переносить, уменьшать? Это решение лучше принять заранее и зафиксировать, чем оставлять на усмотрение разработчика.

FAQ

Какой шрифт лучше всего подходит для интерфейса на русском языке?

Нет универсального ответа, но несколько вариантов стабильно работают: Inter (отличная кириллица, бесплатный), Golos Text (разработан специально для русского языка), Manrope, PT Sans. Главное - проверить качество кириллических символов и наличие нужных начертаний.

Можно ли использовать системные шрифты в интерфейсе?

Да, и это часто хороший выбор. SF Pro на iOS, Roboto на Android, Segoe UI на Windows - пользователи уже знакомы с ними, они быстро загружаются и хорошо рендерятся. Минус - нет контроля над тем, как шрифт выглядит на разных платформах.

Сколько размеров текста должно быть в системе?

Для большинства продуктов достаточно 5-7 уровней. Больше - сложнее поддерживать и сложнее объяснить разработчику, когда что использовать. Если шкала растет, стоит проверить, не дублируют ли некоторые уровни друг друга.

Как настроить типографику для темной темы?

В темной теме текст воспринимается иначе: чисто белый (#FFFFFF) на темном фоне создает слишком высокий контраст и вызывает усталость глаз. Лучше использовать слегка приглушенный белый - например, #F1F5F9 или #E2E8F0. Вспомогательный текст должен оставаться читаемым - проверьте контраст отдельно для темного режима.

Нужно ли ограничивать ширину строки в мобильном интерфейсе?

На мобильных экранах ширина строки обычно ограничена самим экраном - проблема редко возникает. Но если текстовый блок занимает полную ширину на планшете в горизонтальной ориентации, ограничение max-width актуально.

Как объяснить разработчику типографическую систему?

Лучший способ - передать именованные стили с четкими значениями: название уровня, font-size, line-height, font-weight, letter-spacing. Если в команде используются дизайн-токены, типографика описывается через них. Это снимает вопросы «какой размер здесь?» и позволяет обновлять систему централизованно.

Итог

Хорошая типографика в интерфейсе - это система, а не набор красивых шрифтов. Она строится на четкой шкале размеров, читаемой иерархии, правильных интервалах и достаточном контрасте. Когда система выстроена, дизайнер тратит меньше времени на решение «какой размер поставить», а разработчик не придумывает значения самостоятельно.

Начать можно с малого: зафиксировать базовый размер, построить шкалу из 5-6 уровней, проверить контраст всех текстовых стилей и ограничить количество гарнитур до двух. Этого достаточно, чтобы большинство интерфейсов стали заметно чище и удобнее.