Артём
18 августа 2014

Что такое «правило внутреннего и внешнего»?



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

Современный дизайнер так и собирает знания по крупицам — из книг, советов коллег, замечаний арт-директора.

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

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

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

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

Рассмотрим заголовок из прописных букв:

МЕТРОПОЛИТЕН

Штрихи каждой буквы заключают в себе её внутреннее пространство. Пустота внутри буквы П в середине слова больше, чем внешнее расстояние до соседних букв О слева и справа. Из-за этого возникает ощущение, что соседние буквы вторглись в личное пространство друг друга, а вся надпись — слиплась.

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

Метрополитен

Каждая буква обрела значение и независимость, а заголовок — архитектурную торжественность.

Добавим к заголовку слово:

Московский метрополитен

Слова отделены между собой пробелом. Для каждого слова расстояние между буквами играет роль «внутреннего», а межсловный пробел — роль «внешнего». Из-за того что пробел лишь немногим больше межбуквенного расстояния, слова слиплись.

Сначала попробуем изменить соотношение внутреннего и внешнего, уменьшив «внутреннее» — разрядку между буквами, но так, чтобы она не стала меньше расстояния между собственными штрихами букв. Всегда держим в голове, что «внутреннее» на одном уровне служит «внешним» на другом:

Московский метрополитен

Пробел остался неизменным, но теперь его достаточно, чтобы отделить слова.

Теперь вместо уменьшения разрядки попробуем отделить слова иначе — переносом на следующую строку:

Московский
метрополитен

Межстрочный просвет сравним с межбуквенным расстоянием. Из-за этого буквы надписи сливаются в рисунок шахматной доски. Увеличим «внешнее» — интерлиньяж:

Московский
метрополитен

Надпись вернула себе имперское достоинство.

А что если не увеличивать интерлиньяж, а изменить шрифт на более узкий?

Московский
метрополитен

В узких буквах меньше внутренние просветы, значит, они не требуют такой большой разрядки:

Московский
метрополитен

При том же кегле и интерлиньяже слова лучше отделились друг от друга. Надпись стала компактнее без ущерба для внутреннего пространства.

Вернёмся к «имперской надписи» и добавим к ней подзаголовок:

Московский
метрополитен

имени В. И. Ленина

Подзаголовок «влез в интерлиньяж» заголовка — то есть оказался ближе к нему, чем его собственные строки друг к другу. Нет проблем, увеличим «внешнее»:

Московский
метрополитен

имени В. И. Ленина

Допустим, наш заголовок должен уместиться на табличке фиксированных габаритов:

Московский
метрополитен

имени В. И. Ленина


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

Московский
метрополитен

имени В. И. Ленина


Заметим, что для одного и того же кегля мы получили разные приемлемые соотношения внутренних и внешних расстояний. Контраст важнее конкретного значения пропорции — это даёт гибкость верстальщику. Идеальное «серебро набора» — это лишь минимально возможный контраст внутреннего и внешнего всех элементов для нейтрального спокойного чтения. При увеличении контраста внутреннего и внешнего текст становится заметнее и выразительнее.

Базовое правило типографики:

внутреннее ≤ внешнее


P. S.

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

P. P. S.

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

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

Поделиться

Комментарии

Евгений Закурдаев
18 августа 2014

Нужна ли разрядка между инициалами и точкой? И отсутствие пробелов после точки также смущает. В итоге точки стоят где-то посередине между буквами.

Сергей Конаков
18 августа 2014

Артём, а что такое акценты в вёрстке? Регулярно вижу «акценты расставлены правильно» или «акценты расставлены неправильно», но не понимаю, о чём речь.


18 августа 2014

Евгений!

Согласен, подправил. И всё же, на мой вкус, не совсем верно приклеивать знак препинания к прописной букве, как будто бы разрядки совсем нет. Тем более, если мы имеем в виду инициалы на архитектурной табличке — должна быть толика древнеримской торжественности.

Андрей Гуляс
18 августа 2014

А вокруг тире пробел или тонкая шпация?


18 августа 2014

Андрей!

Вот и решите по «правилу внутреннего и внешнего» для своей ситуации :-)

Фокус в том, что тонкой шпации не существует, это просто отступ. Тем более, в наше время.

Дима Гинтофт
18 августа 2014

Умеренная разрядка жирных узких строчных, например при наборе Юниверсом, может повысить удобочитаемость.

Роман Конопатко
18 августа 2014

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


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

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

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

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

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




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

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



© 2007—2016

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