Обсудим, как на типографику влияет форма объектов и какие трюки в связи с этим можно проворачивать.
Предлагаю посмотреть на такую картинку:
Она демонстрирует, как относиться к тому, что есть какие‑то объекты и у них есть какие‑то торчащие элементы: или просто прописные буквы, или выносные нижние элементы, или у стрелочек может что‑то торчать и так далее. Эта картинка всё это иллюстрирует. По умолчанию мы считаем, что выравниваем всё по основной массе. То есть если у нас слово набрано обычным — есть одна прописная буква, всё остальное строчное, то мы считаем, что главная ось, по которой надо выравниваться по верху, — это верх строчных букв.
Если мы говорим про низ, то там есть базовая линия. Соответственно, мы всё по ней выравниваем.
Если мы хотим что‑то выровнять — как шашлык на шампур всё насадить, то, конечно же, равняемся на строчные буквы, проходим по их центру. То есть не по центру прописной буквы, а по центру строчных, потому что их гораздо больше, а это просто маленькая аномалия, которая чуть‑чуть торчит.
То же самое с иконками — мы стараемся сделать так, чтобы визуально мелкие аномалии, которые торчат, не сбивали нас с толку. Здесь и происходит — хвостик какой‑то чуть‑чуть торчит наверх, ну и пофиг, он не настолько важен, как общий массив стрелочки.
Но иногда всё‑таки надо брать в расчёт и строчные, и прописные буквы. Вот перед нами плакат, который я в своё время сверстал, чтобы сделать пример для курса:
Здесь хочу обратить внимание на кое‑какие тонкости. Вот у меня есть заголовок: «День открытых дверей». Он выравнивается со строчками с адресом школы. Если внимательно присмотреться, то они выравниваются по верху строчных букв. Почему? Потому что банально эти строчные буквы здесь гораздо ближе к этому правому блоку, чем вот эта буква «Д». А здесь этих строчных букв гораздо больше, чем прописных. Плюс ещё контраст по высоте между строчными и прописными буквами очень маленький, поэтому, даже если вот эти прописные, строчные торчат, они не так сильно бесят. Кажется, что всё вполне себе нормально выровнено, хотя по факту и буква «Д» торчит наверх, и здесь буква «Ш», и цифры тоже торчат. Ну и пофиг.
Ещё обратите внимание, что я заморочился и выровнял улицу Паустовского со словом «день». Просто такая маленькая аккуратность.
А вот нижний блок у меня свёрстан немножко иначе. Здесь у меня надпись «Экскурсия по школе» с «15 мая» выровнена примерно по верху цифры 15, а не по верху слова «мая». Почему? Потому что торчащие цифры в надписи «15 мая» гораздо ближе к «экскурсии». И если бы я выровнял по «мая», там бы создалось ощущение, что 15 всё‑таки как‑то торчит. Поэтому я сделал как сделал.
Но здесь я мог себе позволить такие эксперименты, потому что я делаю какой‑то штучный плакат, а не, скажем, динамический сайт с кучей страниц, и я мог всё здесь очень филигранно подстраивать. Когда речь идёт про что‑то большое — сайт, интерфейс, журнал, который издаётся каждый месяц, там всё‑таки придётся принимать какие‑то решения и быть готовым к тому, что в некоторых случаях что‑то будет не очень хорошо торчать или, наоборот, как‑то нехорошо выравниваться. Но это придётся пережить.
Бывает, что у нас разные элементы вёрстки берут и меняют свои роли.
Вот пример какого‑то сайта, в котором вроде бы всё набрано текстом:
Но дизайнер взял и сделал так, чтобы в роли слов в этом тексте выступили ещё и картинки, и даже какие‑то отдельные блоки текста. И если открыть этот сайт в браузере и менять ширину страницу, то все эти элементы будут вести себя как текст — переноситься и так далее.
Это такой клёвый приём. Иногда очень клёво, можно кучу информации таким образом передать. И нередко очень классно выглядит, просто хочется изучать. То есть здесь эта штука, с одной стороны, выглядит хаотично, с другой стороны, и ничего страшного, просто интересный способ подачи информации. Хочется всё это изучать, разглядывать, выглядит очень богато и нарядно. Богато в том смысле, что много всего.
Вот ещё пример того же самого:
Здесь в роли слов выступают не то что мелкие блоки текста. Тут даже какие‑то графики ещё возникают. Прямо можно представить, как я какие‑то слова прочитал, прочитал мелкий текст, потом посмотрел график и пошёл читать. В целом это обложка какого‑то журнала или плакат, выглядит тоже очень интересно, хочется поразглядывать.
Вот пример, когда тоже тексты, набранный вертикально и горизонтально, живут в одной вселенной, то есть они выступают в роли прямоугольников:
Это сочетание выглядит тоже очень классно и контрастно. Плюс здесь ещё логотип тоже выступает чуть ли не в роли буквы, которая присоединяется к этому «Арт‑дому» и «икзибишн».
Картинка всё на ту же тему. Какие‑то даты, ещё что‑то выступает в роли буквы:
И так по‑дизайнерски разорвали название месяца, но выглядит клёво. Хорошо выглядит именно благодаря тому, что оно по всем метрикам подружилось, выровнялось сверху и снизу.
Здесь функции перемешались:
Есть колонка какого‑то мелкого текста. И в то же время заголовок пытается играть по этим правилам. То есть он выстроился по той же самой сетке, что и колоночки выше, в результате такое очень необычное сочетание, хочется изучать.
Вот обложки журнала «Метро»:
Здесь тоже в шапке разные элементы встроились во вселенную самого логотипа. В результате получился клёвый сборный якорный объект в углу.
Эту штуку мы с вами уже видели. Здесь сами иллюстрации встроились во вселенную заголовка:
Здесь между заголовком встали ещё какие‑то дополнительные подписи, объясняющие, что это передо мной такое. Тоже иногда так можно:
Это какой‑то рекламный банер в мексиканском аэропорту:
Обратите внимание, как здесь объединились функции и логотипа, и названия компании, и сразу ещё и адрес сайта — всё в одной строчке.