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

Пример 1 — Сворачиваем девять размеров в шесть

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

Размеры, найденные в продукте (px)
13  14  15  16  17  18  20  24  32

Решение

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

Девять размеров становятся шестью, а 15 и 17 сворачиваются в 16: их работа никогда не была отдельной. Высота строки при этом падает вместе с размером — 40 для заголовка в 32px, 18 для подписи в 13px, — поэтому мелкий текст получает пропорционально больше места, а заголовки не висят разреженно. Однако обычная неудача — оставить трио 16/17/18: такой шаг невидим и читается как случайность, а не как уровень.

Пример 2 — Исправляем заголовок карточки, не добавляя размер

В списке карточек заголовок карточки набран 18px, а текст — 16px, оба regular и одного серого, поэтому карточка читается как нерасчленённые абзацы. Переранжируйте её весом и цветом, а не ещё одним размером, и оставьте шкалу выше нетронутой.

Карточка
  Адрес доставки        18px regular, тот же серый, что и текст
  24 Willow Road         16px regular, серый
  Обновлено 3 мая        14px regular, серый

Решение

Карточка
  Адрес доставки        16px semibold, самый тёмный цвет текста
  24 Willow Road         16px regular, средний серый
  Обновлено 3 мая        14/20 regular, самый светлый серый

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