Правило внутреннего и внешнего

Современный дизайнер все эти правила собирает по крупицам: какие‑то узнаёт из книжек, какие‑то узнаёт у старших товарищей, арт‑директора и так далее.

Например, когда я только начинал свою работу дизайнером, мне на глаза попался плакат, который сделал Коля Товеровский после консультации с Артёмом Горбуновым. Плакат говорил о том, как ставить заголовок относительно текста в зависимости от того, какой кегль заголовка, сколько строк в тексте, сколько строк в заголовке:

Я довольно долго смотрел на этот плакат и офигевал, потому что не понимал, как всё это можно запомнить. Для меня это выглядело как набор исключений без какой‑либо системы, который просто надо помнить.

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

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

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

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

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

Давайте посмотрим, как это работает на примере:

Проанализируем результат по правилу внутреннего и внешнего.

У нас есть расстояние между буквами, расстояние между словами и, что важно, расстояние внутри букв. Так как весь текст набран прописными буквами, расстояния внутрибуквенные достаточно большие. Начинает казаться, что они смешиваются с расстояниями между буквами. То есть расстояние внутри букв очень похоже на расстояние между буквами. В случае буквы «П» это расстояние вообще гораздо больше:

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

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

Результат:

Посмотрим, что можно сделать дальше. Предположим, что нам нужно набрать текст в две строки:

В чём здесь проблема с внутренним и внешним? В том, что элементов стало больше. Раньше был уровень: буква, слово, строка. А теперь: буква, слово, строка и две строки. Появляется отступ между строками.

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

Нужно увеличить интерлиньяж:

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

Предположим, что к нам пришёл начальник, арт‑директор или клиент и сказал, что нужно поменять шрифт. Поставим шрифт «Дин»:

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

Для начала нужно поменять расстояние между буквами. Можем спокойно уменьшить трекинг:

После этого видим, что можем спокойно уменьшить и интерлиньяж:

Более того, мы даже можем чуть‑чуть уменьшить пробел:

При этом надо обязательно смотреть, чтобы пробел был не меньше, чем расстояние между буквами. Это позволит уменьшить интерлиньяж ещё чуть‑чуть:

Вернёмся к антиквенной надписи. Добавим ещё какую‑нибудь строчку, например имя автора:

Это означает, что в нашей системе появился ещё один элемент и появилась ещё одна пара внутреннего и внешнего. Если раньше у нас было расстояние между буквами, словами и строками, то теперь добавилось расстояние от одного элемента до другого. Вертикальный отступ между двумя элементами — это внешнее по отношению к расстоянию между строчками названия и к пробелам в имени автора.

Сделаем заголовок с именем автора помельче и не будем набирать его прописными:

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

Так как элементов стало больше, можно попробовать сделать поменьше трекинг, потом — интерлиньяж, потом — расстояние до строчки с автором. Вёрстка станет более компактной:

Благодаря этому у нас будет больше свободы, если будет нужно поставить это на настоящую обложку книги.

Предположим, что в нашей системе появляется плашка. Это значит, что у нас появился ещё один комплект внутреннего и внешнего. Причём появился он со всех сторон, то есть по вертикали и по горизонтали:

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

Теперь разберёмся с вертикальными полями. Посмотрим, где самое большое внешнее внутри блока. Это расстояние между именем автора и названием. Увеличиваем поля так, чтобы они были больше, чем это расстояние:

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

Кажется, что получилось довольно развесисто. То есть наша композиция занимает очень много места. Возможно, имеет смысл сделать ещё чуточку компактнее.

Я начинаю делать это с самого маленького внутреннего: уменьшаю трекинг, интерлиньяж и пробел. При уменьшении пробела после «ОБ» слежу, чтобы он был не меньше, чем расстояние между буквами. После этого я уменьшаю расстояние между строчками. И напоследок чуть‑чуть увеличиваю поля, чтобы они были ощутимо больше, чем внутреннее расстояние между двумя строчками:

Напоследок можно проверить ещё одну версию: что, если расстояние от строки до названия книги будет почти равно расстоянию между строками. Так мы сможем сделать вёрстку ещё чуть‑чуть компактнее:

