Посетитель не замечает хорошую типографику, но сразу чувствует плохую: текст утомляет, заголовки теряются, таблицы расползаются. Собрали практические правила по шрифтам, кеглям и интерлиньяжу для коммерческого сайта.
Почему типографика — это про деньги, а не про вкус
На B2B-сайте текст выполняет основную работу. Характеристики продукции, условия поставки, описание услуг, кейсы — всё это нужно прочитать и понять, чтобы принять решение. Если читать неудобно, человек не вчитывается, а пробегает глазами, пропускает важное и уходит к конкуренту с более понятным сайтом. Типографика определяет, сколько усилий требует чтение.
Хорошая новость: чтобы сделать типографику достойной, не нужно быть арт-директором. Большая часть решений подчиняется понятным правилам, и отступать от них имеет смысл только осознанно. Ниже — те правила, которыми пользуемся мы при проектировании корпоративных сайтов и каталогов.
Выбор шрифта: меньше, чем кажется
Самая частая ошибка — слишком много шрифтов. На одном сайте мы насчитали шесть гарнитур: одна в логотипе, вторая в меню, третья в заголовках, четвёртая в тексте, пятая в кнопках и шестая в подвале. Результат выглядел как собранный из разных сайтов. Для большинства проектов достаточно одной гарнитуры с хорошим набором начертаний, максимум двух — акцидентной для заголовков и текстовой для основного набора.
На что смотреть при выборе
- Полная поддержка кириллицы, включая «ё», кавычки-ёлочки, длинное тире, знак рубля и символы вроде «№» и «°».
- Набор начертаний: как минимум обычное, полужирное и курсив, лучше — 4–6 весов для гибкой иерархии.
- Табличные цифры одинаковой ширины: без них столбцы цен и характеристик выглядят неровно.
- Читаемость на малых размерах: хорошо различимые «1», «l» и «I», «0» и «О», открытые формы букв.
- Лицензия, разрешающая использование на сайте, с понятными условиями по количеству просмотров.
- Вес файлов: каждое начертание — это отдельная загрузка, и шесть начертаний по 80 КБ заметно замедляют первый показ страницы.
Системные шрифты как вариант
Для интерфейсов с большим количеством данных — личных кабинетов, B2B-порталов, таблиц — хорошо работают системные шрифты операционной системы. Они не требуют загрузки, отлично отрисовываются на экране и привычны пользователю. Фирменный шрифт в таком случае можно оставить для заголовков и маркетинговых страниц.
Размеры: базовый кегль и шкала
Размер основного текста на современных сайтах — 16–18 пикселей на десктопе и 16 на мобильных. Меньше 16 пикселей для основного текста мы не используем: такой текст приходится читать, приближая лицо к экрану, особенно людям старше 45 лет, которых в B2B-аудитории много. Для подписей, сносок и вспомогательной информации допустимы 13–14 пикселей, но не для того, что важно прочитать.
Размеры заголовков удобно строить по модульной шкале — когда каждый следующий уровень больше предыдущего в определённое число раз. Для корпоративных сайтов хорошо работает коэффициент 1,2–1,25: иерархия заметна, но заголовки не кричат. Для промо-страниц с крупной подачей можно взять 1,33–1,5.
| Элемент | Десктоп, px | Мобильные, px | Интерлиньяж |
|---|---|---|---|
| Заголовок страницы | 40–48 | 28–32 | 1,1–1,2 |
| Заголовок раздела | 28–32 | 22–24 | 1,2–1,25 |
| Подзаголовок | 20–24 | 18–20 | 1,3 |
| Основной текст | 17–18 | 16 | 1,5–1,6 |
| Подписи, примечания | 14 | 13–14 | 1,4 |
Это ориентир для сайта с классической структурой, а не догма. Важнее, чтобы шкала была последовательной: если на одной странице подзаголовок 22 пикселя, а на другой — 21, пользователь это почувствует, даже не отдавая себе отчёта.
Интерлиньяж, длина строки и воздух
Интерлиньяж — расстояние между строками. Для основного текста оптимально 1,5–1,6 от кегля: при 17 пикселях это около 26 пикселей. Меньшее значение делает текст плотным и тяжёлым, большее — разваливает абзацы на отдельные строки. Заголовкам, наоборот, нужен интерлиньяж плотнее — 1,1–1,25, иначе двухстрочный заголовок распадается на две фразы.
Длина строки влияет на комфорт чтения не меньше размера. Оптимум — 60–75 символов для русского текста. Слишком длинные строки на широком мониторе заставляют глаз долго искать начало следующей строки, слишком короткие дробят фразы. Поэтому текстовые блоки ограничивают по ширине — обычно 680–760 пикселей, даже если экран позволяет больше.
Отступы между элементами строят иерархию не хуже размеров. Отступ перед заголовком должен быть заметно больше, чем после него, — так заголовок визуально принадлежит своему разделу. Типичное соотношение — 2:1 или 3:1. Расстояние между абзацами — примерно 0,75–1 высоты строки.
Совет студии: проверьте текстовую страницу, распечатав её скриншот и отойдя на два шага. Если на расстоянии не видно структуры — где заголовки, где абзацы, где списки, — иерархия недостаточно контрастна.
Типографика данных: таблицы, цифры, характеристики
На сайтах производителей и дистрибьюторов значительная часть контента — это данные: таблицы характеристик, прайсы, сравнения. У них свои правила.
- Числа в столбцах выравниваются по правому краю или по десятичному разделителю, текст — по левому.
- Используйте табличные цифры, чтобы разряды стояли друг под другом.
- Единицы измерения выносите в заголовок столбца, а не повторяйте в каждой ячейке.
- Разделяйте разряды тонкой шпацией: 1 250 000 читается легче, чем 1250000.
- Для таблиц шире экрана на мобильных предусмотрите горизонтальную прокрутку с закреплённым первым столбцом или перестройку в карточки.
- Лёгкая заливка чередующихся строк помогает не терять строку в широкой таблице, но не стоит делать её контрастной.
Мелочи, по которым видно качество
Есть детали, которые отличают аккуратный сайт от сделанного наспех. Они почти не влияют на сроки, но их отсутствие считывается как небрежность:
- кавычки-ёлочки вместо прямых машинописных;
- длинное тире между частями предложения и короткое — в диапазонах чисел;
- неразрывные пробелы после коротких предлогов и союзов, между числом и единицей измерения, в инициалах;
- отсутствие висячих коротких слов в конце строк заголовков;
- никакого текста, набранного целиком заглавными буквами, длиннее двух-трёх слов;
- подчёркивание только у ссылок, а не для выделения.
Многие из этих правил можно автоматизировать: типограф в CMS расставляет кавычки, тире и неразрывные пробелы при сохранении текста. Мы подключаем такой обработчик на большинстве проектов, чтобы редакторам клиента не приходилось об этом думать. Подробнее о том, как мы подходим к визуальной части проектов, — на странице дизайна сайтов.
Типографика на мобильных: отдельная задача
Больше половины посетителей многих B2B-сайтов сегодня приходят с телефонов — чаще всего это менеджеры и снабженцы, которые открывают ссылку из письма или мессенджера между встречами. Просто уменьшить десктопную типографику пропорционально не получится: заголовок в 48 пикселей на узком экране займёт пять строк, а текст в 14 пикселей станет нечитаемым.
Поэтому для мобильных мы задаём отдельную шкалу с меньшим коэффициентом — около 1,15–1,2, — оставляя основной текст на уровне 16 пикселей. Заголовки сокращаются сильнее, чем текст, и это правильно: на маленьком экране иерархию лучше поддерживать весом и отступами, а не огромной разницей в размерах. Отдельно проверяем длинные слова, которые часто встречаются в отраслевых текстах: «теплоизоляционный», «электромонтажный», «металлоконструкции». В заголовках на узком экране они могут не поместиться в строку, и нужно либо включить переносы, либо переформулировать заголовок.
Ещё один нюанс — кнопки и ссылки в тексте. Область нажатия должна быть не меньше 44 пикселей по высоте, а ссылки внутри абзацев — достаточно заметными, чтобы палец попадал в них с первого раза.
Чек-лист типографики для вашего сайта
- На сайте не больше двух гарнитур, у каждой есть полная кириллица и нужные начертания.
- Основной текст не меньше 16 пикселей на всех устройствах.
- Размеры заголовков построены по единой шкале и одинаковы на всех страницах.
- Интерлиньяж основного текста — 1,5–1,6, заголовков — 1,1–1,25.
- Ширина текстовых блоков ограничена, строка не длиннее 75 символов.
- Отступ перед заголовком больше, чем после него.
- В таблицах числа выровнены, используются табличные цифры, разряды разделены.
- Кавычки, тире и неразрывные пробелы расставлены автоматически.
- Шрифты подключены с учётом скорости: только нужные начертания, современный формат файлов.
Типографика — это фундамент, на котором держится весь визуальный стиль. Если он сделан аккуратно, сайт выглядит профессионально даже при сдержанном дизайне. Если нет — никакие иллюстрации и анимации этого не исправят.
