Как выбрать шрифт для сайта: практический гид

Шрифт — это не украшение, а инженерное решение с понятными критериями. Для 90% сайтов хватает одного-двух шрифтов: текстовый — нейтральный и читаемый от 16px, заголовочный — с характером. Главная проверка для рунета — кириллица: половина красивых латинских шрифтов её просто не умеют. Ниже — как выбрать пару, не сломать читаемость и не утяжелить страницу.

Откройте десять любых сайтов подряд. На девяти из них шрифт вы не заметите — и это лучший комплимент типографике. А на десятом текст почему-то хочется закрыть через три секунды: буквы лезут друг на друга, заголовок набран чем-то «дизайнерским», а на телефоне половина букв вообще другая. Разница между этими сайтами почти никогда не во вкусе. Она в нескольких простых, проверяемых решениях.

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

Дальше — практический разбор на сквозном примере. Марина открывает кондитерскую «Сахарная пудра» в Казани и делает сайт. Будем по шагам решать, какой шрифт ей подойдёт — и заодно разберём правила, которые работают для любого проекта.

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

Короткий ответ: один или два. Это не ограничение бюджета, а правило хорошего тона.

• Один шрифт — если он «богатый», то есть имеет много начертаний (light, regular, medium, bold, black). Разными весами вы строите всю иерархию: жирным — заголовки, обычным — текст, светлым — подписи. Этого хватает большинству сайтов.
• Два шрифта — когда нужен контраст: выразительный заголовочный плюс спокойный текстовый. Классика — характерный шрифт для крупного и нейтральный для мелкого.
• Три и больше — почти всегда ошибка. Это визуальный шум, потеря узнаваемости и лишний вес страницы.

Марине хочется «уюта и характера». Решаем так: заголовки — тёплым шрифтом с лёгкой индивидуальностью, текст — нейтральным и максимально читаемым. Два шрифта, не больше.

Текстовый шрифт: главное — читаемость

Текст человек читает абзацами, а не любуется им. Поэтому к телесному (body) шрифту требование одно — читаемость. На что смотреть:

• Открытые апертуры. Апертура — это «просвет» в букве. У букв «с», «е», «о» он должен быть широким и открытым. Закрытые, скрученные формы на мелком кегле сливаются в кашу.
• Высота x. Это высота строчных букв (например «х») относительно прописных. Чем она больше, тем крупнее и спокойнее читается текст в маленьком размере.
• Интерлиньяж. Расстояние между строками. Слишком тесные строки давят, слишком разреженные — рассыпаются. Для текста рабочий диапазон 1.5–1.7.
• Минимум декора. Засечки-завитушки, рукописность, экстра-контраст штрихов — всё это мешает читать длинный текст. Для body берут спокойный гротеск (sans-serif).

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

Заголовочный шрифт: здесь можно характер

В заголовках выразительность уместна — их мало и они крупные. Но есть ловушка: декоративный шрифт, который красиво смотрится в 64px на десктопе, может развалиться в 24px на телефоне. Тонкие штрихи исчезают, экстравагантные буквы перестают читаться.

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

Марине подойдёт тёплый округлый гротеск средней выразительности — характер есть, но мобильный его не убивает. От рукописных «кондитерских» шрифтов отговариваем: на телефоне название кафе превратится в нечитаемый вензель.

Кириллица: проверяйте до того, как влюбитесь

Это пункт, на котором спотыкается почти каждый, кто берёт шрифт «с красивого зарубежного сайта». Большая часть эффектных латинских шрифтов не содержит кириллицы. На английском всё идеально, а на русском браузер молча подставляет системный шрифт — и аккуратная типографика разваливается на глазах.

Как проверить за минуту:

1. В превью шрифта (в Google Fonts или на сайте автора) наберите русскую фразу, а не «Sample text».
2. Возьмите «сложные» буквы: д, ж, з, к, л, ф, щ, ъ, ы, я. Именно их часто рисуют криво или не рисуют вовсе.
3. Сравните, выглядят ли русские буквы органично рядом с латинскими, или они «из другого шрифта».

Если кириллицы нет или она кривая — шрифт не ваш, каким бы красивым он ни был. Для Марины это критично: половина меню — на русском.

