Около 90% того, что посетитель видит на сайте, — это текст: заголовки, описания услуг, цены, подписи к кнопкам, характеристики товаров. Поэтому типографика — не украшение, а основа интерфейса. Хорошо подобранные шрифты и интервалы незаметны: человек просто читает и понимает. Плохие — утомляют, путают и заставляют закрыть вкладку. Расскажем, из каких решений складывается типографика сайта и как их принимать осознанно.
Выбор шрифта: на что смотреть в первую очередь
Выбор шрифта для русскоязычного сайта начинается не с эстетики, а с кириллицы. Многие эффектные латинские гарнитуры либо вовсе не имеют русских букв, либо имеют их в урезанном и плохо прорисованном виде: буквы «ж», «ф», «д» выглядят чужеродно, а кернинг между ними не настроен. Перед тем как влюбиться в шрифт, наберите им абзац на русском — с цифрами, знаком рубля, кавычками-ёлочками и длинным тире.
Второй критерий — набор начертаний. Для сайта обычно нужны минимум три: обычное для основного текста, полужирное для заголовков и акцентов, курсив или средний вес для подписей. Если у шрифта есть только одно-два начертания, браузер будет «дорисовывать» жирный и курсив программно, и это всегда выглядит хуже. Третий критерий — лицензия. Бесплатные шрифты с открытой лицензией можно использовать без ограничений, у коммерческих важно проверить, разрешено ли встраивание на сайт и нет ли лимита на число просмотров.
Сколько шрифтов нужно
Почти всегда достаточно одного-двух. Классическая схема: одна гарнитура для заголовков с характером и одна нейтральная для основного текста. Или одна универсальная гарнитура с широким набором начертаний на всё. Три и больше шрифтов превращают страницу в лоскутное одеяло и замедляют загрузку. Исключение — моноширинный шрифт для артикулов, кодов или технических данных, если их на сайте много.
Гротески, антиквы и шрифты с характером
Гарнитуры условно делят на группы, и у каждой есть своя область применения. Это не жёсткие правила, а отправная точка для выбора.
Гротески (без засечек)
Нейтральные, хорошо читаются на экранах любой плотности, подходят для интерфейсов, каталогов, таблиц. Основной выбор для большинства коммерческих сайтов: интернет-магазинов, сервисов, корпоративных сайтов производственных компаний. Минус — легко получить безликий сайт, похожий на сотни других.
Антиквы (с засечками)
Ассоциируются с традицией, солидностью, редакционными изданиями. Хорошо работают в заголовках юридических и консалтинговых фирм, в блогах и журналах, на сайтах ресторанов и гостиниц. В мелком размере на экранах с низкой плотностью засечки могут «замыливаться», поэтому для интерфейсных элементов их используют осторожно.
Акцидентные шрифты — декоративные, рукописные, стилизованные — подходят только для крупных заголовков и логотипа, и то в небольших дозах. Абзац, набранный рукописным шрифтом, никто не дочитает. Если бренд требует выразительности, лучше вложить её в один крупный заголовок на первом экране, а остальное набрать спокойной гарнитурой.
Размеры и иерархия
Размер основного текста на сайте — не меньше 16 пикселей, а для длинных статей и сайтов с аудиторией старшего возраста лучше 17–18. Мелкий текст в 12–13 пикселей, который ещё встречается на старых сайтах, заставляет людей придвигаться к экрану и увеличивать масштаб. На телефоне размер основного текста не уменьшают: экран ближе к глазам, но и меньше по физическим размерам.
Иерархия заголовков строится на модульной шкале — каждый следующий уровень больше предыдущего в одно и то же число раз. Это даёт гармоничные пропорции без подбора на глаз. Например, при коэффициенте 1,25 и базовом размере 16 пикселей получается такая шкала:
| Элемент | Десктоп | Смартфон | Начертание |
|---|---|---|---|
| H1 — заголовок страницы | 40–48 px | 28–32 px | Полужирное |
| H2 — раздел | 30–32 px | 24 px | Полужирное |
| H3 — подраздел | 22–24 px | 20 px | Полужирное или среднее |
| Лид-абзац | 20 px | 18 px | Обычное |
| Основной текст | 16–18 px | 16 px | Обычное |
| Подписи, сноски | 13–14 px | 13–14 px | Обычное, приглушённый цвет |
На мобильных шкалу сжимают: заголовок в 48 пикселей на экране шириной 360 пикселей поместит в строку два-три слова и займёт пол-экрана. Иерархия при этом сохраняется за счёт разницы в начертании и отступах. Важно, чтобы соседние уровни заметно отличались друг от друга: если H2 и H3 различаются на два пикселя, читатель не почувствует структуру.
Иерархию создаёт не только размер. Вес, цвет, регистр и отступы работают не хуже. Подпись под ценой, набранная тем же размером, но серым цветом, воспринимается как вторичная. Небольшой заголовок капителью с разрядкой отделяет блок не хуже крупного. Чем больше инструментов, тем меньше нужно раздувать размеры.
Интерлиньяж, длина строки и отступы
Интерлиньяж — расстояние между строками. Для основного текста оптимум лежит в диапазоне 1,4–1,6 от размера шрифта: при 16 пикселях это 22–26 пикселей. Меньше — строки слипаются, глаз перескакивает на соседнюю. Больше — текст рассыпается на отдельные полоски. У заголовков интерлиньяж, наоборот, уменьшают до 1,1–1,25: крупные строки с большими промежутками выглядят разорванными.
Длина строки — второй параметр, который сильно влияет на удобство. Комфортная строка вмещает 55–75 знаков с пробелами. Если строка длиннее, глазу трудно найти начало следующей; если короче, текст дробится, и чтение превращается в постоянные переносы взгляда. На широком мониторе это значит, что текстовая колонка статьи должна быть ограничена примерно 680–760 пикселями, даже если вокруг остаётся пустое пространство.
Простой тест: распечатайте абзац с сайта или откройте его в полноэкранном режиме и попробуйте прочитать вслух. Если вы теряете строку при переходе или ловите себя на том, что щуритесь, — дело в интерлиньяже, длине строки или размере, а не в тексте.
Отступы между абзацами и вокруг заголовков задают ритм. Правило близости: заголовок должен стоять ближе к тексту, который он открывает, чем к предыдущему блоку. Если отступы сверху и снизу у H2 одинаковые, непонятно, к чему он относится. Хорошая практика — отступ над заголовком в полтора-два раза больше, чем под ним.
Мелочи, которые выдают профессиональный набор
Типографическая культура видна в деталях, которые посетитель не осознаёт, но чувствует. Вот на что мы обращаем внимание при вёрстке и подготовке текстов:
- Кавычки-ёлочки «» в русском тексте вместо прямых "" и «лапок» в латинском стиле
- Длинное тире — в предложениях, короткое – в диапазонах, дефис - только внутри слов
- Неразрывный пробел между числом и единицей: «25 000 ₽», «16 px», «3 дня»
- Разделение тысяч пробелом, а не точкой или запятой
- Предлоги и союзы не висят в конце строки
- Выключка по левому краю: выравнивание по ширине на сайте создаёт «реки» пробелов
- Никаких подчёркиваний для выделения — подчёркнутый текст воспринимается как ссылка
- Заглавные буквы только для коротких надписей, не для абзацев
Часть этих правил можно автоматизировать: типографы расставляют неразрывные пробелы и правильные кавычки при сохранении текста в админке. Мы подключаем такой обработчик на большинстве проектов, чтобы контент-менеджеру не нужно было думать о типографике при каждом обновлении.
Шрифты и скорость загрузки
Веб-шрифты — это файлы, которые браузер скачивает перед тем, как показать текст. Одно начертание весит 20–100 килобайт, и если подключить гарнитуру с шестью начертаниями и полным набором символов для всех языков, получится полмегабайта только на шрифты. На медленном мобильном интернете это заметно.
Что помогает. Подключать только реально используемые начертания. Оставлять в файлах только нужные наборы символов — кириллицу и латиницу, без греческого и вьетнамского. Использовать современный сжатый формат шрифтов. Хранить шрифты на своём сервере, а не подгружать со сторонних. Настроить показ текста системным шрифтом, пока загружается фирменный, чтобы посетитель не смотрел на пустую страницу. Вариативные шрифты, где все начертания упакованы в один файл, тоже экономят трафик, если вам нужно больше трёх весов.
Побочный эффект подмены шрифта — сдвиг вёрстки: когда загружается фирменная гарнитура с другой шириной букв, текст перестраивается и блоки прыгают. Это раздражает и учитывается поисковыми системами в метриках качества страницы. Решение — подобрать резервный системный шрифт с близкими пропорциями и настроить метрики так, чтобы замена проходила незаметно. Больше о том, как скорость влияет на продажи, — в статье про скорость загрузки магазина.
Как проверить типографику своего сайта
Чтобы оценить текущий сайт, не нужен дизайнер — достаточно получаса и честного взгляда. Откройте самую длинную страницу на телефоне и прочитайте её целиком. Откройте её же на большом мониторе. Ответьте себе на вопросы: понятно ли с первого взгляда, где главный заголовок, а где второстепенные? Не приходится ли увеличивать текст? Не слишком ли длинные строки на мониторе? Видны ли различия между ссылками и обычным текстом? Не используется ли больше двух-трёх шрифтов?
Если хотя бы на два вопроса ответ неудачный, типографику стоит пересмотреть. Иногда хватает правки нескольких параметров в стилях — размера, интерлиньяжа, ширины колонки, — и сайт заметно меняется без полного редизайна. Если же проблема глубже, например шрифт плохо поддерживает кириллицу или стили разъехались по десятку шаблонов, разумнее заняться этим в рамках обновления дизайна. С палитрой работают похожим образом — об этом мы писали в материале про цвет в веб-дизайне.
Резюме
Типографика сайта складывается из нескольких решений: шрифт с качественной кириллицей и нужными начертаниями, основной текст от 16 пикселей, интерлиньяж 1,4–1,6, строка в 55–75 знаков и понятная иерархия заголовков, построенная на шкале, а не на глаз. К этому добавляются аккуратные детали набора — ёлочки, тире, неразрывные пробелы — и бережное отношение к скорости: только нужные начертания и наборы символов. Когда всё это настроено, посетитель не замечает типографику вовсе, он просто читает и быстрее находит то, ради чего пришёл.
Нужен сайт или интернет-магазин?
Обсудим задачу, подскажем подходящую платформу и оценим сроки и бюджет — бесплатно и без обязательств.
Обсудить проект
