Шрифтовые пары для сайта: готовые связки с кириллицей

Несколько проверенных сочетаний из бесплатных гарнитур с полноценной кириллицей — с образцами, ролями и оговорками по применению.

Как читать подборку

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

Пара 1. Дисплей и гротеск

Самое универсальное сочетание для современных медиа и брендов: выразительные заголовки и нейтральный интерфейс.

Пара 2. Антиква и гротеск

Классическая редакционная связка: серьёзный текст для чтения и нейтральный гротеск для служебных элементов.

Пара 3. Дидон и антиква

Для журнальных и культурных проектов: контрастный дидон в заголовках и цитатах, спокойная антиква в теле текста.

Что учесть при внедрении

Любая пара требует технической настройки, иначе на сайте она выглядит хуже, чем в образце.

Запасной шрифт — часть пары

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

Решается подбором запасного шрифта с близкой высотой строчных и корректировкой через свойства переопределения метрик. Практический минимум — задать осмысленный системный фолбэк вместо абстрактного sans-serif.

Сколько файлов позволяет бюджет

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

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

Что делает загрузку шрифта заметной

Пара выбрана, а страница всё равно моргает при открытии: сначала текст показан системным шрифтом, потом перерисовывается выбранным. Это не дефект шрифта, а поведение браузера, и оно управляется. Свойство font-display решает, что происходить будет: показать запасной и подменить, подождать и показать сразу нужный или не подменять вовсе. Для основного текста подмена почти всегда лучше пустоты — читать можно с первой секунды.

Заметность подмены зависит от того, насколько запасной шрифт похож на основной по ширине и высоте строчных. Если они близки, текст при подмене почти не сдвигается; если далеки, страница подпрыгивает и это видно. Поэтому запасной подбирают не «какой-нибудь системный», а конкретный — и при необходимости подгоняют размерами так, чтобы блок текста занимал то же место.

Типографика на разной ширине экрана

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

Длина строки — главный ориентир. Комфортный диапазон для основного текста 50–75 знаков; на широком экране его держат ограничением ширины колонки, на узком — размером шрифта. Если при уменьшении экрана колонка сжимается до тридцати знаков, дело не в шрифте, а в отступах: на телефоне поля почти всегда стоит уменьшать вместе с шириной.

Что в итоге

Три связки покрывают большинство задач: дисплей плюс гротеск, антиква плюс гротеск, дидон плюс антиква.

Внедряя пару, обязательно настройте сабсет, запасные шрифты и разный интерлиньяж — иначе теряется половина эффекта.