Шкала размеров
Интерфейс на девять десятых состоит из текста: заголовки, кнопки, подписи, цены, подсказки. Поэтому типографика — не украшение, а основа. И первое, что в ней решается, — какие размеры шрифта вообще бывают в проекте.
Новичок выбирает размер для каждого текста отдельно: заголовку 28, подзаголовку 19, подписи 13, цене 22. Через неделю в файле двадцать разных размеров, и ни один экран не похож на соседний. Решение — шкала: заранее заданный короткий ряд размеров, из которого берут всё.
Шкалу строят от базового размера — размера основного текста. Для экрана это почти всегда 16: меньше — читать трудно, особенно на телефоне. Дальше каждый шаг умножают на одно и то же отношение: 1,2 даёт спокойную шкалу для приложений, 1,25 — для большинства сайтов, 1,333 — выразительную для лендингов. Округлённые значения удобно подогнать к шагу 4: 16, 20, 24, 32, 40.
Вниз от базового обычно берут один-два размера: 14 для подписей и 12 для самых мелких меток. Ниже 12 на экране опускаться не стоит — такой текст читают с трудом, а в правилах доступности он считается проблемой.
Сколько размеров нужно? На весь проект — пять-семь. Если их больше, различия между соседними становятся незаметными: 18 и 19 глаз не отличит, а разработчику придётся заводить оба. Меньше размеров — сильнее иерархия и проще жизнь всем.
Интерлиньяж и длина строки
Второй параметр текста — интерлиньяж, расстояние между строками. Его записывают вторым числом через косую черту: «16 / 24» — размер 16, интерлиньяж 24. Для основного текста хорошо работает около 1,5 от размера: 16 / 24, 14 / 20. Строки дышат, глаз легко находит начало следующей.
У заголовков интерлиньяж меньше — 1,1–1,3: 32 / 40, 40 / 48. Крупный текст с интерлиньяжем 1,5 разваливается на отдельные строки, между которыми зияют дыры. Удобно, когда интерлиньяж кратен 4 или 8: тогда строки встают в ритм шага из прошлого урока.
Третий параметр — длина строки. Удобная — 45–75 знаков. Длиннее — глаз, дойдя до конца строки, теряет начало следующей; короче — текст рвётся, и читать приходится рывками. На ноутбуке это значит, что абзац не растягивают во всю ширину экрана, а ограничивают шириной 600–700 точек.
И выравнивание: текст в интерфейсе почти всегда выровнен по левому краю. По ширине — с растянутыми пробелами — на экране выглядит неряшливо, дыры между словами бросаются в глаза. По центру — только для коротких строк: заголовок, подпись, кнопка. Абзац по центру читать трудно: каждая строка начинается в новом месте.
Все эти числа кажутся мелочью, но именно они отличают текст, который читают, от текста, который пролистывают. Человек не скажет «интерлиньяж тесный» — он скажет «тяжело читается» и уйдёт.
Текстовые стили
Когда шкала и интерлиньяжи выбраны, их записывают в текстовые стили. Стиль — это именованный набор: шрифт, размер, насыщенность, интерлиньяж, межбуквенное расстояние. «Заголовок 1», «Текст», «Подпись», «Кнопка». Текст в макете не настраивают руками, а назначают ему стиль.
| стиль | шрифт и размер | где |
|---|---|---|
| Заголовок 1 | 40 / 48, жирный | главный заголовок экрана |
| Заголовок 2 | 32 / 40, жирный | заголовки разделов |
| Текст | 16 / 24, обычный | абзацы, описания |
| Подпись | 14 / 20, обычный | подписи к картинкам, даты |
| Кнопка | 16 / 24, полужирный | надписи на кнопках |
Главная польза стилей — одна правка меняет всё. Решили, что основной текст должен быть 17, а не 16, — поменяли стиль «Текст», и все абзацы во всех экранах изменились сами. Без стилей пришлось бы искать и править каждый текст вручную, и какой-нибудь один обязательно остался бы старым.
Называть стили стоит по роли, а не по размеру. «Заголовок 2» переживёт смену размера с 32 на 28, а стиль «Жирный 32» после такой правки начнёт врать. То же правило, что и для слоёв в первом уроке: имя говорит, что это, а не как выглядит.
Стилей, как и размеров, должно быть немного: десять-пятнадцать на проект. Если под каждый новый текст заводится новый стиль, это та же беда, что двадцать размеров, только аккуратно подписанная.
Текст без стиля в готовом макете — сигнал: либо стиль забыли назначить, либо для этого места его нет и нужно решить, из какого он ряда. Хорошая проверка перед передачей — пройтись по экрану и убедиться, что у каждого текста есть стиль.
Иерархия
Зачем тексту разные размеры и насыщенности? Чтобы у экрана была иерархия — порядок, в котором глаз читает. Сначала заголовок, потом главное действие, потом подробности. Иерархию создают четыре инструмента: размер, насыщенность, цвет и отступ.
Размер — самый сильный: крупное читают первым. Насыщенность — жирное выделяется даже при том же размере. Цвет — второстепенный текст делают бледнее, не меняя размера. Отступ — то, что отделено простором, воспринимается отдельной частью.
Хорошая иерархия использует эти инструменты экономно. Если выделено всё — жирным, крупно и цветом, — не выделено ничего: глаз мечется. Правило: на экране один главный заголовок, одно главное действие, и чем дальше от главного, тем тише оформление.
Про шрифты: в интерфейсе хватает одного, иногда двух — для заголовков и для текста. Разнообразие дают размеры и насыщенности внутри одного семейства. Три и больше шрифтов на экране выглядят как коллаж, а каждый лишний шрифт — это ещё и лишний файл, который грузится у человека в браузере.
Проверить иерархию просто: прищурьтесь или отойдите от экрана. То, что осталось видно, — это то, что человек заметит первым. Если сквозь прищур видна кнопка «Купить» и заголовок товара — иерархия работает. Если видна пёстрая плашка «Скидки!» в углу — она забирает внимание у главного.