Огромные буквы: актуальный тренд в веб-дизайне. Часть 1

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

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

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

На самом деле, я заметил это много лет назад, и именно поэтому создал проект Better Web Type. Там можно найти мои первые шаги в изучении крупных, жирных, а иногда и узких шрифтов.

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

Форма регистрации, которая позволяет подписаться на бесплатные уроки — самый заметный элемент на странице. Было важно донести до пользователей, что они могут оформить подписку, поэтому мне пришлось расположить ее на первом экране, бок о бок с заголовком. Нужно признать: когда дело доходит до размещения элементов в интерфейсе, количество вариантов ограничено 💁🏻‍♂️

Но позднее, работая над дизайном обложки своей книги, я заметил кое-что интересное. Давайте рассмотрим несколько примеров использования крупной типографики в печати.

‍1. Крупная типографика в печати

Мое увлечение огромными шрифтами пришло из полиграфии и графического дизайна. Крупные шрифты были обычным явлением в проектах Массимо и Леллы Виньелли, причем они всегда сочетались с сеткой — это отличительная черта их работ. Вполне логично, что, будучи поклонником их творчества, я стал интересоваться такой типографикой.

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

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

Я искал вдохновение в существующих обложках книг, таких как «Уолден и другие сочинения», «Мужество безнадежности» и шведское издание “1984” Оруэлла, изучая различные способы размещения названия «Better Web Type for a Better Web» на обложке своей книги. В конце концов, мне удалось придумать дизайн, которым я остался доволен.

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

Я разместил название на обложке, а негативное пространство вокруг него создало прекрасный контраст. Поскольку обложка была очень простой, мне не пришлось использовать сетку. Пустое пространство вокруг заголовка сформировало удобные “карманы”, куда я добавил дополнительную информацию (имя автора и номер издания).

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

Однако в последнее время я начал замечать примеры использования крупного шрифта и в интерфейсах. Похоже, веб-типографика наконец-то становится более смелой. Давайте рассмотрим несколько примеров.‍

2. Крупная типографика на веб-сайтах

Одним из первых примеров, попавшихся мне на глаза, была страница вакансий на сайте InVision. В качестве основного шрифта дизайнер использовал Aktiv Grotesq, в заголовке — размером 150 пикселей! Больше всего меня удивил выбор начертания — Medium (500) и то, как хорошо оно смотрится в этом размере.

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

Следующий пример, на который я наткнулся, — веб-сайт с презентацией шрифта Acumin Pro. Именно этот шрифт я использовал для своего проекта Better Web Type. Он имеет несколько начертаний и узких версий, что делает его чрезвычайно гибким в использовании. В примере, представленном ниже, мы видим начертание black в размере 606 пикселей! 🤯 Остальные заголовки на сайте не такие крупные, но в целом лейаут смотрится гармонично.

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

Веб-сайт дизайнера Луки Нарди сочетает два разных шрифта крупных размеров: Gallient и системный шрифт по умолчанию. Размер Gallient составляет 164 пикселя, а системного шрифта — 179 пикселей. Вероятнее всего, Лука выбрал разные размеры, чтобы сбалансировать шрифты. В противном случае, один из них оптически выглядел бы больше другого. При этом для обоих шрифтов установлено начертание normal (400).

Когда я прокрутил страницу вниз, я заметил, что размер заголовка “Selected Project” больше, чем размер основного заголовка на первом экране (216 пикселей). Здесь Лука нарушает базовые правила веб-дизайна: заголовки одного уровня должны быть одинакового размера, а основной заголовок крупнее всех остальных. Например, здесь все заголовки второго уровня могли бы иметь размер 120 пикселей. Тем не менее, на его сайте такое решение смотрится круто.

Обратите внимание на позиционирование слов “Selected” и “Project”: они не выровнены ни по левому, ни по правому краю. Это целенаправленное смещение, цель которого — создать более динамичный дизайн. 

Тот факт, что Лука использует системный шрифт и меняет его размер в соответствии с размером шрифта Gallient, может создавать дополнительные сложности. Такой подход хорошо работает на Mac OS, где системным шрифтом является San Francisco, но так ли это в случае с другими операционными системами? У каждой из них по умолчанию есть собственный системный шрифт, размер которого необходимо настраивать дополнительно.

Последний веб-сайт, который я хочу рассмотреть — это портфолио Люка Мейера. Он использовал шрифт Vanguard в начертании bold (600) размером 194 пикселя. Заголовок отлично сочетается с крошечным шрифтом справа — это прекрасный пример использования контраста в типографике для создания интересного и динамичного дизайна. 

Обратите внимание, что лейаут напоминает дизайн InVision, который был представлен в самом начале статьи. Опять же, самым очевидным решением было бы выровнять все элементы по левому краю, но Люк сделал наоборот. Благодаря этому создается ощущение, что контент на его сайте перемещается из левого верхнего угла в правый нижний. Такой прием направляет взгляд пользователя к последнему кейсу в портфолио Люка.

Выводы

Пришло время подвести итоги.

• Рабочая область фиксированного размера и минимальное количество элементов упрощают работу с крупной типографикой в полиграфии и графическом дизайне.

• В отличие от книг, веб-сайты, помимо текста, содержат и другие элементы, часто интерактивные.

• Шрифт огромного размера всегда имеет небольшую высоту строки. Возможно, это связано с тем, что огромные буквы занимают больше места, и уменьшение высоты строки — способ минимизировать эту проблему. Кроме того, по-моему мнению, такая типографика смотрится лучше.

• Сетки делают лейауты с крупной типографикой динамичными и предотвращают хаос: элементы должны быть выровнены, в их расположении должна прослеживаться какая-то логика. Иногда это усиливает контраст, как мы видели в примерах InVision и Luke Meyer.

• Для интерфейсов с крупной типографикой характерны динамический дизайн и позиционирование текста. Если вы используете на сайте огромный заголовок, следует более креативно подходить к размещению других элементов.

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

До встречи во второй части 😉