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

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



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

  • про­пис­ные нужно разрежать,

  • строч­ные нельзя разрежать,

  • вер­ти­каль­ные штрихи строч­ных и про­пис­ных должны сто­ять через рав­ные промежутки,

  • раз­рядка про­пис­ных должна быть меньше интерлиньяжа,

  • про­бел между стро­ками про­пис­ных букв не может быть меньше высоты буквы,

  • интер­ли­ньяж дол­жен быть больше меж­с­лов­ных пробелов,

  • при мини­маль­ном интер­ли­ньяже ниж­ние вынос­ные эле­менты верх­ней строки почти каса­ются верх­них вынос­ных эле­мен­тов сле­ду­ю­щей строки,

  • чем длин­нее строка, тем больше интерлиньяж,

  • интер­ли­ньяж не дол­жен быть больше внеш­них полей,

  • эле­менты списка должны иметь между собой допол­ни­тель­ный отступ больше интерлиньяжа,

  • номер стра­ницы дол­жен сто­ять ближе к полосе, чем к краю страницы,

  • заго­ло­вок в тек­сте дол­жен сто­ять ближе к сле­ду­ю­щему абзацу, чем к предыдущему,

  • рас­сто­я­ние от заго­ловка до абзаца не должно быть меньше меж­строч­ного интер­вала заголовка,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии

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

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

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

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


18 августа 2014

Евгений!

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

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

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


18 августа 2014

Андрей!

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

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

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

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

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

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

Наталья Буцаева
14 августа 2016

Это вообще возможно запомнить? Или с опытом начинаешь щёлкать эти правила как семечки?

Николай Андрианов
25 августа 2017

Я считаю, что на итоговом варианте все буквы смотрятся разреженными.

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

Елеонора Харламова
20 ноября 2017

Здравствуйте многоуважаемое бюро, зашла в тупик.

Делаю брошюру, у меня есть заголовок, подзаголовок и абзацы текста, как их правильно раставить?

Немного сбивают с толку пробелы между строками (пожелание заказчика)


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

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

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

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

Влезание в интерлиньяж 5 Математика в типографике




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

При клике на кнопку нужно плавно прокрутить страницу к форме 2 Сайты для слабовидящих 2 В бюро есть таймтрекинг для сотрудников? 5 Хочу научиться сторителлингу 12