Как выбрать шрифт для сайта

Шрифт сильнее всего влияет на то, как сайт читается и каким кажется. Семь правил, которые спасают от большинства ошибок.

1. Проверьте, что есть кириллица

Многие красивые шрифты содержат только латиницу: русский текст тогда покажется запасным системным шрифтом, и вся задумка развалится. Ищите шрифты в разделах с пометкой «с кириллицей», например на 7fonts.ru, и проверяйте все буквы, включая «ё», «й» и «ъ».

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

2. Двух шрифтов хватит

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

3. Текст читают, заголовки разглядывают

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

Пара шрифтов: заголовок PT Serif Bold и текст Inter на карточке кофейни
Пара шрифтов: заголовок PT Serif Bold и текст Inter на карточке кофейни

4. Размер текста не меньше 16 пикселей

На телефоне мелкий текст заставляет увеличивать страницу, а поисковики считают такую страницу неудобной. Межстрочный интервал 1,5–1,7 от размера шрифта.

5. Меньше файлов, быстрее сайт

Каждое начертание (обычный, жирный, курсив) это отдельный файл. Подключайте только то, что используете, в формате WOFF2, и только кириллицу с латиницей. Так страница откроется быстрее, а это важно и для посетителей, и для поиска.

6. Читайте лицензию

«Бесплатный» не всегда значит «для коммерции». Шрифты под лицензией OFL (Open Font License) можно использовать на сайтах, в логотипах и рекламе. У остальных смотрите файл лицензии в архиве.

7. Посмотрите на своём тексте

Шрифт на образце «Съешь же ещё этих мягких французских булок» и на вашем заголовке выглядит по-разному. На 7fonts.ru можно написать свой текст сразу шестьюдесятью шрифтами и сравнить.

Готовые подборки

В разделе «Шрифты» собраны подборки под задачу: для Word, Photoshop, открыток, свадебных приглашений и логотипов.

Частые вопросы

Сколько шрифтов использовать на сайте?

Двух достаточно: один для заголовков и один для текста. Третий шрифт почти всегда лишний.

Какой размер шрифта нужен для текста?

Не меньше 16 пикселей, межстрочный интервал 1,5–1,7.

Можно ли использовать бесплатный шрифт в коммерческих целях?

Шрифты под лицензией OFL можно использовать на сайтах, в логотипах и рекламе. У других шрифтов читайте файл лицензии.

Ещё статьи

Градиенты в CSS: как сделать и где использовать

Градиент оживляет плоский фон и делает кнопку заметнее. Разбираем три вида градиентов в CSS, готовый код и ошибки, из-за которых градиент выглядит грязно.

Контраст текста по WCAG простыми словами

Бледный текст красиво смотрится в макете и плохо читается на телефоне под солнцем. Стандарт WCAG даёт простые числа, по которым можно проверить любую пару цветов.

Цветовой круг и сочетания цветов

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

Цвета HEX, RGB и HSL: в чём разница

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

Психология цвета: какой цвет выбрать для бизнеса

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

Как сделать тёмную тему для сайта

Тёмную тему просят всё чаще: вечером она меньше слепит. Но если просто поменять белый на чёрный, получится резко и некрасиво. Вот как сделать аккуратно.