Типографика на сайте: шрифты, размеры, интервалы

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

Почему типографика влияет на продажи

Типографика — это не украшательство. Она отвечает за три вещи: читаемость, иерархию и характер. Читаемость позволяет без усилий воспринимать текст. Иерархия показывает, что главное, а что второстепенное. Характер создаёт ощущение бренда: строгая компания и детский магазин не могут говорить одним шрифтом.

Когда типографика выстроена верно, посетитель этого не замечает: он просто быстро находит нужное и без усталости читает описание. Когда она плохая, возникает ощущение «что-то не так», хотя объяснить причину сложно. Человек чувствует неряшливость и переносит это ощущение на компанию и продукт. Поэтому вложения во внимательную работу с текстом окупаются через доверие и поведенческие показатели.

Выбор шрифта

Гротески, антиква и всё остальное

Шрифты делятся на несколько больших семейств. Гротески, или шрифты без засечек, считаются основным выбором для интерфейсов: они чисто выглядят на экране, нейтральны и хорошо читаются при небольших размерах. Антиква, шрифты с засечками, придаёт тексту солидность и традиционность, её часто используют в изданиях, юридических и премиальных проектах. Рукописные и декоративные шрифты уместны точечно, например для короткого акцента, но не для основного текста.

Поддержка кириллицы

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

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

Сколько шрифтов использовать

Классическое правило: не больше двух. Один для заголовков и один для основного текста, либо вообще одно семейство с разной толщиной и размером. Третий шрифт почти всегда лишний и создаёт ощущение хаоса. Чем больше начертаний подключено, тем тяжелее страница: каждый файл шрифта — это дополнительная загрузка, которая может задержать отображение текста.

Размеры и пропорции

Основной текст

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

Заголовки и шкала размеров

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

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

• Заголовок страницы — самый крупный, один на страницу.
• Заголовки разделов — заметно меньше, но явно крупнее основного текста.
• Подзаголовки — близки к основному размеру, но выделены жирностью.
• Основной текст — базовый размер, на котором строится вся шкала.
• Мелкий текст — подписи, примечания, юридические сноски, но не менее двенадцати-четырнадцати пикселей.

Адаптация под экраны

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

Интервалы: воздух решает всё

Межстрочный интервал

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

Длина строки

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

Отступы между абзацами и блоками

Расстояние между абзацами должно быть заметно, но меньше, чем между разделами. Это базовый принцип группировки: близкие по смыслу элементы расположены ближе друг к другу. Заголовок должен находиться ближе к тексту, которому он принадлежит, чем к предыдущему блоку. Нарушение этого правила — одна из самых частых ошибок: заголовок висит ровно посередине между двумя абзацами, и непонятно, к какому из них он относится.

Выравнивание

Для основного текста лучше всего подходит выравнивание по левому краю. Выключка по ширине на сайтах создаёт неравномерные пробелы и «реки» белого, особенно на узких экранах. Центрирование уместно для коротких заголовков и подписей, но не для абзацев из нескольких строк: глаз каждый раз ищет новое начало.

Контраст и цвет текста

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

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

Не передавайте смысл только цветом. Ссылки в тексте нужно отличать не просто оттенком, но и подчёркиванием или иным признаком: часть людей плохо различает цвета, а на чёрно-белом экране оттенок исчезает.

Технические детали, которые улучшают результат

• Используйте формат шрифтов для веба с хорошим сжатием и подключайте только нужные начертания.
• Задайте запасные шрифты на случай, если основной не загрузился, и подберите их похожими по пропорциям.
• Настройте поведение при загрузке, чтобы текст показывался сразу запасным шрифтом, а не оставался невидимым.
• Следите за переносами и висячими предлогами: однобуквенные предлоги в конце строки выглядят небрежно.
• Применяйте правильные типографские знаки: кавычки-ёлочки, длинное тире, неразрывный пробел перед тире и после предлогов.
• Проверяйте цифры: в таблицах и ценах важны моноширинные цифры, которые выстраиваются в ровные колонки.
• Тестируйте на телефоне, планшете и большом мониторе, а также при увеличенном системном размере шрифта.

Как собрать типографическую систему за несколько шагов

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

Всё выделено жирным

Когда выделен каждый второй абзац, выделение перестаёт работать. Жирность должна указывать на действительно важное: ключевые фразы, предупреждения. Остальное лучше расставить через иерархию заголовков.

Заглавные буквы в длинных фразах

Набор целиком прописными буквами читается медленнее, потому что теряется силуэт слов. Допустимо для коротких меток и подписей кнопок, но не для предложений.

Слишком много стилей

Пять размеров, три цвета и четыре начертания на одном экране выглядят как беспорядок. Количество вариантов нужно ограничивать и возвращаться к одним и тем же значениям.

Текст в картинках

Если важная информация вставлена в изображение, она не масштабируется, не читается программами экранного доступа и не индексируется поисковыми системами. Используйте живой текст везде, где это возможно.

Итоги

Типографика — один из самых недооценённых инструментов дизайна. Читаемый размер, продуманные интервалы, ограниченный набор шрифтов и хороший контраст делают сайт удобным, а бренд — солидным. Зафиксируйте правила в единой системе, проверьте их на реальных устройствах и не стесняйтесь увеличивать размер и воздух. Если вам нужна помощь с оформлением сайта, расскажем о подходе на странице дизайн сайтов.