Проверьте, какой шрифт сейчас используется в вашем макете: если текст кнопок и подписей «плывёт» при смене языка или размера экрана, вероятная причина — гарнитура, не предназначенная для интерфейсов, либо отсутствие системных fallback-шрифтов. Шрифт для UI — это не декоративный элемент, а функциональный инструмент: от него зависит скорость чтения, корректность отображения цифр в таблицах и даже доступность интерфейса для людей с особенностями зрения.
В этой статье разберём, чем интерфейсные шрифты отличаются от акцидентных, какие гарнитуры подходят для веба и мобильных приложений, как задать кегль и межстрочный интервал, а также как подключить шрифт через CSS без потери производительности.
Чем интерфейсный шрифт отличается от обычного
Основное требование к шрифту для интерфейса — читаемость в малых кеглях. Подписи к иконкам, пункты меню и текст в полях ввода часто набираются размером 12–14 пикселей, и при таком размере декоративные гарнитуры превращаются в неразборчивый набор штрихов.
Интерфейсные шрифты проектируются с учётом нескольких особенностей: открытые апертуры (просветы в буквах «с», «е», «а»), крупное очко (внутреннее пространство букв), различимость похожих знаков — например, заглавной I, строчной l и цифры 1. Если в вашем продукте есть коды, пароли или идентификаторы, этот критерий становится критичным.
Ещё одно отличие — поддержка нескольких начертаний. Для иерархии в UI нужны как минимум Regular, Medium и Bold, а хорошие интерфейсные семейства включают также SemiBold и Light, что позволяет выстраивать визуальную структуру без смены гарнитуры.
Критерии выбора шрифта для UI
При подборе гарнитуры для интерфейса полезно пройтись по фиксированному списку проверок, а не полагаться на субъективное «красиво / некрасиво».
- 🔤 Читаемость в малом кегле — проверьте текст размером 12–13 px на реальном экране, а не в зуме редактора.
- 🌍 Языковая поддержка — убедитесь, что в шрифте есть кириллица и все нужные вам языки, иначе часть интерфейса отрисуется системным шрифтом.
- 🔢 Качество цифр — для дашбордов и финансовых продуктов желательны табличные (моноширинные) цифры, чтобы колонки чисел не «прыгали».
- ⚖️ Лицензия — проверьте, разрешает ли лицензия использование в приложениях и вебе, особенно для коммерческих продуктов.
- 📐 Набор начертаний — минимум Regular и Bold, в идеале — переменный (variable) шрифт с гибкой настройкой веса.
⚠️ Внимание: бесплатная загрузка шрифта с сайта не означает свободную лицензию. Перед использованием в коммерческом продукте проверьте условия на странице автора или в файле лицензии внутри архива — нарушение может привести к претензиям правообладателя.
☑️ Проверка шрифта перед использованием в UI
Популярные шрифты для интерфейсов
Есть ряд гарнитур, которые давно стали стандартом для UI благодаря нейтральности и хорошей экранной отрисовке. Среди них — Inter, изначально спроектированный именно для интерфейсов, Roboto как системный шрифт Android, San Francisco в экосистеме Apple, а также Open Sans, Source Sans и PT Sans с полноценной кириллицей.
Системные шрифты (Segoe UI в Windows, San Francisco в macOS и iOS, Roboto в Android) имеют важное преимущество: они не требуют загрузки и мгновенно отображаются. Многие крупные сервисы используют именно системный стек, чтобы интерфейс выглядел «родным» на каждой платформе.
| Шрифт | Тип | Кириллица | Типичное применение |
|---|---|---|---|
| Inter | Гротеск, variable | Есть | Веб-интерфейсы, дашборды |
| Roboto | Гротеск | Есть | Android, Material Design |
| San Francisco | Системный | Есть | iOS, macOS |
| PT Sans / PT Root UI | Гротеск | Есть, полная | Русскоязычные продукты |
| Segoe UI | Системный | Есть | Windows-приложения |
Доступность конкретной гарнитуры и состав её начертаний могут меняться между версиями, поэтому перед финальным выбором сверяйтесь с официальной страницей шрифта или репозиторием вроде Google Fonts.
Кегль, интерлиньяж и длина строки
Даже идеальный шрифт можно испортить неверной типографикой. Для основного текста интерфейса обычно используют кегль 14–16 px, для подписей и второстепенных элементов — 12–13 px. Меньше 12 px опускаться не стоит: на экранах с низкой плотностью пикселей такой текст станет нечитаемым.
Межстрочный интервал (line-height) для UI-текста обычно задают в диапазоне 1.4–1.6 от кегля. Слишком тесный интерлиньяж склеивает строки, слишком широкий — разрывает логические блоки. Для заголовков значение можно уменьшать до 1.1–1.2, для мелких подписей — держать около 1.3.
Длина строки тоже влияет на чтение: оптимальной для сплошного текста считается строка примерно в 55–75 символов, более длинные строки утомляют глаз при переходе на новую строку. В интерфейсах это чаще касается описаний, подсказок и статей внутри продукта.
Подключение шрифта в вебе
Для веб-интерфейсов шрифт подключается через CSS-правило @font-face либо через готовую ссылку сервиса вроде Google Fonts. Современный формат — WOFF2: он заметно компактнее старых TTF и OTF за счёт сжатия.
Пример базового подключения с указанием fallback-стека:
@font-face {
font-family: 'Inter';
src: url('inter-regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
body {
font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
}
Директива font-display: swap указывает браузеру сразу показать текст системным шрифтом, а после загрузки подменить его кастомным. Без неё пользователь может несколько секунд видеть пустую страницу — такое поведение называют FOIT (flash of invisible text).
⚠️ Внимание: каждое подключаемое начертание — это отдельный файл и дополнительный вес страницы. Если вы загружаете 6–8 начертаний, а реально используете три, интерфейс замедляется без пользы. Рассмотрите variable-шрифт: один файл покрывает весь диапазон весов.
Что такое субсеттинг шрифта
Субсеттинг — это удаление из файла шрифта неиспользуемых символов. Например, если интерфейс только на русском и английском, можно убрать греческий, арабский и другие наборы, сократив размер файла в разы. Инструменты вроде pyftsubset или онлайн-сервисы позволяют сделать это за пару минут.
Шрифты в мобильных приложениях
В мобильной разработке действуют те же принципы, но добавляются платформенные ограничения. На iOS кастомный шрифт добавляется в бандл приложения и регистрируется в Info.plist, на Android файлы размещаются в папке res/font. Точные шаги зависят от версии SDK и используемого фреймворка, поэтому сверяйтесь с официальной документацией платформы.
Учитывайте вес приложения: несколько полных файлов шрифтов могут добавить мегабайты к размеру установки. Здесь также выручают субсеттинг и форматы с хорошим сжатием.
Не забывайте про динамический размер шрифта: обе платформы позволяют пользователю увеличить текст в системных настройках. Если интерфейс свёрстан жёстко, увеличенный шрифт сломает вёрстку — тестируйте экраны с максимальным системным размером текста.
Типичные ошибки при работе со шрифтами в UI
Разберём ошибки, которые встречаются чаще всего и легко проверяются на этапе ревью макета.
- 🎨 Смешение трёх и более гарнитур в одном интерфейсе — достаточно одной, максимум двух (например, текстовой и моноширинной для кода).
- 📉 Использование
font-weight, которого нет в подключённом файле — браузер «дорисует» жирность синтетически, и буквы деформируются. - 🌫️ Слишком светлые начертания (Thin, Light) для основного текста — на дешёвых экранах и при ярком свете они выцветают.
- 🔁 Отсутствие fallback-шрифтов в CSS — при сбое загрузки интерфейс переключится на шрифт по умолчанию с другой геометрией, и вёрстка «поедет».
Отдельная проблема — подмена шрифта между дизайном и вёрсткой. Если в макете использован Inter, а в CSS указан «похожий» Arial, метрики букв различаются, и аккуратно выверенные отступы перестают совпадать. Сверяйте подключённые шрифты с макетом до релиза.
Частые вопросы о шрифтах для UI
Какой шрифт лучше всего подходит для интерфейсов?
Универсального «лучшего» нет, но наиболее безопасный выбор — нейтральные гротески с открытой апертурой и полной кириллицей: Inter, Roboto, PT Root UI. Для максимальной скорости и нативного вида используйте системный стек платформы.
Сколько шрифтов можно использовать в одном интерфейсе?
Оптимально — одну гарнитуру с несколькими начертаниями. Вторая допустима для акцентов, кода или числовых данных. Три и более почти всегда создают визуальный шум и усложняют поддержку.
Какой минимальный размер шрифта допустим в UI?
Ориентир — 12 px для второстепенных подписей и 14–16 px для основного текста. Меньшие размеры ухудшают читаемость и доступность, особенно на экранах с низкой плотностью пикселей.
Можно ли использовать любой скачанный шрифт в коммерческом продукте?
Нет. Условия определяются лицензией конкретного шрифта: одни разрешают свободное коммерческое использование (например, шрифты под SIL OFL), другие требуют покупки лицензии для приложений или веба. Всегда проверяйте текст лицензии до релиза.
Что делать, если кастомный шрифт тормозит загрузку страницы?
Проверьте три вещи: используется ли формат WOFF2, добавлено ли font-display: swap и не подключены ли лишние начертания. Дополнительно помогают субсеттинг (удаление неиспользуемых символов) и предзагрузка ключевого файла через preload.