Типографика с негативным пространством

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

Это перевод статьи Кристоффера Батлера Negative-Space Typography.

Когда я просматриваю дизайн-документацию, то в первые несколько секунд обращаю внимание на несколько вещей. Все они связаны с тем, насколько легко сканировать макет страницы.

Недавно я перечитывал книгу Ричарда Пулина «Школа дизайна. Макет.» и вспомнил, насколько точно он определяет понятие «макет»:

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

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

Позвольте показать вам, что я имею в виду.

Ниже приведён пример двух простых макетов.

Макет (А) имеет одинаковые интервалы между всеми строками текста — это очень распространённый приём. Я вижу его практически во всех проектных документах, которые просматриваю, и вижу это повсюду - в Интернете, приложениях и т.д.

В макете (B) между строками текста задаётся переменный интервал, пропорциональный размеру шрифта и учитывающий взаимосвязь между контентом.

Какой вариант лучше? (B) лучше всегда.

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

Взгляните на изображение ниже. Я обозначил строки текста (и их различный вес/плотность) серыми прямоугольниками.

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

В макете (A) структура подразумевает, что каждый объект связан друг с другом одинаково, образует единую группу.

В макете (B) структура более сложная. Интервалы подразумевают, что объекты связаны друг с другом по-разному: одни группируются, другие стоят отдельно. Это более точно соответствует большинству текстов.

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

Я всегда советую дизайнерам вернуться к изменению негативного пространства в своих шрифтовых системах с той же тщательностью, с какой они изменяют компоненты позитивного пространства.

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

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

Больше полезного контента в уютном тг канале Дизайн Шар