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

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



Паша!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

P. S.

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

P. P. S.

Закрыт набор в Школу стажёров.

 
Мы напишем вам, если освободится место или когда будет открыт набор. Без спама.

Поделиться

Комментарии

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

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

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


24 февраля 2014

Антон!

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

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

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

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

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

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

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

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

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


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

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

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

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

2 Делаю визитку для хозяина автомастерской. Вторая часть 6 3




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

Как вежливо и корректно объяснить людям, хорошим знакомым, почему мы больше к ним не обращаемся? 1 Зачем тратить ресурсы клиента на переговоры, если их можно было бы направить, скажем, на улучшение продукта? 2 Что там дальше с решением задач? 6 Что такое динамизация? Часть шестая 1



© 2007—2016

Запрещённые слова
Пишите: artgorbunov@artgorbunov.ru