Типографика: как подобрать межстрочное расстояние под длину текста

Модуль 2. Урок 9
Типографика: как подобрать межстрочное расстояние под длину текста

Длина строки

Это количество текста, которое располагается в одной строке текстового блока. Она зависит от ширины блока, размера шрифта и количества символов или слов и напрямую влияет на удобство чтения.

Что в видео-уроке:

В уроке подробно настраиваем интерлиньяж в Figma и разбираем, как длина строки и количество текста влияют на межстрочное расстояние. Рассмотрим абсолютные и относительные значения Line Height, ориентировочные диапазоны в процентах и способы проверки читаемости текста.

Line Height в Figma

В Figma параметр межстрочного расстояния обозначается как Line Height. При создании нового текстового поля программа может автоматически рассчитывать его значение относительно выбранного размера шрифта.

При выделении многострочного текста также можно увидеть базовые линии строк и проследить расстояние между ними. Именно через них рассчитывается межстрочный интервал.

Line Height можно задавать двумя способами:

  • в пикселях — как фиксированное абсолютное значение;
  • в процентах — как относительное значение, зависящее от размера шрифта.

Например, если размер шрифта составляет 20 px, Line Height 24 px соответствует 120%. В исходном состоянии оба варианта будут выглядеть одинаково, но при изменении размера текста начнут вести себя по-разному.

Почему удобнее использовать проценты

При фиксированном значении Line Height расстояние между строками не меняется вместе с размером шрифта. Например, если оставить интерлиньяж 24 px и увеличить кегль с 20 до 40 или 60 px, строки начнут располагаться слишком близко и буквы могут визуально накладываться друг на друга.

При относительном значении ситуация меняется автоматически. Если установить 120%, то при увеличении кегля увеличивается и расстояние между строками. Благодаря этому пропорции текстового блока сохраняются.

Поэтому в рамках веб-дизайна удобнее задавать Line Height в процентах, особенно если в дальнейшем предстоит работать с адаптивными версиями и менять размеры текста.

Интерлиньяж зависит от длины строки и объёма текста

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

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

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

Короткие строки можно располагать плотнее

Если строка состоит примерно из 3–5 слов, текст обычно можно собирать достаточно компактно. Для небольшого количества строк подойдут значения около 120–130%.

Если таких строк становится много и текст превращается в высокий столбец, расстояние можно немного увеличить — например, до 130–140%, чтобы блок не выглядел слишком плотным.

Для совсем коротких подписей, где в строке находится лишь несколько слов и сам текст занимает две-три строки, иногда достаточно 110–120%. Если текст однострочный, отдельно настраивать Line Height зачастую вообще не требуется — можно оставить автоматическое значение.

Средняя длина строки требует больше воздуха

Если в одной строке находится примерно 5–8 слов, её уже сложнее считывать, особенно в многострочном тексте. В таком случае межстрочное расстояние можно увеличивать примерно до 140–160%.

Например, значение около 150% часто позволяет добавить достаточно воздуха, но при этом сохранить строки визуально связанными между собой. Если расстояние увеличить слишком сильно, текст начнёт распадаться на отдельные тезисы.

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

Для длинных строк нужен увеличенный интерлиньяж

Если в строке находится больше 8 слов, а сам текст состоит из большого количества строк, читать его становится заметно сложнее. Здесь можно использовать значения примерно 160–180%.

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

В качестве ориентиров можно использовать следующие диапазоны:

  • очень короткий текст — около 110–120%;
  • 3–5 слов в строке — примерно 120–140%;
  • 5–8 слов в строке — примерно 140–160%;
  • более 8 слов и большой объём текста — примерно 160–180%.

Эти значения не являются строгими правилами. Они нужны как отправная точка, после которой необходимо визуально оценить конкретный текст.

Значение зависит от ситуации, а не только от гарнитуры

Для большинства обычных гарнитур одни и те же ориентировочные значения работают достаточно похоже. Если заменить Montserrat на Open Sans, Rubik, Roboto или другую распространённую гарнитуру, обычно не требуется полностью пересчитывать систему интерлиньяжа.

Исключением могут быть акцидентные или нестандартные гарнитуры с необычными пропорциями. В таких случаях необходимо отдельно смотреть, как именно текст ведёт себя при выбранных параметрах.

Поэтому важнее ориентироваться не на название гарнитуры, а на конкретную ситуацию: размер текста, ширину блока, количество строк и общее ощущение читаемости.

Калькулятор помогает проверить себя

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

Такие инструменты полезны как дополнительная проверка, но не должны полностью заменять визуальную оценку. Результат калькулятора можно сравнить со своим вариантом и выбрать значение, которое лучше работает в конкретном макете.

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

Читаемость определяет правильное значение

При настройке интерлиньяжа не нужно стремиться запомнить одно универсальное число. Важно понимать закономерность: чем компактнее и короче текст, тем плотнее его можно собирать; чем длиннее строки и больше объём, тем больше пространства требуется между ними.

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

Присоединяйся

1.3k подписчиков в телеграм-канале

Мы постоянно делимся нашим опытом в открытом доступе.
Тебе нужно лишь подписаться на наш канал.

Перейти в Telegram-канал

Москва

8 (499) 705-10-49

125212, г. Москва, Головинское шоссе, д. 5к1

Санкт-Петербург

8 (812) 424-37-87

190020, г. Санкт-Петербург, ул. Бумажная, д. 18

Оренбург

8 (3532) 37-39-39

460052, г. Оренбург, ул. 70 лет ВЛКСМ, д. 14

info@one-page-site.ru
Написать в Telegram

Оставьте заявку

С вами свяжется руководитель студии в течение 15 минут в рабочее время. Если сейчас не рабочее время, напишите ему в Telegram

Откуда узнали о нас?

Заявка принята

Мы свяжемся с Вами в рабочее время:

ПН-ПТ с 9:00 до 15:00 МСК


Для заказа сайта заполните бриф

Скачать бриф Заявка принята

Продолжая использовать сайт, Вы соглашаетесь с обработкой персональных данных, собираемых посредством метрический программы «Яндекс.Метрика» в целях аналитики посещаемости сайта. Политика конфиденциальности.