Дизайн и юзабилити
Цвет в веб-дизайне: как подобрать палитру
Цвет первым создаёт впечатление о сайте и управляет вниманием посетителя: подсказывает, куда нажать, что важно, а что второстепенно. Разбираем, как собрать палитру,…
Что такое типографика и почему она влияет на продажи
Типографика — это искусство и система правил оформления текста: выбор шрифтов, размеров, интервалов, ширины колонки, выравнивания, цвета. На сайте она решает две задачи. Первая — удобство чтения: текст должен восприниматься легко, без напряжения глаз. Вторая — иерархия: посетитель должен с первого взгляда понимать, где главное, где второстепенное, где начинается новый смысловой блок.
Плохая типографика редко бросается в глаза как отдельная проблема. Люди не говорят «здесь неудачный межстрочный интервал». Они просто устают, пропускают важные абзацы, не находят нужную информацию и уходят. Хорошая типографика тоже незаметна: текст просто читается, а взгляд сам находит нужное.
Для коммерческого сайта это прямо связано с конверсией. Условия доставки, описание услуги, гарантии — всё это текст. Если его неудобно читать, аргументы не доходят до клиента.
Выбор шрифтов
Сколько шрифтов использовать
Для большинства сайтов достаточно одного-двух шрифтовых семейств. Типичная схема — один шрифт для заголовков и один для основного текста, либо одно семейство с разными начертаниями для всего. Три и более разных шрифта создают визуальный шум и выглядят непрофессионально.
Гротески и антиквы
Гротески (шрифты без засечек) — стандарт для интерфейсов и основного текста на экранах. Они хорошо читаются на любых размерах и плотностях пикселей.
Антиквы (шрифты с засечками) уместны для заголовков, медиа, сайтов с длинными статьями, премиальных брендов. Современные экранные антиквы хорошо читаются и в основном тексте, но требуют аккуратной настройки размера.
Акцидентные шрифты — декоративные, рукописные, необычные — подходят только для крупных заголовков или логотипа. Набирать ими абзацы нельзя.
На что смотреть при выборе
- Поддержка кириллицы. Многие красивые латинские шрифты имеют слабую или неполную кириллицу. Проверьте, как выглядят буквы «ж», «ф», «щ», «ы» и как смотрится русский текст целиком.
- Набор начертаний. Нужны как минимум обычное, полужирное и курсивное. Хорошо, если есть промежуточные веса.
- Читаемость на малых размерах. Откройте шрифт размером четырнадцать-шестнадцать пикселей и прочитайте абзац с экрана телефона.
- Различимость символов. Похожие формы цифры «1», строчной «l» и заглавной «I», а также «0» и «О» могут путать читателя, особенно в ценах и артикулах.
- Лицензия. Убедитесь, что шрифт разрешено использовать на сайте. Свободные шрифты из каталогов вроде Google Fonts решают этот вопрос.
- Вес файлов. Каждое начертание — отдельный файл. Подключайте только те, что действительно используются.
Совет: системные шрифты (те, что уже есть в операционной системе) загружаются мгновенно. Для интерфейсных сайтов и личных кабинетов это часто лучший выбор, чем внешний шрифт.
Размеры и иерархия
Размер основного текста
Основной текст на десктопе — шестнадцать-восемнадцать пикселей, для длинных статей можно и двадцать. Четырнадцать пикселей допустимы только для подписей и второстепенной информации. На мобильных основной текст не должен быть меньше шестнадцати пикселей: иначе браузер может увеличивать масштаб при фокусе на поле ввода, а читать станет трудно.
Шкала размеров
Заголовки разных уровней должны заметно отличаться друг от друга. Удобно строить размеры по модульной шкале: каждый следующий уровень больше предыдущего в фиксированное число раз, например в 1,25 или 1,333. Тогда при основном тексте в шестнадцать пикселей получится примерно такая шкала:
| Элемент | Размер на десктопе | Размер на мобильном |
|---|---|---|
| Заголовок первого уровня | 40–48 px | 28–32 px |
| Заголовок второго уровня | 30–34 px | 24–26 px |
| Заголовок третьего уровня | 22–24 px | 20 px |
| Основной текст | 16–18 px | 16 px |
| Подписи, примечания | 13–14 px | 13–14 px |
Цифры ориентировочные и зависят от выбранного шрифта: у разных гарнитур разная высота строчных букв, поэтому одинаковый кегль визуально воспринимается по-разному.
Иерархия не только через размер
Различать уровни помогают также насыщенность (полужирное начертание), цвет, регистр, отступы. Но не нужно использовать всё сразу. Если заголовок одновременно крупный, жирный, цветной, подчёркнутый и набран заглавными, он кричит, а не помогает.
Интервалы
Межстрочный интервал
Для основного текста оптимальный межстрочный интервал — от 1,4 до 1,6 размера шрифта. Слишком плотные строки сливаются, слишком разреженные распадаются на отдельные линии. Для заголовков интервал меньше — 1,1–1,3, потому что крупный текст визуально и так «воздушный».
Отступы между абзацами
Абзацы отделяются отступом, примерно равным высоте строки или чуть меньше. Красная строка на сайтах обычно не используется. Главное — не применять оба способа одновременно.
Отступы вокруг заголовков
Заголовок должен быть ближе к тексту, к которому относится, чем к предыдущему блоку. Если отступы сверху и снизу одинаковые, заголовок «повисает» между разделами, и неясно, к чему он принадлежит. Правило простое: отступ над заголовком в полтора-два раза больше, чем под ним.
Межбуквенный интервал
Для основного текста трекинг лучше не менять. Для текста, набранного заглавными буквами (кнопки, небольшие подзаголовки), полезно немного увеличить межбуквенный интервал — это улучшает читаемость. Крупные заголовки, наоборот, иногда выигрывают от лёгкого уменьшения трекинга.
Длина строки и выравнивание
Оптимальная длина строки для комфортного чтения — от пятидесяти до восьмидесяти символов. Если строка длиннее, глазу трудно найти начало следующей; если короче, текст постоянно рвётся и чтение становится дёрганым. На широких мониторах текст, растянутый на всю ширину экрана, — одна из самых частых ошибок. Ограничивайте ширину текстовой колонки примерно семьюстами-восемьюстами пикселями.
Выравнивание по левому краю — стандарт для веба. Оно создаёт ровную линию, от которой глаз начинает каждую строку.
Выравнивание по ширине на сайтах лучше не использовать: без качественных переносов оно создаёт неравномерные пробелы — «реки» в тексте, особенно заметные на узких мобильных экранах.
Центрирование подходит только для коротких фрагментов: заголовков, подписей, текста в карточках из двух-трёх строк. Длинный центрированный текст читать тяжело.
Цвет и контраст текста
Текст должен заметно отличаться от фона. Стандарты доступности рекомендуют контраст не ниже 4,5:1 для основного текста и 3:1 для крупных заголовков. Проверить контраст можно в инструментах разработчика браузера или в онлайн-калькуляторах.
Распространённая ошибка — светло-серый текст на белом фоне. Он выглядит «изящно» на макете дизайнера с ярким монитором, но на обычном экране, при солнце или у человека со слабым зрением становится нечитаемым.
Чистый чёрный текст на чистом белом фоне иногда кажется слишком резким при долгом чтении. Хороший компромисс — очень тёмно-серый текст, например близкий к чёрному оттенок, на белом или слегка тёплом фоне.
Ссылки в тексте должны отличаться не только цветом, но и подчёркиванием или другим признаком: около восьми процентов мужчин имеют нарушения цветовосприятия и могут не увидеть разницу по цвету.
Типографика на мобильных устройствах
Мобильная версия — не уменьшенная копия десктопной. Для неё нужны свои настройки:
- основной текст — не меньше шестнадцати пикселей;
- заголовки уменьшаются сильнее, чем основной текст, чтобы длинное название услуги не занимало весь экран;
- боковые отступы — не меньше шестнадцати пикселей, чтобы текст не прилипал к краям;
- таблицы с большим количеством столбцов заменяются карточками или прокручиваются горизонтально внутри блока;
- длинные слова в заголовках проверяются на переполнение — немецкие и технические термины могут вылезать за край экрана.
Используйте относительные единицы (rem, em) и, где уместно, плавное масштабирование размера шрифта через функцию clamp в CSS. Тогда типографика будет корректно адаптироваться к разным ширинам экрана.
Технические аспекты
- Формат WOFF2 — самый компактный формат веб-шрифтов. Используйте его.
- Свойство font-display: swap позволяет показывать текст системным шрифтом, пока загружается основной, — посетитель не видит пустую страницу.
- Предзагрузка основного шрифта ускоряет его появление.
- Подмножество символов. Если шрифт содержит десятки языков, а сайт только на русском и английском, можно подключить только кириллицу и латиницу.
- Вариативные шрифты содержат все начертания в одном файле — удобно, если нужно много весов.
Неправильная загрузка шрифтов приводит к «прыжкам» вёрстки при смене шрифта и ухудшает показатели Core Web Vitals.
Типичные ошибки
- Слишком много разных шрифтов на одной странице.
- Мелкий основной текст — двенадцать-четырнадцать пикселей.
- Низкий контраст: серый текст на сером или светлом фоне.
- Строки на всю ширину широкого экрана.
- Выравнивание по ширине без переносов.
- Длинные абзацы набраны заглавными буквами или курсивом.
- Заголовки разных уровней почти не отличаются по размеру.
- Декоративный шрифт в основном тексте.
- Текст поверх пёстрой фотографии без подложки.
- Шрифт без нормальной кириллицы, где часть букв подставляется из системного.
Итог
Типографика определяет, насколько легко посетителю читать и понимать сайт. Основа хорошей типографики — один-два качественных шрифта с полноценной кириллицей, основной текст от шестнадцати пикселей, межстрочный интервал около полутора, длина строки до восьмидесяти символов, выравнивание по левому краю и достаточный контраст.
Стройте понятную иерархию заголовков, следите за отступами, отдельно продумывайте мобильную версию и правильно подключайте шрифты технически. Мы в КомРА закладываем типографическую систему ещё на этапе дизайн-концепции: это экономит время на вёрстке и делает все страницы сайта единообразными. Хорошо настроенный текст не привлекает к себе внимания — он просто делает так, что сайт хочется читать.