Шрифты с засечками и без: когда что использовать
Основы4 минРедакция Innovialabs
Коротко
На современных экранах и шрифты с засечками, и гротески хорошо читаются в обычных размерах — выбор в основном про характер и контекст. Гротеск подходит интерфейсам и мелкому тексту, антиква — длинному чтению и редакционному или премиальному тону, а пары из двух шрифтов хватает большинству проектов.
Короткий ответ
Шрифты без засечек (гротески) — стандарт для интерфейсов: кнопок, форм, навигации, дашбордов и мелких подписей. Шрифты с засечками (антиквы) хорошо работают в заголовках с характером и в длинных текстах — статьях, редакционных страницах. На современных экранах высокой чёткости читаемость зависит гораздо больше от размера, интервалов и качества конкретного шрифта, чем от наличия засечек.
Поэтому правильный вопрос не «что читабельнее», а «какой характер нужен продукту и где будет текст».
Основные классы шрифтов
| Класс | Как узнать | Характер | Где уместен |
|---|---|---|---|
| Антиква (с засечками) | Небольшие штрихи на концах букв | Классический, редакционный, солидный | Статьи, книги, премиальные и медиабренды |
| Гротеск (без засечек) | Засечек нет, штрихи ровные | Нейтральный, современный | Интерфейсы, приложения, текст на сайте |
| Брусковый | Толстые прямоугольные засечки | Крепкий, уверенный, немного технический | Заголовки, постеры, смелые бренды |
| Моноширинный | Все символы одной ширины | Технический, точный | Код, таблицы чисел, технические акценты |
| Акцидентный | Выразительные необычные формы | Яркий характер | Логотипы и крупные заголовки |
| Рукописный | Имитирует почерк | Личный, неформальный | Редкие акценты, не для основного текста |
Внутри гротесков полезно различать неогротески (нейтральные), геометрические (построены на окружностях и прямых, дружелюбные и современные) и гуманистические (ближе к рукописной форме, отлично читаются в мелком кегле).
Как они ведут себя на экране
Старое правило «засечки плохо смотрятся на экране» появилось во времена дисплеев с низким разрешением, где тонкие засечки превращались в шумные пиксели. На современных экранах качественные антиквы отображаются чисто и в размере основного текста.
Что по-прежнему важно:
- Мелкие размеры. В 12–14px гротески с открытыми формами и крупной высотой строчных остаются чётче. Поэтому подписи в интерфейсе почти всегда без засечек.
- Тонкие элементы. Антиквы с сильным контрастом штрихов эффектны в крупных заголовках, но слабеют в мелком кегле и светлых начертаниях.
- Похожие символы. Если в интерфейсе есть коды, ID и пароли, проверьте, что I, l и 1, O и 0 легко различить.
- Поддержка языков. Для многоязычного продукта убедитесь, что в шрифте есть полная кириллица и расширенная латиница с нужными буквами. Недостающие символы подставятся из другого шрифта и испортят вид.
Как сочетать шрифты
Надёжные схемы для большинства проектов:
- Одно семейство на всё — гротеск с несколькими начертаниями. Проще и последовательнее всего.
- Заголовки с засечками + текст без засечек — добавляет характер и редакционность, сохраняя чёткость интерфейса.
- Заголовки без засечек + текст с засечками — хорошо для блогов и длинного чтения.
- Моноширинный добавляйте, только если показываете код или технические данные.
Правила, при которых пара работает:
- Сочетайте шрифты с явным контрастом по структуре, а не два почти одинаковых гротеска.
- Подбирайте близкие высоту строчных и пропорции, чтобы шрифты уживались в одной строке.
- Ограничьтесь двумя семействами, остальное разнообразие — через начертания и размеры.
- Проверьте оба шрифта во всех языках и начертаниях, которые планируете использовать.
Как выбрать для своего проекта
- Интерфейс продукта или SaaS-дашборд: гротеск, возможно одно семейство.
- Корпоративный сайт или сайт услуг: текст гротеском, заголовки гротеском или антиквой — по тону бренда.
- Медиа, блог, документация: антиква или гуманистический гротеск для текста, удобная длина строки.
- Премиум, юриспруденция, финансы, бренды с историей: заголовки с засечками часто поддерживают тон.
- Технологичные продукты и продукты для разработчиков: гротеск плюс моноширинные акценты.
Учитывайте и практичные вещи: условия лицензии для веба и приложений, вес файлов и количество подключаемых начертаний, вариативные версии шрифтов, которые заменяют несколько файлов.
Типичные ошибки
- Выбирать шрифт по его названию или одному слову в превью, а не по целому абзацу.
- Ставить акцидентный или рукописный шрифт в основной текст и кнопки.
- Смешивать три и больше семейства на одной странице.
- Вспоминать о кириллице и других письменностях только когда приходят переводы.
- Подключать много начертаний, которые дизайн не использует.