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

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

Обычно два, редко три:

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

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

Как сочетать

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

Кириллица — первым делом

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

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

Размер и читаемость

• Основной текст — от 16 пикселей на телефоне и 16–18 на компьютере. Мелкий текст «для красоты» не читают.
• Длина строки — 60–80 знаков. Слишком длинная строка утомляет: глаз теряет начало следующей.
• Межстрочный интервал — примерно в полтора раза больше размера шрифта для текста, плотнее — для заголовков.
• Контраст текста с фоном — достаточный, о нём в статье «Цвета для сайта».

Где взять

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

Шрифты и скорость

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

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

Подробнее о том, что тормозит сайт, — в статье «Скорость загрузки сайта».

Как устроено у нас

На нашем сайте три гарнитуры, и у каждой своя роль. Onest — для текста: спокойный, с хорошей кириллицей. Familjen Grotesk — для названия AETHER в логотипе: у него характерный рисунок, но нет кириллицы, поэтому русских заголовков им не набираем. Моноширинный Google Sans Code — для подписей и навигации, а русские буквы в них берёт IBM Plex Mono, у которого кириллица есть. Все файлы шрифтов лежат на нашем сервере — сайт не зависит от внешних сервисов.

Как мы делаем это для клиентов

Шрифты подбираем в собственном дизайне сайта, без шаблонов, — для компьютера и отдельно для телефона, а макет показываем и правим до начала вёрстки. Для сайта из нескольких страниц посмотрите корпоративный сайт.