2learn

Длина строки и ритм

Что это такое

Длина строки — это мера, сколько символов помещается в строке; а ритм — вертикальные промежутки, которые держат страницу вместе: высота строки и последовательные интервалы между заголовками, абзацами и разделами.

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

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

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

Стремитесь к 45–75 символам в строке

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

Слишком широко (110 символов)  абзац на всю ширину на большом мониторе
Комфортно (60-70)              колонка примерно в 60-70 символов
Слишком узко (30)              колонка шириной с телефон, ещё и с отступом

Ограничивайте текстовую колонку, а не позволяйте ей заполнять вьюпорт, и держите основной текст подальше от края окна.

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

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

Основной 16px  ->  высота строки около 24px
Заголовок 32px ->  высота строки около 40px
Широкая мера 90 символов -> немного больше, чем для узкой колонки

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

Именно это связывает заголовок с его собственным содержимым. Если промежутки равны, заголовок читается как осиротевший.

Перед заголовком   40px
Заголовок
После заголовка     8px
Основной текст

Держите один ритм для всей страницы

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

Выравнивайте текст по левому краю и избегайте выключки

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

Практика

Измерьте одну страницу

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

Готово, когда: трое читают абзац, не теряя места, и количество укладывается в диапазон.

Исправьте промежутки одного заголовка

Найдите заголовок, у которого промежуток сверху равен промежутку снизу. Сделайте верхний промежуток в три-пять раз больше нижнего и посмотрите на страницу издалека.

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

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

  • Абзацы на всю ширину на большом экране — строки превышают 100 символов, и читатель теряет место; исправить: ограничьте текстовую колонку 45–75 символами.
  • Одна высота строки для всех размеров — заголовки выглядят разреженными, а основной текст тесным; исправить: задавайте высоту строки от размера и меры.
  • Равные промежутки над и под заголовком — заголовок висит между двумя разделами; исправить: сделайте верхний промежуток явно больше.
  • Выключка текста в вебе — неровные пробелы между словами и белые реки; исправить: выровняйте по левому краю и примите рваный край.
  • Свой ритм на каждой странице — продукт кажется собранным из частей; исправить: используйте одну шкалу промежутков для абзацев и разделов.

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

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

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