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

Шрифт — то, через что посетитель воспринимает всё содержимое сайта. При этом обсуждают его обычно последним и по остаточному принципу: «поставьте что-нибудь современное».

Разбираем, как выбирать и как подключать, чтобы красивая типографика не превратилась в тормозящий сайт.

Сколько шрифтов нужно

Один или два семейства. Не больше.

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

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

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

Что важнее красоты

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

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

Достаточно начертаний. Минимум обычное и полужирное, желательно курсив. Если в семействе только одно начертание, браузер будет имитировать полужирный, и выглядит это плохо.

Различимость похожих символов. Заглавная «I», строчная «l» и единица. Особенно важно там, где показываются артикулы, коды и цифры.

Платный или бесплатный

Для большинства проектов бесплатного достаточно. В открытых библиотеках есть качественные шрифты с полноценной кириллицей и полным набором начертаний.

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

Что важно знать про лицензии:

• лицензия покупается на конкретное использование: на количество доменов, иногда на объём трафика;
• лицензия должна быть оформлена на вас, а не на подрядчика;
• права на шрифт вам не передадут — вы получаете право использования.

Это одна из тех статей расходов, которые не входят в смету разработки и всплывают позже, о чём в статье скрытые расходы на сайт. И один из пунктов, которые стоит проверить при передаче проекта — подробнее в статье права на дизайн и код.

Как это влияет на скорость

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

Отсюда практические правила:

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

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

Ограничивайте набор символов. Если сайт на русском, латинский расширенный и греческий алфавиты в файле не нужны.

Используйте современные форматы. Они весят заметно меньше устаревших.

Как это соотносится с остальными метриками скорости — в статье Core Web Vitals.

Проблема «прыгающего текста»

Пока основной шрифт грузится, браузер показывает текст запасным. Когда основной загрузился — перерисовывает.

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

Что делать:

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

Худший вариант — когда текст просто не отображается до загрузки шрифта: посетитель несколько секунд смотрит на пустую страницу.

Настройки, которые важнее выбора гарнитуры

Часто сайт выглядит неаккуратно не из-за шрифта, а из-за его настроек.

Размер основного текста. 16–18 пикселей на десктопе. Мельче — люди щурятся, а часть аудитории просто уйдёт.

Межстрочное расстояние. Полторы высоты строки для основного текста. Самая частая ошибка — слишком плотные строки.

Длина строки. 60–80 символов. Текст во всю ширину широкого экрана нечитаем: глазу трудно найти начало следующей строки.

Контраст. Светло-серый текст на белом фоне выглядит воздушно и читается плохо, особенно на солнце и на слабых экранах.

Иерархия. Заголовки разных уровней должны различаться заметно.

Эти настройки — часть дизайн-системы, о которой в статье что такое дизайн-система: задаются один раз и применяются везде.

На мобильных

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

Проверять нужно на реальном устройстве — методика в статье адаптивная вёрстка.

Итог

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

И помните, что читаемость важнее оригинальности: посетитель пришёл за информацией, а не любоваться гарнитурой. Хорошая типографика незаметна — она просто не мешает читать.