Как подобрать и сочетать шрифты для сайта

Коротко о главном

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

Шаг 1. Выберите шрифт для текста

Основной текст должен хорошо читаться в мелком кегле даже на недорогих экранах. Обращайте внимание на:

• большую высоту строчных (x-height);
• открытые формы букв а, е, с;
• различимые Il1 и O0;
• как минимум regular, medium и bold, желательно курсив;
• качественный хинтинг или шрифт, созданный для экранов.

Нейтральные гротески (Inter, Source Sans 3, IBM Plex Sans, PT Sans) — надёжный вариант для интерфейсов. Антиквы для текста хороши там, где много длинного чтения: блоги, медиа.

Шаг 2. Подберите шрифт заголовков по контрасту

Два почти одинаковых шрифта выглядят как ошибка, два совершенно разных — как хаос. Ищите один сильный контраст:

Суперсемейство (гарнитура с версиями serif и sans) — самый простой путь к гармонии без угадывания.

Шаг 3. Учтите настроение

У шрифтов есть ассоциации. Подбирайте их под бренд, а не под личный вкус:

• геометрический гротеск (круглая O, простые формы): современно, технологично, дружелюбно;
• гуманистический гротеск (каллиграфические корни): тепло, открыто, читаемо;
• контрастная антиква: премиально, мода, медиа;
• брусковый шрифт (slab serif): надёжно, практично, немного ретро;
• моноширинный как акцент: технично, для разработчиков.

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

Шаг 4. Проверьте лицензию

• Шрифты на Google Fonts в основном распространяются по SIL Open Font License, которая разрешает коммерческое использование и размещение на своём сервере.
• У коммерческих шрифтов часто отдельные лицензии на десктоп, веб и приложения. Десктопная лицензия не означает права встраивать шрифт на сайт.
• Веб-лицензии бывают ограничены по просмотрам или доменам. Читайте условия до запуска, а не после.
• Храните файл лицензии в репозитории рядом со шрифтами.

Шаг 5. Проверьте языки и символы

Если сайт многоязычный, каждый шрифт должен поддерживать все языки. Для русского нужна кириллица, для узбекской латиницы — корректные апострофы в o‘ и g‘. Многие акцидентные шрифты есть только в латинице. Наберите реальную фразу на каждом языке и поищите буквы, которые внезапно подставились из другого шрифта.

Шаг 6. Следите за скоростью

Каждое начертание — ещё один файл для загрузки.

• Используйте WOFF2.
• Подключайте только нужные начертания, обычно 2–3 на гарнитуру, или один вариативный шрифт.
• Делайте сабсеттинг под нужные письменности.
• Ставьте font-display: swap, чтобы текст сразу показывался запасным шрифтом.
• Делайте preload для одного-двух файлов первого экрана.
• По возможности раздавайте шрифты со своего домена.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

body { font-family: "Inter", system-ui, sans-serif; }

<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>

Проверенные бесплатные пары

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

Частые ошибки

• Три и больше гарнитуры на одной странице.
• Сначала выбрать шрифт заголовков и подгонять под него текстовый.
• Акцидентный шрифт для основного текста.
• Подключение всех начертаний «на всякий случай».
• Забыть, что один из языков сайта не поддерживается.