Можно встретить информацию, что межстрочное расстояние, или интерлиньяж, должно быть на 20% больше кегля. Примерно с той же частотой встречается информация, что разница должна быть уже на 50%.
Магического соотношения не существует. Блоки текста будут выглядеть по-разному с разными шрифтами из-за различий Cap Height и X-height. Если 120% с большой вероятностью подойдёт для интерфейсных шрифтов — из-за того, что они создавались с определенным соотношением Cap и X-height — то с остальными возникают проблемы.
Для решения проблемы стоит использовать не общий индекс для всех шрифтов, а индивидуальный, в зависимости от его X-height. Нужно взять строчную букву без выносных элементов — например, Н — того же кегля, что набранный текст, и подставить её между двумя строками текста так, чтобы верхняя граница буквы касалась линии набора первой строки, а нижняя — верхней границы высоты заглавной буквы.
Не обязательно настраивать интерлиньяж на глаз, руководствуясь абстрактными понятиями визуального веса. Универсальное правило существует. Разница с советами в интернетах лишь в том, что это не некий множитель, актуальный для любого шрифта, а индивидуальный подход.
Спасибо за внимание, и классных вам дизайнов!
Интерлиньяж это расстояние между базовыми линиями, на всех пикчах показан межстрочный интервал. Дефолтным интерлиньяжем для книг считается 120%. В наше время в вебе всегда юзается 150-160% для наборного текста и порядка 120% для заголовков. Так полотно текста выглядит свободным. Утверждать что в настоящее время 120% для наборного текста это норма немного глуповато.
Это общепринятые правила эстетики среди современных дизайнеров и типографов.
Я не знаю, откуда вы взяли разницу между интерлиньяжем и межстрочным интервалом. Особенно учитывая, что в англоязычном сообществе всё это суть line spacing. Вот цитата из Вики: Интерлинья́ж (от фр. interligne, буквально — написанное между строк) — междустрочный пробел, расстояние между базовыми линиями соседних строк. В компьютерной вёрстке это понятие обычно называют «межстрочный интервал» (англ. line spacing).
Дефолтного интерлиньяжа для книг не существует. Он сугубо зависит от формата и самого шрифта, о чём пишут Ян Чихольд и Йозеф Мюллер-Брокманн.
В настоящее время юзается 150-160%, только потому что это наиболее ленивое решение, работающее кое-как, но почти всегда. Здесь же я делюсь с методом, который работает отлично и всегда.
О глупости утверждения, что 120% это хорошее решение для интерфейсного наборного текста вы можете поведать Apple — абсолютно повсюду в их интерфейсах применяется правило, описанное в посте.
Если у современных дизайнеров и типографов настолько низкие общепринятые правила, идущие вразрез с классической литературой и современной хорошей вёрсткой, то, возможно, на них ориентироваться не стоит.
Никто не утверждал о конкретно точных значениях в пределах этих значений, я говорю про среднее значение для самых популярных гарнитур. Я читал и Чихольда и Мюллера-Брокманна, знаю о чем говорю.
Раз уж ты привет в пример apple, лови скрин с их сайта https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
Взял скрин абзаца текста, накинул на него похожую гарнитуру, можно увидеть какой интерлиньяж они используют.
В Хроме можно узнать точно и всего в два клика, просто заглянув в CSS через консоль разработчика))
Метод будет особенно полезен новичкам, у которых от разных источников, часто друг другу противоречащих и ничем конкретным не обоснованных, в голове неразбериха. Если применим его к тому же абзацу на сайте Эппла, получим вполне комфортные 130%.
Но я писал про интерфейсы. Любые описания в настройках macOS, окна About, тексты превью уведомлений iOS и куча всего прочего следует именно тому, что написано в посте.
Не надо забывать, что пост несёт рекомендательный характер. Равно как и то, что тот же интерлиньяж в 155% будет выглядеть совершенно ужасно с какой-нибудь Футурой, что также описано в посте. Здесь я лишь показываю годный способ системного подхода к этой теме, который будет работать в любых условиях. Поэтому тэйки про то, как принято делать, и о различиях между интерлиньяжем и межстрочным расстоянием выглядят по меньшей мере странно.
а ты с какого века прилетел такой несовременный с высокими правилами?
При чём здесь я, если фраза о современности и правилах это ответ на её упоминание другим комментатором?
Я всегда 1.4 юзаю в интерфейсах. Вроде ок.
Спасибо за статью
. Интерлиньяж так же влияет на характер текста, как и тип шрифта. Большой — придает тексту художественность, размеренность. Малый —наоборот, хорош для коротких абзацев и подзаголовков. Средний хорош в интерфейсах.
До 36 го кегля я обычно использую правило +6.
(12/18, 14/20 и так далее) Обычно хорошо смотрится с большинством современных шрифтов.
достаточно руководствоваться правилом внешнего и внутреннего и не надо никаких Н подставлять)
Или подставить Н и, поскакав от этого, устранить шансы опростоволоситься, применяя абстрактные понятия. Я пишу про возможный рабочий подход с немного другой, более системной, стороны, а вы мне про делать на глаз по внешнему и внутреннему, ну что это такое-то.
ну если для вас правило внешнего и внутреннего в тексте абстракция, то у меня плохие новости для вас
Ничего не имею против правила внешнего и внутреннего. Как можно прочитать из коммента, я писал о том, что, в конкретном его применении для настройки интерлиньяжа, гайды на глаз остаются гайдами на глаз без какой-либо конкретики.
Внутренние расстояния должны быть меньше внешних. Окей, а конкретную методику, работающую относительно конкретных шрифтов можно? Это общее правило, которое безусловно должно применяться, но всё ещё даёт широкий простор для ошибок в интерлиньяжных делах просто по своей сути.
Попрошу попридержать ваши плохие новости для собственной способности к чтению.
Комментарий недоступен
Этот способ позволяет системно делать то, что обычно делается на глаз, деконструируя происходящее при последнем подходе. Почему его нельзя назвать универсальным?
А есть ведь еще выравнивание с использованием вертикального ритма сетки.
Если говорить о Figma то там с этим проблемы. Я бы очень хотел иметь функцию включения выравнивания относительно базовой линии, при чем эта функция есть даже в CSS – vertical-align: baseline.
А Figma меряет величиной контейнера. Я конечно бывает забиваю на это, но душа спокойна если отступы одинаковые, а базовая линия лежит на 8 пиксельной или 10 пиксельной сетке.
Но можно поэкспериментировать с Autolayout как в видео https://www.youtube.com/watch?v=1LbEoZbzjxk
То как придумал автор выравнивать строки может сработать только для сплошного текста. Ведь чем крупнее кегль, тем меньше хочется сделать у него межстрочное расстояние.