Паша!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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