Шрифт → кириллица → где уместен

Чтобы не гадать, вот опорная таблица по проверенным бесплатным шрифтам с хорошей кириллицей. Все доступны в Google Fonts и пригодны для self-host.

Источник: Google Fonts — карточки шрифтов и поддержка наборов символов (fonts.google.com).

Рабочие пары, которые не подведут

Если решили брать два шрифта — берите пары, которые уже проверены тысячами сайтов. Несколько надёжных вариантов «характер пары → кому подходит»:

Марина останавливается на паре Onest + Onest: заголовки — Onest Bold, текст — Onest Regular, подписи — Onest Light. Один шрифт, три веса, тёплый характер и честная кириллица. Дёшево по весу, дорого по ощущению.

Размеры и иерархия: цифры, которые работают

Даже идеальный шрифт убивается неправильными размерами. Базовые ориентиры:

• Основной текст — минимум 16px, на телефоне тоже. Меньше — и мобильные браузеры начнут предлагать зум при тапе на поля, а глаза посетителя устанут.
• h1 — 32–48px на десктопе и 24–32px на телефоне.
• Между уровнями держите заметный шаг: h1 → h2 → h3 → текст должны явно отличаться по размеру и весу, иначе иерархия не читается.
• Интерлиньяж: 1.5–1.7 для текста, 1.1–1.3 для заголовков (крупным буквам тесные строки идут на пользу).
• Длина строки — 50–75 символов. Слишком широкие строки трудно читать: глаз теряет начало следующей.

Производительность: шрифт не бесплатен

Каждый шрифт — это файл, который браузер должен скачать до того, как покажет текст. Простая арифметика: 2 шрифта × 2 начертания × (латиница + кириллица) = до 8 файлов. Если не следить, страница «моргает» пустым местом или подгружает мегабайты ради одной красивой буквы. Что делать:

• Берите только нужные начертания. Не подключайте все 9 весов, если используете три.
• Подключайте подмножества (subsets). Нужны латиница и кириллица — не тащите греческий, вьетнамский и иврит.
• Ставьте font-display: swap (или optional). Тогда текст показывается сразу системным шрифтом и заменяется на ваш, когда тот загрузится, — без «белой дыры» на пол-секунды.
• Делайте self-host. Положите файлы шрифта на свой сервер вместо подключения с серверов Google: быстрее, надёжнее и без передачи данных посетителей третьей стороне (что важно и для 152-ФЗ).
• Современный формат — woff2. Он сжат сильнее старых форматов; для веба этого достаточно.

Частые ошибки

• Влюбились в латинский шрифт без кириллицы — и сайт на русском поехал. Проверка кириллицы — первый шаг, а не последний.
• Пять «тематических» шрифтов «чтобы было нескучно». Получается ярмарка, а не бренд.
• Текст мельче 16px ради «воздуха». Воздух создают отступы и интерлиньяж, а не нечитаемый кегль.
• Декоративный заголовок, который рассыпается на телефоне. Всегда проверяйте мобильный размер.
• Подключили весь Google Fonts с десятком весов — и убили скорость загрузки.
• Серый текст на сером фоне. Шрифт ни при чём — но контраст важнее любой типографики.

Где брать хорошие шрифты

Не обязательно платить. Надёжные бесплатные источники:

• Google Fonts — самый большой каталог, удобное превью, можно сразу проверить кириллицу и скачать для self-host.
• Авторские страницы шрифтов с открытой лицензией (OFL) — у Onest, Golos и многих российских шрифтов есть свои сайты с полным набором начертаний.
• Под русский язык безопасный стартовый набор: Inter, Onest, Golos Text, Manrope, PT Sans. С любым из них вы не ошибётесь.

Итог простой: сайт с одним шрифтом в трёх начертаниях почти всегда выглядит профессиональнее, чем с пятью «дизайнерскими». Ограничение здесь — не бедность, а дисциплина. Если хочется, чтобы шрифт работал на бизнес, а не просто «был» — мы в Tendo подбираем и настраиваем типографику в составе сайта под ключ, с проверкой кириллицы, скорости и мобильных. Прислать макет или обсудить можно через форму на сайте или бот @tendoprotech_bot.

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