Масштабирование высоты строки для вертикального ритма

Question

У меня есть вопрос о масштабировании высот линий для вертикального ритма. Я собираюсь использовать пиксели в приведенном ниже примере, чтобы упростить процесс. Допустим, это базовая структура для моего p-тега:

p {
 font-size: 20px;
 line-height: 30px;
 margin-bottom: 30px;
}

Теперь в этом случае мой ритм-блок установлен на 30 пикселей. Итак, вопрос первый: означает ли это, что мой вертикальный интервал между элементами должен быть кратным 30, а моя высота строки должна быть кратной 30. Это правильно?

И мой второй вопрос: как сделать интервалы между ступенями, чтобы на верхушке было больше, скажем, на дне? Допустим, я хотел, чтобы нижняя граница поля h2 была меньше верхней. Как правильно масштабировать, не нарушая вертикальный ритм?

Answer 1

Теперь в этом случае мой ритм-блок установлен на 30 пикселей. Итак, вопрос первый: означает ли это, что мой вертикальный интервал между элементами должен быть кратным 30, а моя высота строки должна быть кратной 30. Это правильно?

Это довольно много, да.

И мой второй вопрос: как сделать интервалы между ступенями, чтобы на верхушке было больше, скажем, на дне? Допустим, я хотел, чтобы нижняя граница поля h2 была меньше верхней. Как правильно масштабировать, не нарушая вертикальный ритм?

Просто рассмотрите h2 как кратная "высота" line-height что вы установили в качестве базового блока. Используйте margin-top, а также margin-bottom, чтобы уточнить расстояние между h2 пока это не выглядит хорошо "для глаз. Ср.:

30 line
30 line
30 p margin-bottom
15 h2 margin-top
40 h2
5  h2 margin-bottom
30 line
30 line
etc

(Таким образом, весь этот раздел h2 добавляет до 60 или 2x30)

И CSS:

p {
 font-size: 20px;
 line-height: 30px;
 margin-bottom: 30px;
}
h2 { // consider this really as a unit of 60 (30x2)
  font-size: 40px;
  margin-top: 45px; // = 15+30 (*see below)
  margin-bottom: 5px;
}

* Маржинальная вершина не просто 15, потому что мы должны компенсировать маржинальный коллапс:

https://www.w3.org/TR/CSS21/box.html

И последний комментарий: не беспокойтесь о том, чтобы все ваши работы соответствовали заданному шаблону. Есть некоторые контексты, где жесткий шаблон переводится как слишком "жесткий" для читателя. Так что, возможно, в клинических корпоративных условиях это может быть уместно, но когда мы пытаемся сделать то же самое для веб-сайта, посвященного органической ферме, он слишком жесткий и в конечном итоге оказывается совершенно неуместным, визуально.

Если мы действительно хорошие дизайнеры, то мы похожи на джазового барабанщика, который умеет играть "в такт" и делает это именно тогда, когда это необходимо.

Надеюсь, это поможет.