2learn

Шкала размеров шрифта

Что это такое

Шкала размеров — это короткий список размеров с указанной работой для каждого. Пять или шесть шагов покрывают весь продукт; умение в том, чтобы назначить каждому цель и затем отказаться добавлять седьмой.

Почему это важно

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

Ключевые идеи

Дайте каждому размеру работу

Прежде чем трогать дизайн, запишите список вместе с назначением каждого размера. Две ступени с одной и той же работой — одну удалите.

Размер  Вес       Работа
32/40   bold      заголовок страницы, один раз на страницу
24/32   semibold  заголовок раздела
18/28   semibold  карточка или подзаголовок
16/24   regular   основной текст, большая часть страницы
14/20   regular   подписи, пояснения, вспомогательный текст
13/18   medium    кнопки и подписи навигации

Шесть шагов, у каждого ровно одна цель.

Держите шаги достаточно далеко, чтобы их было видно

Шаг с 16 на 17 пикселей невидим и читается как случайность, поэтому прыжок должен быть очевидным — иначе два размера стоит свести в один.

Невидимый прыжок:  16 / 17 / 18
Видимый прыжок:    16 / 18 / 24 / 32

Вес и цвет — отдельные ручки

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

Называйте размеры, а не числа

Имя размера — его работа: title, heading, body, caption. Тогда изменение чисел — одна правка вместо ста, и никто не спорит за «девятнадцатый».

Задавайте высоту строки вместе с размером

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

Практика

Напишите шкалу из пяти шагов для одного продукта

Перечислите пять или шесть размеров с их целью и примените их к трём реальным экранам — списку, странице деталей и форме.

Готово, когда: ни один экран не использует размер вне шкалы, и у каждого присутствующего размера есть заявленная работа.

Сверните существующую палитру размеров

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

Готово, когда: количество различных размеров упало до шести или меньше, и вы можете назвать, что значит каждый оставшийся.

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

  • Слишком много размеров — иерархия перестаёт что-либо значить; исправить: пять или шесть шагов, у каждого одна работа.
  • Шаги слишком близко — разница читается как ошибка; исправить: сделайте прыжок видимым или объедините два размера.
  • Одновременное использование размера, веса и цвета — каждый уровень кричит, и ничто не выделяется; исправить: меняйте одну ручку на уровень.
  • Высота строки одинакова для всех размеров — заголовки разрежаются, основной текст теснится; исправить: подстраивайте высоту строки под размер.
  • Размеры по номерам в разговоре — каждое ревью заново пересматривает значения; исправить: называйте их по работе.

Что читать дальше

Разобранные примеры

Файлы cookie аналитики ставятся только с вашего согласия. До вашего выбора ничего не загружается и никуда не отправляется.