Типографическая шкала и ритм — Примеры

Пример 1 — Размеры, выбранные по одной странице за раз

Четыре заголовка несут размеры, выбранные на глаз, а вторая страница уже использует основной текст 18px вместо 17px. Скажите, почему значения расходятся, и выведите каждый размер из одного базового значения и одного отношения.

h1 { font-size: 34px; }
h2 { font-size: 26px; }
h3 { font-size: 19px; }
p { font-size: 17px; }   /* на другой странице используется 18px */

Решение

:root {
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { font-size: var(--step-0); }

Без шкалы каждый новый экран выбирает размер, который выглядит верным в моменте, и набор растёт, пока никто уже не может сказать, каким должен быть заголовок — 19 пикселей или 20. Вывод шагов из одного базового значения и одного отношения даёт небольшой набор, который легко запомнить, — здесь примерно 1.25 на каждый шаг. Дальше дизайнер или разработчик выбирает ближайший шаг, а не изобретает значение. Размеры заданы в rem и потому уважают читателя, который увеличил размер шрифта по умолчанию в браузере; пиксельные значения в исходнике эту настройку игнорировали полностью. Шкала — решение дизайна об отношении, а согласованность, которую она даёт, необязательной не бывает.

Пример 2 — Одна высота строки на все размеры и абзац во весь экран

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

body { line-height: 1.5; }
h1 { font-size: 2rem; }
/* строки абзаца тянутся на всю ширину окна */

Решение

body { line-height: 1.5; }
h1, h2 { line-height: 1.15; }

.prose { max-width: 68ch; margin-inline: auto; }

Единая высота строки всегда где-нибудь неверна: тот же интерлиньяж, что подходит тексту в 16px, на заголовке в 32px выглядит рыхлым. Поэтому крупному шрифту нужен более плотный множитель — вот почему заголовки получают свой собственный. Так же важно оставить значение без единиц измерения. Безразмерный интерлиньяж кратен собственному размеру шрифта элемента и масштабируется вместе с ним, а пиксельное значение пришлось бы заново указывать для каждого шага шкалы. Вторая неисправность — мера строки: после примерно семидесяти пяти символов глаз теряет место при возврате, поэтому абзац на 1600 пикселей нечитаем, как бы хорошо он ни был набран. Единица ch измеряется по нулевому глифу шрифта, поэтому ограничение следует за изменением типографической шкалы, а не уплывает.