Какие шрифты использовать на сайте
Один шрифт для всего сайта и два-три начертания — обычное, полужирное и, если нужно, жирное. Каждое лишнее начертание — отдельный файл, который загружается до показа текста.
На что смотреть при выборе
- Есть ли кириллица: часть красивых шрифтов её просто не содержит.
- Разборчивость в мелком размере — тексты читают с телефона.
- Лицензия: не все бесплатные шрифты разрешено использовать в коммерческих проектах.
Почему один шрифт лучше трёх
Каждый подключённый шрифт и каждое его начертание — отдельный файл, который браузер скачивает до показа текста. Три шрифта по четыре начертания — двенадцать файлов и заметная пауза, во время которой страница либо пустая, либо «мигает» заменой шрифта. Дизайнерской ценности в этом зоопарке обычно нет: профессиональные сайты чаще всего собраны на одном шрифте с двумя-тремя начертаниями, а разнообразие достигается размером и жирностью.
Если хочется характерный шрифт для заголовков — это допустимая пара: один для заголовков, один для текста. Больше двух семейств на сайте услуг оправдать трудно.
Практичный выбор без дизайнера
- Возьмите распространённый шрифт с полной кириллицей: Inter, Golos Text, Manrope, PT Sans — не ошибётесь ни с читаемостью, ни с лицензией.
- Основной текст — 16–18 пикселей, межстрочный интервал примерно в полтора размера.
- Начертания: обычное для текста, полужирное для акцентов, жирное для заголовков.
- Проверьте цифры и знак рубля: в некоторых шрифтах они выглядят чужеродно, а на сайте с ценами их много.
Уточняющие вопросы
Можно ли использовать шрифт из любимого журнала?
Только если его лицензия разрешает веб-использование — у коммерческих шрифтов это отдельная и платная позиция. Бесплатные аналоги есть почти у любого популярного шрифта.
Что такое системные шрифты и чем они хороши?
Это шрифты, уже установленные на устройстве посетителя. Они отображаются мгновенно и ничего не весят — разумный выбор, когда скорость важнее фирменного начертания.
Почему на телефоне шрифт выглядит иначе?
Если подключённый шрифт не успел загрузиться, браузер показывает запасной. Лечится сокращением числа начертаний и правильным порядком загрузки.