Статья
Типографика на сайте: правила, которые видно сразу
Типографика — это не выбор шрифта, а то, как текст расставлен на странице: каким размером, в какую ширину, с какими интервалами и знаками. Хорошую типографику не замечают — текст просто легко читать. Плохую замечают все, даже если не могут объяснить, что не так. Разбираем правила, которые проще всего проверить на своём сайте.
Шрифт и типографика
Шрифт — это рисунок букв. Как его выбрать и сочетать, разобрано в статье «Шрифты для сайта». Типографика — то, как этим шрифтом набран текст: размер, длина строки, интервалы, заголовки, знаки препинания. Одним и тем же шрифтом можно набрать текст, который читается легко, а можно — такой, который бросают на втором абзаце.
Размер текста
- Основной текст. Привычный ориентир — 16–18 пикселей, а точнее подбирают по шрифту: у одних шрифтов буквы при том же размере заметно крупнее, чем у других.
- Подписи и примечания — мельче, но не для важного: цены, сроки и условия мелким шрифтом выглядят как попытка что-то спрятать.
- Поля ввода на телефоне — не меньше 16 пикселей. Иначе iPhone при нажатии на поле увеличивает страницу, и она «прыгает».
Длина строки
Удобная длина строки — 45–75 знаков. Если строка короче, глаз слишком часто перескакивает на новую. Если длиннее, он теряет начало следующей. На широком мониторе текст во всю ширину экрана превращается в ленту по 150 знаков, и читать её тяжело.
Поэтому колонку текста ограничивают по ширине — даже если сам сайт растянут на весь экран.
Интервалы
- Между строками основного текста — 1,4–1,6 от размера шрифта. Тесный текст сливается, слишком разреженный рассыпается на отдельные строки.
- У заголовков интервал плотнее — 1,1–1,25: крупные строки с большими промежутками выглядят разорванными.
- Между абзацами — заметно больше, чем между строками: абзац должен читаться как отдельный блок.
Заголовки и иерархия
- Уровни заметно отличаются размером, жирностью, отступами. Если заголовок второго уровня почти не отличается от третьего, структура не читается.
- Отступ над заголовком больше, чем под ним. Так видно, что заголовок относится к тексту ниже, а не выше.
- Два-три уровня на странице обычно хватает.
- Заголовок короткий — одна-две строки, без точки в конце.
Выравнивание
- Текст — по левому краю. По ширине на сайте выравнивать не стоит: браузер растягивает пробелы, и на узком экране телефона между словами появляются дыры.
- По центру — только короткие заголовки и подписи, не абзацы.
- Заглавными буквами — только короткие подписи и кнопки: целый абзац заглавными читается медленнее.
Знаки: кавычки, тире, пробелы
| Знак | Как правильно |
|---|---|
| Кавычки | «Ёлочки» в русском тексте, „лапки“ — для кавычек внутри кавычек |
| Тире | Длинное тире с пробелами вокруг: «Сайт — это инструмент» |
| Дефис | Внутри слов, без пробелов: «интернет-магазин», «какой-то» |
| Диапазон | Короткое тире без пробелов: 10–15 дней, 30 000–70 000 ₽ |
| Неразрывный пробел | Между числом и единицей — 5 дней, 30 000 ₽ — и после коротких предлогов, чтобы «в», «на» и «и» не оставались в конце строки |
Расставлять всё это вручную не обязательно: есть бесплатные сервисы-«типографы», которые сами меняют в тексте кавычки, тире и пробелы.
Частые ошибки
- Светло-серый тонкий текст на белом фоне: на макете изящно, на телефоне на солнце не прочитать.
- Подчёркнутый текст, который не ссылка, — на него будут нажимать.
- Много размеров и начертаний на одной странице — текст выглядит пёстрым. Набор размеров стоит зафиксировать один раз — это часть дизайн-системы, о ней статья «Дизайн-система».
- Абзацы-простыни без подзаголовков и списков.
- Прямые кавычки "так" и дефисы вместо тире.
Как это устроено у нас
В статьях нашего блога основной текст набран с интервалом 1,55, заголовки — 1,15–1,2, а колонка текста не растягивается на всю ширину экрана. Неразрывные пробелы ставит сам сайт: при выводе статьи он склеивает число со словом и знаком рубля и не даёт коротким предлогам и союзам остаться в конце строки.
Как мы делаем это для клиентов
Шрифты, размеры и интервалы задаём в собственном дизайне сайта — для компьютера и отдельно для телефона — и показываем в макете до начала вёрстки.