x
 
Паша Омелёхин
24 февраля 2014

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



Паша!

Сегодня я предлагаю рассмотреть, как применять «правило внутреннего и внешнего» к вертикальным отступам. Кстати, работу профессионала легко отличить от любительской по вниманию к вертикальным расстояниям.

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

Рассмотрим шапку страницы, а именно положение заголовка, подзаголовка и отступы вокруг них:

Макет выглядит аккуратно и модульно. Но здесь и проходит водораздел: новичок скажет «окей», а у профи начнётся зуд, и он завернёт работу: «Заголовок слабый и размазанный, здесь нужно исправить верхнее поле и расстояния между строками, как вы этого не видите?»

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

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

Рассмотрим однострочный заголовок:

Здесь не к чему всерьёз придраться: верхнее поле («внешнее» для заголовка) даже с учётом красного кружка больше пробелов между словами («внутреннее» для заголовка).

Но добавим вторую строку:

Всё пошло наперекосяк. Красный кружок требует достаточно большого интерлиньяжа. И теперь верхнее поле («внешнее») стало визуально сравнимо с межстрочным просветом («внутреннее»). Заголовок потерял самостоятельность и стал похож на безвольную кашу.

Увеличим внешнее поле. Для минимальной гигиены достаточно, чтобы «внешнее» было просто больше «внутреннего». Но чем внешнее больше внутреннего, тем больше самостоятельности и значимости получит типографический объект:

Добавим подзаголовок:

Профи негодует. Подзаголовок кажется ближе ко второй строке заголовка, чем собственные строки заголовка друг к другу. Подзаголовок, как говорят в бюро, «влез в интерлиньяж» заголовка. Это вторжение в суверенную территорию — заголовок теряет самостоятельность и независимость.

Важно, что глаз видит это вторжение по межстрочным просветам, а не по невидимой сетке базовых линий.

У неопытных верстальщиков часто в интерлиньяж вторгаются иллюстрации:

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

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

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

А по правилу внутреннего и внешнего расстояние до иллюстрации должно быть больше, чем расстояние между строками блока:

Уважаемые советчики! Присылайте в рубрику собственные макеты сайтов, приложений и печатных изданий с конкретными вопросами.

P. S.

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


Поделиться
Отправить

Комментарии

Антон Реут
24 февраля 2014

А зачем вообще прибивать всё к левому краю, где заведомо красный круг делает междустрочный интервал гигантским?

Я бы вообще сделал вот так и добавил бы шапке немного смысла — перечисление сервисов и ссылки на каждый:


24 февраля 2014

Антон!

В европейской вёрстке по умолчанию бывает левый флаг, выключка и центровка. Остальное — вычурная акциденция, которая может быть использована сознательно как некий фирменный приём. Но я бы не рекомендовал плавающие строки как рабочий инструмент — их как раз очень любят «операторы типографий» из недавнего совета Антона Шнайдера.

Кроме того, ваш вариант нарушает правило внутреннего и внешнего:

Алексей Бражников
25 февраля 2014

Можете посоветовать почитать что-нибудь на эту тему?

Денис Дрожжов
25 февраля 2014

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

Сергей Васильев
23 октября 2014

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

Если же это умышленный ход — когда, почему и по какому принципу имеет смысл его использовать? Спасибо.

Никита Матвеенко
22 сентября 2016

Артём, мне кажется, что красный круг «№1» выбивается из блока заголовка, выглядит немного чужеродно для него, особенно способствует этому яркий цвет. Денис выше верно заметил, что с таким элементом тяжело сделать визуально опрятный вид страницы. Не лучше ли осветлить круг и сделать его как бы на заднем плане?

Андрей Скляров
1 апреля 2018

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

Максим Свалов
27 апреля 2020

Сергей, в вашем примере многое вызывает вопросы:
1. Зачем везде курсив? Может быть «фишка» журнала?
2. Один абзац с красной строки, остальные нет.
3. Не хватает отступов перед вопросами.
4. Слишком маленькие поля страницы.
5. Слипшиеся абзацы.
6. На потолке не хватает светильников ;-)

Анастасия Савчик
11 мая 2020

Мне кажется, «в электронном виде» можно оставить в подзаголовке:

ЖУРНАЛ N1 ДЛЯ БУХГАЛТЕРА
В электронном виде, с бесплатной правовой базой
и сервисами для бухгалтера


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

3 4 1




Недавно всплыло

1 Это какие‑то другие пиксели? Как они соотносятся? 2 Как написать хорошее резюме? 7 Без стоп-слов текст мне кажется сухим, чёрствым, грубым и резким 33