Универсальный способ настройки гармоничного интерлиньяжа

Можно встретить информацию, что межстрочное расстояние, или интерлиньяж, должно быть на 20% больше кегля. Примерно с той же частотой встречается информация, что разница должна быть уже на 50%.

При интерлиньяже в 150% строки слишком далеко друг от друга.
При интерлиньяже в 150% строки слишком далеко друг от друга.
Это уже больше похоже на правду, но строки во втором и третьем блоках всё ещё далековаты.
Это уже больше похоже на правду, но строки во втором и третьем блоках всё ещё далековаты.

Магического соотношения не существует. Блоки текста будут выглядеть по-разному с разными шрифтами из-за различий Cap Height и X-height. Если 120% с большой вероятностью подойдёт для интерфейсных шрифтов — из-за того, что они создавались с определенным соотношением Cap и X-height — то с остальными возникают проблемы.

Былинная картинка-пояснение анатомии шрифта с гайдлайнов Material Design. Google
Былинная картинка-пояснение анатомии шрифта с гайдлайнов Material Design. Google

Для решения проблемы стоит использовать не общий индекс для всех шрифтов, а индивидуальный, в зависимости от его X-height. Нужно взять строчную букву без выносных элементов — например, Н — того же кегля, что набранный текст, и подставить её между двумя строками текста так, чтобы верхняя граница буквы касалась линии набора первой строки, а нижняя — верхней границы высоты заглавной буквы.

Гармонично и прекрасно.
Гармонично и прекрасно.

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

Спасибо за внимание, и классных вам дизайнов!

6363
17 комментариев

Интерлиньяж это расстояние между базовыми линиями, на всех пикчах показан межстрочный интервал. Дефолтным интерлиньяжем для книг считается 120%. В наше время в вебе всегда юзается 150-160% для наборного текста и порядка 120% для заголовков. Так полотно текста выглядит свободным. Утверждать что в настоящее время 120% для наборного текста это норма немного глуповато.

Это общепринятые правила эстетики среди современных дизайнеров и типографов.

14

Я не знаю, откуда вы взяли разницу между интерлиньяжем и межстрочным интервалом. Особенно учитывая, что в англоязычном сообществе всё это суть line spacing. Вот цитата из Вики: Интерлинья́ж (от фр. interligne, буквально — написанное между строк) — междустрочный пробел, расстояние между базовыми линиями соседних строк. В компьютерной вёрстке это понятие обычно называют «межстрочный интервал» (англ. line spacing).

Дефолтного интерлиньяжа для книг не существует. Он сугубо зависит от формата и самого шрифта, о чём пишут Ян Чихольд и Йозеф Мюллер-Брокманн.

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

О глупости утверждения, что 120% это хорошее решение для интерфейсного наборного текста вы можете поведать Apple — абсолютно повсюду в их интерфейсах применяется правило, описанное в посте.

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

6

Я всегда 1.4 юзаю в интерфейсах. Вроде ок.

1

Спасибо за статью

1

достаточно руководствоваться правилом внешнего и внутреннего и не надо никаких Н подставлять)

1

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

. Интерлиньяж так же влияет на характер текста, как и тип шрифта. Большой — придает тексту художественность, размеренность. Малый —наоборот, хорош для коротких абзацев и подзаголовков. Средний хорош в интерфейсах. 
До 36 го кегля я обычно использую правило +6.
(12/18, 14/20 и так далее) Обычно хорошо смотрится с большинством современных шрифтов.