Шрифты для сайта: как выбрать, какой размер и где взять
Шрифт читают на каждой странице и в каждой кнопке, поэтому неудачный выбор заметен сразу: текст мелкий, буквы «пляшут», русские слова подменяются системным шрифтом. Разбираю, как выбрать шрифт для сайта, какой ставить размер и как подключить шрифты так, чтобы сайт не тормозил.
- Сайту хватает одного шрифта в 2–3 начертаниях, максимум — двух шрифтов.
- Основной текст — 16–18 пикселей на компьютере и не меньше 16 на телефоне.
- Шрифт обязан поддерживать кириллицу и иметь лицензию для сайта.
- Шрифты лучше хранить на своём хостинге: сайт быстрее, а данные посетителей не уходят сторонним сервисам.
Сколько шрифтов нужно
Чаще всего — один. Хороший шрифт с несколькими начертаниями (обычное, среднее, жирное) закрывает и заголовки, и текст, и кнопки. Иерархию задают размер и жирность, а не смена шрифта. Второй шрифт добавляют, когда он несёт характер бренда — например, для крупных заголовков, — а третий почти всегда лишний.
- Страница выглядит собранной из разных сайтов
- Каждый шрифт — отдельная загрузка
- Сложно держать единый стиль
- Иерархия — размером и жирностью
- Меньше файлов — быстрее загрузка
- Спокойный, цельный вид
Как выбрать шрифт: 5 критериев
- Кириллица. Многие красивые шрифты нарисованы только для латиницы — русский текст подменится системным шрифтом.
- Читаемость на экране. Для текста подходят шрифты без засечек (гротески) с открытыми формами букв; декоративные — только для крупных заголовков.
- Набор начертаний. Минимум обычное и жирное, лучше ещё среднее.
- Цифры и знаки. Проверьте ₽, №, кавычки-«ёлочки», тире — на сайте компании они встречаются постоянно.
- Лицензия. Шрифт должен быть разрешён для использования на сайте.
Шрифт — осознанный выбор под характер бренда, а не «первый попавшийся». Строгий гротеск подходит производству и B2B, мягкий округлый — детским и семейным товарам, шрифт с засечками в заголовках — юристам и премиальным услугам.
Размер шрифта для сайта
| Элемент | Компьютер | Телефон |
|---|---|---|
| Основной текст | 16–18 px | 16–17 px |
| Подписи, мелкий текст | 13–14 px | 13–14 px |
| Заголовок блока (H2) | 32–48 px | 24–30 px |
| Главный заголовок (H1) | 44–72 px | 30–40 px |
| Кнопки | 15–17 px | 15–16 px |
Кроме размера важны межстрочный интервал (для текста — примерно 1,4–1,6 от размера шрифта) и длина строки: удобно читать 60–75 знаков в строке. Если абзац растянут на всю ширину большого монитора, глаз теряет начало следующей строки.
Где взять шрифты
- Бесплатные шрифты с открытой лицензией (OFL) — их можно скачать и использовать на сайте, в том числе коммерческом. Среди них много качественных гротесков с кириллицей.
- Платные шрифты — покупают у шрифтовых студий, отдельно смотрят веб-лицензию (иногда она зависит от посещаемости).
- Шрифты конструктора — в Тильде есть своя библиотека шрифтов с кириллицей и возможность загрузить свой.
Не берите шрифты с сайтов «скачать бесплатно все шрифты»: часто это нелицензионные копии, и использовать их в бизнесе рискованно.
Как подключить и не замедлить сайт
Шрифт — это файлы, которые браузер скачивает до того, как покажет текст в нужном виде. Чтобы это не тормозило загрузку:
- используйте формат WOFF2 — он самый лёгкий;
- подключайте только нужные начертания и наборы символов (кириллица и латиница), а не все сразу;
- храните файлы на своём хостинге. Шрифты с серверов зарубежных сервисов добавляют лишнее подключение, а заодно передают этим сервисам IP-адреса посетителей — для сайтов в России это лишний вопрос по 152-ФЗ;
- включите показ текста системным шрифтом, пока грузится основной, чтобы страница не была пустой.
Как ещё ускорить сайт — в статье «Скорость загрузки сайта».
Частые вопросы
Какой размер шрифта для основного текста на сайте?
На компьютере — 16–18 пикселей, на телефоне — не меньше 16. Мелкий текст заставляет приближать страницу, а поля ввода с шрифтом меньше 16 пикселей на iPhone ещё и увеличивают страницу при нажатии.
Какой шрифт выбрать для сайта на русском?
Шрифт с полноценной кириллицей и несколькими начертаниями: обычным, средним и жирным. Для сайта компании обычно выбирают спокойный гротеск (шрифт без засечек) — он хорошо читается на экранах.
Можно ли использовать любой красивый шрифт?
Только если лицензия разрешает использование на сайте. Бесплатные шрифты с открытой лицензией (например, OFL) можно использовать в коммерческих проектах; платные покупают с веб-лицензией.
Почему шрифт на сайте отображается по-другому?
Скорее всего, шрифт не загрузился или в нём нет нужных символов — тогда браузер подставляет системный. Проверьте, что файл шрифта лежит на сервере, подключён правильно и содержит кириллицу.