Эксперимент удался.

Когда я вношу изменения в макет — изменяю расстояния, кегль, шрифт или добавляю что‑то в композицию — я всегда переоцениваю все расстояния в макете. Это связано с правилом внутреннего и внешнего. Как только у вас появляется новое соотношение, нужно переоценить всё остальное. Поначалу это занимает много времени, но если вы постоянно используете это правило, позже это доходит до автоматизма.

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

Текст набран более‑менее адекватным шрифтом «ПТ Санс», который заслуживает доверия. Это качественный шрифт, в котором шрифтовик позаботился о том, чтобы расстояния между буквами были хорошо настроены. Разные сочетания символов дают разные расстояния между ними: в зависимости от того, какая буква стоит после текущей, расстояние между ними меняется.

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

Конечно, если вы вдруг решите набрать текст прописными, и у вас будет заслуживающая этого причина, тогда придётся что‑то разредить, озаботиться внутренним и внешним:

Бывает, что нужно набрать что‑то особенно крупно. Например, мы хотим сделать фактоид — большую цифру, которая привлекает внимание:

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

Вот так наш фактоид выглядит хорошо с точки зрения внутреннего и внешнего.

Вот макет, созданный студенткой Школы бюро:

Это страница «О себе», на которой есть фотография, имя студентки, рассказ о себе и пара ссылок. Проанализируем, где здесь внутреннее, где внешнее и где правило внутреннего и внешнего нарушается.

Первое, что нужно сделать, — это немного подвинуть заголовок, потому что он убежал налево:

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

Теперь давайте рассмотрим этот блок:

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

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

Заодно увеличится и расстояние до текста: контраст между ним и межстрочным просветом будет заметнее.

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

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

Было и стало:

Рассмотрим ещё один пример. Это работа другой студентки, но это мобильная версия страницы «О себе». Проанализируем, где здесь внутреннее, где внешнее и где нарушено правило внутреннего и внешнего:

Внешнее — поля вокруг текста, заголовка и строки со ссылками. Верхнее поле сопоставимо с межстрочным просветом заголовка. Этот же просвет в заголовке больше, чем расстояние между заголовком и текстом. Наконец, нижнее поле сопоставимо с расстоянием от текста до строки со ссылками. Конечно, можно сказать, что формально правило не нарушено — нижнее поле чуточку больше отступа от ссылок до текста. Однако человеческое зрение — неточный инструмент, и в данном случае из‑за короткой последней строки текста нам будет казаться, что отступ над ссылками больше, чем под ними.

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

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

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

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

Было и стало:

Разберём частный случай нарушения внутреннего и внешнего пространства — так называемое «влезание в интерлиньяж».

Соберём небольшой макет из заголовка и текста:

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

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

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

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

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

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

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

Такого допускать нельзя, если только за этим не стоит какая‑то идея, которую ваш зритель или читатель сможет прочитать и осознать.

В роли заголовка или текста может выступать картинка, поле ввода, кнопка и так далее. Серый прямоугольник и текст влезли в интерлиньяж заголовка:

Мы увидели, что в некоторых ситуациях сложно оценить, влезает ли текст в интерлиньяж заголовка. Это сложно потому, что мы не видим этот интерлиньяж, ведь заголовок состоит из одной строки:

Следует помнить, что интерлиньяж всегда есть у всего. Если вы выберете строчку текста в любом графическом редакторе или даже в свёрстанной странице, там всегда будет какое‑то значение интерлиньяжа. То есть интерлиньяж — это неотъемлемое свойство текста.

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

Тем не менее я предлагаю учитывать два аспекта.

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

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

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

В Высшей школе Главбуха бухгалтеры проходят образовательные курсы и повышают свою квалификацию. Им доступны различные учебные программы:

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

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

Рассмотрим пример, как внутреннее и внешнее сыграло против дизайнера. На новостном сайте есть плашка, которая залипает по мере прокрутки. На этой плашке размещены ссылки на социальные сети, рекламная ссылка и крестик: