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

Во‑первых, всегда есть то, что называется теорией близости. Давайте представим себе двух девушек, которые сидят в кафе. У каждой из них есть мобильный телефон, есть бокал с чем‑нибудь, что они любят выпить, они между собой общаются. Каким образом мы понимаем, где чей мобильный телефон и где чей бокал? Очень просто. Если к девушке ближе какой‑то мобильный телефон, мы сразу думаем, что это её мобильный телефон. Если положить этот предмет ровно посередине между девушками, то мы уже не будем понимать, чей это телефон или бокал.

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

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

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

Это какой‑то плакат, который Коля Товеровский стал собирать на основе общения с Артёмом Горбуновым. Он попытался для себя собрать правило, как ставить заголовок относительно текста в зависимости от кегля этого заголовка и количества строк. И всё в таком духе. От этого плаката мозг слегка взрывается. Если посмотреть, то здесь заголовок одного кегля, заголовок другого кегля. Начинаются какие‑то правила: «Вот что‑то вторглось в интерлиньяж, здесь заголовок отвалился. Вот это правильно и вот это почему‑то правильно, а здесь что‑то ещё как‑то влезает». В общем, крыша едет.

Когда я посмотрел на эту штуку, я подумал: «Господи! Как вообще это всё можно запомнить и применять?» Оказывается, большинство дизайнеров примерно в таком мире и живёт — мы все знаем какие‑то обрывки правил. Слова, написанные прописными буквами, надо разрежать. А строчные разрежать не надо. Заголовок должен стоять на таком‑то расстоянии от текста, если он такого размера, а если такого, то надо какое‑то другое расстояние.

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

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

Давайте пойдём в Фигму и попробуем посмотреть, что это обозначает:

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

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

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

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

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

Теперь давайте возьмём и наберём не одно слово, а два: «Легенда об Уленшпигеле»:

Что здесь произошло? У нас теперь соотношение внутреннего и внешнего стало сложнее. Есть расстояние между штрихами, уровнем выше есть расстояние между буквами, а потом ещё есть расстояние между словами. И правило нам подсказывает, что расстояние между словами должно быть существенно больше, чем расстояние между буквами, чтобы мы могли слова отделить друг от друга. То есть если я здесь это расстояние убью, то мы перестанем понимать, что происходит, поэтому банальная логика говорит о том, что если вдруг вы что‑то решили набрать прописными и эти буквы разредили, то пробелы тоже надо будет увеличить, иначе всё слипнется.

Теперь я ещё усложню историю. Я напишу заголовок в две строки и всё увеличу:

Что здесь произошло? История ещё больше усложнилась: у нас есть расстояние между буквами, расстояние между словами, а ещё появилось расстояние между строками. И расстояние между строками — это внешнее по отношению к расстоянию между словами. И сейчас предлог «об» выглядит как что‑то отвалившееся и что‑то независимое. В этот момент правило внутреннего и внешнего подсказывает: увеличь интерлиньяж. Делаем это — и становится гораздо лучше:

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

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

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

Так как в узком гротеске расстояние между штрихами существенно меньше, мы можем и существенно уменьшить разрядку:

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

И тоже станет всё хорошо. Можно даже всё написать в одну строчку:

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

Теперь я вернусь к нашей антиквенной исторической надписи. Допустим, я добавлю сюда имя автора. Шарль де Костер. Сделаем его поменьше, допустим, это будет бирка. Я его как‑нибудь поставлю:

Что произошло? У нас опять нарушено внутреннее и внешнее. Расстояние от строчки с именем автора прилипло к заголовку, к названию книги. Более того, расстояние между словами в имени автора тоже больше, чем расстояние от строчки автора до строчки названия.

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

Теперь я возьму и поставлю ещё всё на плашку. Потом мы это всё выровняем:

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

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

Ещё можно плашку как‑нибудь срезать или скруглить, но это уже оставим за скобками.

Давайте попробуем проанализировать, что не так на этой картинке:

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

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

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

Я хочу сейчас поделиться одним трюком, который, надеюсь, будет полезным. Когда мы рассуждали о том, что расстояние между строками заголовка больше, чем расстояние от заголовка до бирки «Предприниматель», я спросил, как это лучше всего исправить. И там варианта всего два: или увеличивать отступ до бирки, или уменьшать отступ между строчками заголовка. Мы начали с того, что увеличили отступ до бирки. На мой взгляд, это не самый лучший ход, потому что, как только мы увеличиваем какое‑то расстояние, нам сразу же надо начинать пересматривать другие внешние расстояния. Отступ от заголовка до бирки — внутреннее по отношению к отступу от заголовка до текста. И как только мы увеличили отступ до бирки, нам сразу надо проверять — а не надо ли ещё и до текста увеличить? А если его увеличим, надо сразу смотреть — а расстояние до ссылок не надо увеличить? А если мы и его увеличили, то нам надо ещё на все расстояния до края экрана оглядываться...

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

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

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

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

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

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

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

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

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

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

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

Вот перед нами скриншот интерфейса, который в своё время сделали в бюро. Это интерфейс корпоративной школы «Главбуха»:

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

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

Последняя штука. Кусочек интерфейса «Медузы». Я зашёл в какую‑то статью и хочу обратить ваше внимание на этот тулбар здесь наверху: