UXPUB

UXPUB - сообщество из 2,337 дизайнеров и творческих людей

Место, где дизайнеры делятся опытом

Создать аккаунт Войти
Cover image for Идеальная длина строки и высота линии в веб-дизайне
Редакция
Редакция

Опубликовано

Идеальная длина строки и высота линии в веб-дизайне

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

Для чтения текста на настольных компьютерах идеальная строка должна иметь длину от 60 до 80 символов с высотой строки от 1,5 до 1,6. Выбор значений всегда зависит от выбранного вами шрифта, и чем короче строка, тем меньше может быть ее высота, особенно для заголовков. В целом, сделайте ее как можно более компактной, но настолько свободной, насколько это необходимо.

Эта статья является второй частью мини-серии об основах правильной настройки текста. Первую часть я посвятил размеру шрифта. В ней я уже рассмотрел концепцию святой троицы типографики: размер шрифта, длину и высоту строки. Итак, давайте перейдем к разбору двойственности двух последних параметров. В основном я сосредоточусь на настройке текстов больших объемов, но также я расскажу о мобильных устройствах, коснусь темы заголовков и другого отображаемого текста.

Какая цель стоит за всем этим?

Цель хорошо написанного текста – ровный типографический цвет (typographic color). Под цветом я не имею в виду синий или красный, я подразумеваю желание сделать текст приятным для чтения, не слишком плотным и не слишком свободным. Вы поймете, что я имею в виду, если взглянете на приведенные ниже примеры и обратите внимание на то, что вы чувствуете, глядя на них, не обязательно их читать. Если вы читаете эту статью на телефоне, возможно, вы захотите повернуть его в альбомную ориентацию, поскольку здесь длина строки ориентирована на экраны ПК.

? Высота строки: 1,2 – определенно не то, что нам нужно. Этот типографический цвет слишком темный

Высота строки: 2,2 – лучше, но не то. Этот типографический цвет слишком светлый

? Высота строки: 1,6 – Да! Этот типографический цвет подходит!

Все приведенные выше примеры набраны одним и тем же шрифтом, Inria Sans, с одинаковым размером и имеют примерно одинаковую длину строки – около 75 символов. Их отличает только высота строки. Таким образом, вы видите, какое влияние она оказывает, насколько компактным или легким становится текст.

Не существует магического числа, которое всегда будет выглядеть правильно

Но для многих гарнитур есть ряд цифр, которые будут выглядеть нормально, часто лучше, чем значения браузера по умолчанию. Ниже я поделюсь выбранными мной значениями в конкретных примерах. Но больше всего я хочу, чтобы эта статья открыла вам глаза. Если вы новичок в этой теме или не уверенно овладели ей, я хочу показать вам процесс и научить, на что вам следует обратить внимание. Чтобы вы поняли почему выбранное значение выглядит лучше или уместнее. Типографика – это больше искусство, чем наука, все мои советы основаны на 15-летнем опыте работы UI-дизайнером. В конце концов, всегда принимайте решения самостоятельно.

Сперва выберите гарнитуру

Первым шагом всегда должен быть выбор подходящих шрифтов для различных типов текста (отображаемый текст, основной текст и функциональный текст). Почему? Внешний вид и параметры каждого шрифта могут отличаться. В некоторых случаях это явное отличие, например, при переключении с моноширинного шрифта на пропорциональный шрифт с засечками. В других ситуациях это не так очевидно, например, при переключении с Helvetica на Arial – чего вы бы никогда не сделали, потому что не стали бы их использовать, верно? Но всегда есть риск, что придется все заново настраивать. Так что сначала определитесь со шрифтом, а потом возитесь с его настройкой. Это сэкономит вам много времени и нервов.

? Слишком темный и слишком большой. Трудно поверить, но то, что выглядело хорошо в предыдущем примере с Inria Sans, теперь выглядит нормально только с Merriweather Sans

? О нет! Опять та же высота строки и размер шрифта, но совсем другой результат с JetBrains Mono. Текст кажется тусклым, плотным и слишком большим

Итак, прежде чем мы погрузимся в эту тему, давайте еще раз рассмотрим общий процесс:

  1. Выберите подходящий шрифт
  2. Установите правильныйразмер шрифта
  3. Выберите подходящую длину строки
  4. Отрегулируйте высоту строки соответствующим образом

Затем установите меру, известную как max-width

В терминах типографики длина строки называется мерой (measure), и традиционно мы хотим избегать очень длинных строк. Считается, что для удобного чтения идеальная строка должна содержать от 60 до 80 символов. Знайте, это не подтверждено исследованиями. Похоже, короткие строки не увеличивают скорость чтения, как указывает Мэри Дайсон в своей недавней обстоятельной статье «Line length revisited». Тем не менее, эти 60–80 символов – неплохая идея, поскольку они должны быть вам знакомы по книгам. И даже, если не ради скорости чтения, вы захотите установить данное значение максимальной ширины (max-width), чтобы сделать текст более компактным.

Когда вы устанавливаете свой текст в относительных единицах, например, rem, вы можете предположить, что один rem примерно равен по ширине двум символам. Это означает, что вы можете установить max-width от 30 до 40 rem. Решите, исходя из того с каким значением лучше смотрится правое поле при выравнивании текста по левому краю. В каких вариантах большинство слов умещается в одну строку, и вы добьетесь того ровного типографического цвета, который мы ищем?

Этот пример немного сложен. Несмотря на то, что у верхнего фрагмента текста меньше всего шагов в правом поле, нижний пример может быть более практичным. Это потому, что строки короче

