Длина строки и ритм — Примеры

Пример 1 — Ограничиваем абзац на широком экране

Текст статьи заполняет всю ширину окна в 1440px, каждая строка уходит за 100 символов, и читатели теряют место на переносе — задайте меру и высоту строки так, чтобы чтение стало комфортным, а в странице не меняйте больше ничего.

.article {
  width: 100%;
  line-height: 1.5;
}

Решение

.article {
  max-width: 65ch;    /* около 60-70 символов в строке */
  line-height: 1.6;   /* широкой мере нужно чуть больше */
}

Если считать символы, а не пиксели, самая длинная строка встанет около 65 и перестанет расти вместе с окном, а чуть увеличенная высота строки поможет глазу вернуться к левому краю. Ограничение текстовой колонки — самый крупный выигрыш в читаемости из доступных на большинстве экранов. Обычная неудача — оставить width: 100% на большом мониторе и считать получившиеся строки в 110 символов проблемой шрифта.

Пример 2 — Заголовок, который не принадлежит ни одному разделу

На странице ниже заголовок стоит между двумя абзацами на равном расстоянии от каждого, поэтому читается как не принадлежащий ни одному. Возьмите для его промежутков небольшую шкалу и не трогайте больше ни один промежуток на странице.

Стоимость доставки

    24px под заголовком
Основной текст ...

    24px над следующим заголовком
Возвраты

    24px под заголовком
Основной текст ...

Решение

Стоимость доставки

     8px под заголовком
Основной текст ...

    40px над следующим заголовком
Возвраты

     8px под заголовком
Основной текст ...

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