Шрифты для сайта: как выбрать и не испортить

Шрифт — это не просто «красивые буковки». Это инструмент, который либо удержит посетителя и проведёт по странице до заявки, либо заставит закрыть вкладку через 3 секунды. Особенно это критично для лендингов и коммерческих сайтов, где каждая секунда контакта на вес золота.

Я за свою практику перебрал десятки связок и понял главное: хорошая типографика не бросается в глаза. Она незаметно работает на вас. Давайте разберём, как добиться такого эффекта без лишних затрат и правок.

Как подобрать шрифт: 4 шага без воды

Вот мой алгоритм, который спасает от бесконечного скроллинга каталогов Google Fonts.

1. Определите задачу текста

Спросите себя: «Что этот текст должен сделать?»

• Заголовок: остановить взгляд и за 1 секунду объяснить суть. Нужен характер, плотность, крупные знаки.
• Основной текст (лонгриды, описания услуг): обеспечить чтение без напряжения. Приоритет — разборчивость на мобильных экранах (кегль 16–18px).
• Интерфейсные элементы (кнопки, меню): быть нейтральным фоном для действия. Жирное здесь уместнее для акцентов, чем вычурный рисунок.

2. Выберите характер шрифта под нишу

Антиква (с засечками) или гротеск (без засечек) — базовое решение:

• Гротески (Roboto, Inter, Montserrat): универсальны для IT, производства, услуг. Создают ощущение современности и чистоты. Мой выбор по умолчанию, если нет чёткого брендбука.
• Антиква (Playfair Display, Merriweather): хороши для премиум-сегмента, юриспруденции, блогов. Вызывают ассоциации с традицией и надёжностью.
• Брутальные/моноширинные: подойдут для технических стартапов, криптотематики, креативных портфолио, но в основном тексте их читать тяжело.

3. Соберите шрифтовую пару по контрасту

Классический безотказный приём: гротеск в заголовках + антиква в тексте (или наоборот). Новичкам проще всего взять 2 начертания из одного семейства или суперсемейки (например, Montserrat и Merriweather Sans — не моя рекомендация, а пример комбинации). Избегайте соединения двух похожих нейтральных гротесков — получится «каша».

4. Проверьте читаемость на реальном макете

Сверстайте типовой блок с реальными текстами, а не «рыбой». Смотрите с телефона в руке, а не в эмуляторе DevTools. Если приходится вглядываться хотя бы секунду — кириллица шрифта плохая или межстрочный интервал зажат. Оптимальный интерлиньяж для основного текста — 140–160% от кегля.

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

Чек-лист «Что понадобится до покупки и публикации»

Перед тем как отдавать макет в вёрстку или загружать сайт на хостинг, пройдитесь по этому списку. Он спасает от типовых проблем с законом и скоростью загрузки.

• Лицензия для веба: скачать любой понравившийся файл .ttf и закинуть на сайт — нарушение авторских прав. 99% коммерческих шрифтов (как ParaType или шрифты из Adobe Fonts) требуют покупки лицензии с привязкой к домену. Google Fonts и OFL-лицензии бесплатны и безопасны.
• Оптимизация под WebFont: формат WOFF2 как стандарт. Не тащите на сайт все доступные начертания (Light, Regular, Bold, Black и т.д.) — каждое весит 40–80 КБ. Оставьте Regular и Bold для текста и заголовков. Разница в скорости загрузки между двумя и пятью файлами при плохом мобильном интернете может составить 2–3 секунды.
• Техническая база хостинга: ваш сервер должен корректно отдавать шрифты с правильными заголовками CORS, иначе на некоторых CDN посетители увидят системный Arial. Проверьте этот момент, если настраиваете всё вручную. Если сайт собирается на конструкторе, такие детали обычно уже учтены — как и автоматическая установка обязательного cookie-баннера и политики обработки данных, без которых можно получить штраф.

Если выбираете платный шрифт, помните: при разовом запуске сайта каждый рубль на счету. Цена шрифта для одного домена может доходить до 3 000–5 000 ₽, что сопоставимо с бюджетом на первую рекламную кампанию. Иногда разумнее взять качественный опенсорс, а сэкономленные средства пустить в трафик.

Шрифтовые ошибки, которые я регулярно вижу в малом бизнесе

Собрал то, что реально мешает конверсии, а не просто бесит дизайнеров.

• Убитая кириллица. Многие латинские шрифты имеют русские глифы, нарисованные «на отвали» — буквы «ж», «д» или «л» выпадают по насыщенности и стилю. Всегда включайте в тестовый блок слова с проблемными знаками: «Эффективность», «Часто задаваемые», «Съёмка».
• Big Paragraph Shift. Шрифт из Google Fonts подгрузился на 0,3 секунды позже вёрстки, и весь текст прыгнул на 2 строки вниз. Лечится явным указанием fallback-шрифта с похожими метриками (например, Arial для гротесков, Times New Roman для антиквы) и размерами.
• Цветовая неконтрастность. Светло-серый текст #999 на белом фоне размером 14px. Может, это выглядит стильно в Figma на огромном мониторе, но на уличном свету с телефона читатель просто уйдёт к конкурентам. Минимальный рекомендованный контраст — 4.5:1, проверяется любым онлайн-валидатором.

Помните: типографика заканчивается не на выборе названия шрифта, а на моменте, когда клиент прочитал ваше УТП и нажал кнопку. Если он этого не сделал — вы где-то ошиблись. Чаще всего — в попытке сделать «покрасивее», а не удобнее.