Текст — это основной способ, которым сайт общается с посетителем: заголовки, описания услуг, цены, условия доставки. Если шрифт неудобно читать, человек не станет вникать в смысл, каким бы полезным ни было содержание. Типографика — не украшение, а инструмент, от которого напрямую зависит, дочитает ли посетитель страницу до кнопки заявки.
Почему типографика влияет на восприятие сайта
Шрифт формирует характер сайта не менее сильно, чем цвет или фотографии. Строгий гротеск без засечек воспринимается современно и по-деловому, шрифт с засечками — солидно и традиционно, рукописный шрифт в заголовках — дружелюбно и не всегда уместно для бизнеса. Но есть и практическая сторона: удобство чтения напрямую влияет на то, сколько времени человек проведёт на странице и дойдёт ли он до сути предложения.
Плохая типографика — это когда текст технически «есть на странице», но читать его физически неудобно: слишком мелко, слишком плотно, слишком длинные строки. В таком случае даже отличный текст, написанный для страниц нового сайта, работает хуже, чем мог бы.
Сколько шрифтов нужно сайту
Частая ошибка — использовать три-четыре разных шрифта: один для заголовков, другой для текста, третий для кнопок, четвёртый «просто понравился». В итоге сайт выглядит нецельно, будто собран из разных источников. Для большинства сайтов достаточно одного-двух шрифтов:
- Один шрифт для заголовков и текста — но с разными начертаниями (обычное, полужирное) и размерами. Это самый безопасный и универсальный вариант.
- Два шрифта — один контрастный, выразительный для заголовков, другой простой и нейтральный для основного текста. Такой вариант требует более внимательного подбора, чтобы шрифты сочетались друг с другом.
Третий шрифт имеет смысл добавлять только для особых случаев — например, для цитат или логотипа, — и то не всегда.
Как выбрать шрифт для основного текста
Для текста, который читают абзацами — описания услуг, статьи блога, карточки товаров, — важнее не оригинальность шрифта, а его читаемость на экране. Хорошо проверенные для интерфейсов гротески без засечек — надёжный выбор, потому что они хорошо отрисовываются на любом экране, включая небольшие смартфоны, и не «слипаются» на мелких размерах.
Шрифты с засечками могут выглядеть стильно в заголовках или в крупных цитатах, но в качестве основного текста мелкого размера на экране они читаются хуже, чем в печати — засечки на низком разрешении экрана иногда «замыливаются».
На что смотреть при выборе шрифта
- Есть ли у шрифта кириллица и все нужные начертания (обычное, полужирное, курсив)
- Хорошо ли различаются похожие символы — например, заглавная «О» и ноль, строчная «л» и «п»
- Как шрифт выглядит именно на экране, а не только в статичном макете
- Есть ли лицензия на веб-использование, если шрифт не бесплатный
- Поддерживает ли шрифт достаточно широкий диапазон начертаний для заголовков разного уровня
Размер, интервал и длина строки
Даже удачно выбранный шрифт можно испортить неверными настройками. Три параметра определяют удобство чтения больше всего остального.
| Параметр | Рекомендация | Почему это важно |
|---|---|---|
| Размер основного текста | Не меньше 16 пикселей на десктопе и мобильных | Меньший размер вынуждает читателя напрягать зрение, особенно на смартфоне |
| Межстрочный интервал | Примерно в полтора раза больше размера шрифта | Слишком плотные строки сливаются друг с другом при чтении абзаца |
| Длина строки | Около 60–80 символов в строке | Слишком длинная строка заставляет глаз «теряться» при переходе к следующей |
| Контраст с фоном | Тёмный текст на светлом фоне без полупрозрачности | Низкий контраст особенно заметен при ярком освещении экрана |
Проверить читаемость текста проще всего простым способом: распечатать или открыть страницу на телефоне и прочитать вслух абзац с обычного расстояния. Если приходится щуриться или перечитывать строку — типографику стоит доработать.
Иерархия заголовков
Типографика — это ещё и то, насколько понятна структура страницы с первого взгляда. Заголовки разного уровня должны заметно отличаться размером и весом, чтобы посетитель, бегло просматривая страницу, сразу видел, где раздел, а где подраздел. Если все заголовки визуально одинаковы, структура страницы перестаёт считываться, даже если она логично выстроена в разметке.
Хорошая иерархия помогает и с SEO-продвижением: поисковые системы учитывают структуру заголовков при оценке того, насколько страница отвечает на запрос пользователя, а понятная визуальная иерархия обычно идёт рука об руку с понятной структурой разметки.
Типографика в разных элементах интерфейса
- Заголовки страниц и разделов. Крупный размер, достаточный контраст, не более двух-трёх строк — длинные заголовки лучше сокращать по смыслу.
- Основной текст. Комфортный размер, умеренная длина строки, достаточные отступы между абзацами.
- Подписи и мелкий текст. Даже вспомогательный текст — подписи к полям форм, примечания — не должен быть меньше 13–14 пикселей.
- Текст на кнопках. Короткий, ясный, с достаточным контрастом к фону самой кнопки, а не только к фону страницы.
- Текст в таблицах и прайс-листах. Здесь особенно важно выравнивание и единообразие: одинаковый размер шрифта для однотипных данных.
Типографика и адаптивность
Размер шрифта, который удобно читать на большом мониторе, не всегда подходит для маленького экрана телефона, и наоборот. Хорошая типографика меняется вместе с макетом: на мобильных заголовки часто становятся компактнее, а основной текст, наоборот, не уменьшается — читателю и так приходится держать телефон на близком расстоянии, и мелкий текст там читать сложнее, чем на десктопе. Подробнее о том, как в целом строится мобильный макет, можно прочитать в статье об адаптивном дизайне.
Важно проверять типографику не на одном устройстве, а на нескольких: то, что хорошо смотрится на macbook с ретина-экраном, может выглядеть иначе на обычном офисном мониторе или бюджетном смартфоне.
Частые ошибки в типографике сайтов
Слишком много начертаний одновременно
Когда на одной странице одновременно используются полужирный, курсив, подчёркивание и капслок для разных фрагментов текста, глазу сложно понять, что действительно важно. Выделение работает только тогда, когда оно редкое и осмысленное.
Текст, выровненный по ширине
Выравнивание по ширине (когда оба края абзаца ровные) на сайте часто создаёт неравномерные пробелы между словами, особенно в узкой колонке на мобильном экране. Для веба почти всегда лучше работает выравнивание по левому краю.
Игнорирование межбуквенного интервала в заголовках
Крупные заголовки, набранные капслоком без увеличенного межбуквенного интервала, могут читаться тяжелее, чем кажется на макете — буквы визуально слипаются. Небольшое увеличение интервала для капслока заметно облегчает восприятие.
Разный размер одинаковых по смыслу элементов
Если на одной странице заголовки одного уровня набраны разным размером просто потому, что так «показалось лучше» в моменте, это разрушает единообразие сайта. Размеры заголовков и текста стоит зафиксировать один раз для всех страниц и не менять от случая к случаю.
Коротко
Хорошая типографика почти незаметна: читатель не задумывается о шрифте, он просто спокойно читает текст и находит нужную информацию. Для этого достаточно одного-двух проверенных шрифтов, комфортного размера, разумной длины строки и понятной иерархии заголовков. Если планируете новый сайт или хотите обновить текущий дизайн, посмотрите услугу редизайн сайта — мы поможем подобрать типографику, которая будет работать на удобство и конверсию, а не только на красоту.
