Идеальная длина строки и высота линии в веб-дизайне
Продолжая тему свободного пространства в дизайне помним о типографике. Конкретно о длине строки и длине заголовка.
Для чтения текста на десктопе рекомендуют использовать длину от 60 до 80 символов или 10-12 слов в строке. Если строка длиннее — читать некомфортно. Помним, что это зависит от языка — в русском слова длиннее в английском короче.
Сразу стоит вспомнить о забавном заблуждении
Миллиарды дизайнерских статей вторят, что шрифт с засечками легко читается и направляет взгляд, но это не так. Когда мы читаем или смотрим на объект глаза не движутся плавно. Глаза «скачут» от точки к точке, совершая быстрые движения, которые называются саккадами. Это происходит даже когда фокусируемся на одной точке.
Для удобочитаемости важна не только длина строки, но и межстрочный интервал. Как уже сказал выше, это важно потому что глазу будет комфортнее «скакать по тексту».
Интерлиньяж почти всегда нужно настраивать. На десктопе по умолчанию используют примерно 120%, но не всегда этого достаточно для комфортного чтения. Рекомендуемые значения 130-140%.
Для длинных строк— большая высота строки, для коротких — меньшая. Когда длинные строки стоят слишком близко друг к другу, трудное уловить начало следующей строки. Особенно, когда блок текста содержит более десяти строк.
120% — длинные строки и небольшая высота строки — сложно читать и легко потерять то место где продолжить если отвлеклись. Я уже не говорю о том если читать находу.
Высота строки 160% идеально подходит для широкого столбца текста.
120% для мобильного экрана тоже слишком мало, а вот 140% уже более менее ок.
Важно! Никогда не используйте Lorem ipsum в макетах. Lorem ipsum не профессионально и выглядит, что вы забили написать любой вменяемый текст, который схож по смыслу с тем, что будет в этом месте лейаута.
Заголовки
Заголовки должны быть компактными, но многие сайты об этом забывают. Заголовки могут иметь высоту строки около 1,1. Порой бывает, что нижние и верхние выносные элементы букв перекрываются и нужно это фиксить. Всегда смотрите на заголовки с разрывом строки между ними.
Пример: Слева высота строки 120% и выглядит более компактным и целостным. С правой стороны интерлиньяж у заголовка 150% и заголовок разваливается.
Всё это базовые с достаточно простые правила, которые сделают дизайн чище и эстетически приятнее. Хотя, нужно помнить, что работа с текстом это, как говорил мне один из моих бывших начальников, — 70% успешного дизайн макета. Поэтому важно углубляться в понимание работы с типографикой, а правил и глубины там достаточно.