Конечно, все зависит от языка, на котором написан ваш текст. В английском языке слова короче, чем в немецком, поэтому может быть полезно использовать немного более длинный интервал. Всегда избегайте lorem ipsum в своих дизайнах. Если есть возможность, используйте в дизайне фактический текст. Если нет, используйте черновик или хотя бы фиктивный текст на языке контента.

Как указала Ким в комментарии, я не должен оставлять без внимания, что в css существует блок символов (characters unit). Единица ch основана на ширине 0. Ее преимущество в том, что вам не нужно учитывать размер шрифта при установке max-width, это может выглядеть так:

p {

max-width: 64ch;

}

Я не использую этот прием, потому что установил остальные интервалы в rem и хотел бы их придерживаться. Но точно есть случаи, когда этот подход вам пригодится!

Установите высоту строки в соответствии с ее длиной

Интерлиньяж, это модный типографический термин для обозначения высоты строки, всегда идет рука об руку с мерой. И почти всегда вы должны его настраивать. В зависимости от пользовательского агента настольные браузеры используют значение по умолчанию – примерно 1,2. Для основного текста этого явно недостаточно.

Для более длинных строк требуется большая высота строки, для более коротких – меньшая. Когда длинные строки расположены слишком близко друг к другу, труднее уловить начало следующей строки. Этот эффект проявляется в абзацах, содержащих более десяти строк. Вы теряете ориентацию, чувствуете желание использовать линейку, выделить текст курсором или просто отомстить за этот опыт. Это ошибка плохой типографики. Чтобы продемонстрировать это, я повторю примеры из начала статьи.

☠️ Высота строки: 1,2 - длинные строки и небольшая высота строки – смертельная комбинация. Здесь довольно легко потерять ориентацию

С мерой, скажем, 34 rem, и размером шрифта 1 rem, высота строки (line-height) может быть примерно 1,6. С выбранным мной шрифтом текст выглядит чистым, открытым и дружелюбным

? Высота строки 1,6 идеально подходит для более широкого столбца, набранного этим шрифтом

Теперь мы подошли к той части, где высота и длина строки связаны друг с другом. То, что выглядело слишком плотным при высоте строки 1,2 в широком столбце, почти нормально при узком столбце. Скорее всего, вы не потеряете ориентацию, читая этот текст, потому что путь к следующей строке короче. Тем не менее, он тоже не идеален и все равно кажется очень плотным. С увеличением высоты строки до 1,35 текст выглядит намного лучше.

? Высота строки 1,2 – лучше смотрится на мобильном телефоне, но все равно текст слишком «темный»

? Высота строки 1,35 – небольшое, но заметное изменение оказывает большое влияние

И снова выбор, подходящий для настольных компьютеров (высота строки 1,6), не идеален для мобильных устройств. Текст слишком свободный, но все же лучше, чем первая версия со значением 1,2.

? Высота строки 1,6 – многовато для узкого столбца

? Высота строки 1,35 – снова для сравнения

Надеюсь, это прояснило, как все связано. Если вы хотите поэкспериментировать с настройками, вы можете использовать для этого мой пример на CodePen. И есть идеальная игра-треугольник от Matej Latin, которая в интерактивной увлекательной игровой форме иллюстрирует, как размер шрифта, длина и высота строки взаимосвязаны. Попробуйте! И спасибо Полу за то, что поделился ей в комментариях.

Что это значит для дизайна мобильных устройств и приложений?

В телефоне размер не так важен, потому что экран все равно очень узкий. Не делайте текст слишком маленьким (минимум 14–15 px). Тогда вы не поместите столько слов в одну строку. Это означает, что ваш столбец может иметь ширину от 20 до 25 rem. Теперь поэкспериментируйте с высотой строки. Узкий столбец более удобный, особенно когда речь идет о больших высотах линий. Я бы выбрал значение между 1,3 и 1,45, опять же, все зависит от шрифта.

Если вам нужно использовать единое значение для настольных компьютеров и мобильных устройств, я бы выбрал примерно 1,5. Это может быть слишком мало для настольных компьютеров и слишком много для мобильных устройств, но все же лучше, чем значения по умолчанию. А иногда это невозможно отрегулировать из-за технических ограничений.

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

Для разных типов текста требуется разная высота строки

В этой статье основное внимание уделялось основному тексту, но теперь давайте кратко рассмотрим другие типы текста.

Заголовки

Заголовки должны быть компактными, но многие сайты об этом забывают. Заголовки могут иметь высоту строки около 1,1. Только убедитесь, что нижние и верхние выносные элементы букв не перекрываются. Всегда смотрите на заголовки с разрывом строки между ними. Никогда не знаешь, когда заголовок окажется слишком длинным и займет несколько строк. Я рассматриваю этот момент подробнее в этой статье.

Пример из упомянутой выше статьи: Слева высота строки 1,3 и, кажется, что заголовок разваливается. С правой стороны он установлен на 1.1 и кажется более компактным.

Другой отображаемый текст

Например, лид-абзац, который набран более крупным шрифтом. Если вы поместите меньше текста в одну строку, вы также уменьшите высоту строки. Я разбираю этот пример в обзоре блога.

До: лид-абзац слишком легкий и строки расположены слишком далеко друг от друга (высота строки 1,8)

После: лид-абзац имеет меньшую высоту строки (1.5)

Компоненты интерфейса

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


Перевод статьи pimpmytype.com

Обсуждение (0)