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

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

Я выступаю за более смелое и дерзкое использование типографики в вебе с тех пор, как начал проект Better Web Type. Шрифт без засечек для заголовков и с засечками для основного контента — это скучно. Как и заголовок, расположенный сверху и выровненный по центру. Сейчас у нас есть инструменты для проектирования более интересных сайтов с классной типографикой, но большинство дизайнеров по-прежнему выбирают самый безопасный путь.

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

Когда я говорю "огромный шрифт", я имею в виду шрифт, который больше обычного. Я искал заголовки, которые доминируют в интерфейсе. Иногда они сочетаются с графикой, но чаще всего это не так. Они настолько внушительны, что обычно не нуждаются в графических “помощниках”. Они сами по себе делают сайт особенным и запоминающимся. Давайте рассмотрим еще несколько примеров и проанализируем их.

Классные сайты с крупной типографикой

Первый сайт, который привлек мое внимание, — портфолио Коннора Мерфи. Коннор выбрал для основного заголовка “I'm Connor, a digital designer based in Denver” шрифт Haas Grotesk. Самое поразительное, что он использовал обычное начертание. Я думаю, такой шрифт, смотрелся бы скучно в "нормальном" размере. Но Коннор осмелился сделать типографику крупной, и благодаря этому его сайт выглядит великолепно.

На моем Macbook Pro размер основного заголовка составляет 176 пикселей. Коннор вводит две контрольные точки (breakpoints) для масштабирования шрифта, чтобы он хорошо смотрелся на экранах всех размеров. Одна точка для маленьких экранов, другая — для очень больших. 

Он также переключается между единицами измерения размера шрифта, используя em для самых маленьких и самых больших экранов и vw для всех промежуточных размеров. Таким образом, типографика является одновременно гибкой и отзывчивой (fluid + responsive).

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

Следующий пример, который я хочу рассмотреть — страница вакансий на сайте InVision. Заголовок здесь набран шрифтом Activ Grotesk, а его размер составляет 156 пикселей на экране моего MacBook. 

На сайте используется одна контрольная точка, предназначение которой — не допустить, чтобы размер основного заголовка превысил 160 пикселей на очень больших экранах. До этой точки размер шрифта гибко настраивается по формуле: (calc(88px + (72 * (100vw - 800px)) / 800)), которая включает пиксели и vw. 

Когда я изменяю дефолтный размер шрифта в браузере, размер текста на сайте не меняется. Благодаря этому, создатели сайта могут быть уверены, что он отлично выглядит на экране любого размера, но можно ли назвать такое решение “доступным”? Мы вернемся к этому вопросу позже.

Шрифт, который использует команда InVision, не похож на акцидентный. Чтобы сделать его поинтереснее, они немного сократили интервал между буквами при помощи специальной формулы. Благодаря этому заголовок смотрится отлично 👌 На скриншоте ниже вы можете увидеть, как выглядел бы заголовок с обычным межбуквенным расстоянием:

Еще одно дизайн-портфолио — на этот раз сайт Изабель Моранты. Первый экран получился простым и минималистичным: огромный заголовок "Digital Designer" черного цвета, набранный шрифтом Antiqua Roman (в размере 319 пикселей на моем MacBook), на светлом фоне. Он излучает изысканность. 

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

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

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

Интересно, что слова в заголовке набраны шрифтом разного размера. Если присмотреться, слово "Digital" чуть меньше, чем слово "Designer". Это было сделано намеренно, чтобы выровнять их оптически. Вторая буква "I" в первом слове идеально встает над буквой "I" во втором. Изабель нарушает некоторые правила, но делает это мастерски. Во-первых, заметить разницу в размерах довольно трудно, а во-вторых, для такого решения имелись веские причины.

Последний сайт, который я хочу проанализировать, — презентация шрифтов Mona и Hubot Sans от GitHub. Новые вариативные шрифты были выпущены на этой неделе. Я был просто в восторге от потрясающей огромной типографики в верхней части сайта.

Конечно, заголовок набран шрифтами Mona и Hubot Sans, причем разного размера, чтобы они сочетались оптически. На этот раз создатели хотели сделать так, чтобы ширина слова "Mona" соответствовала ширине слова "Hubot". На моем MacBook размер шрифта, которым набраны указаннные слова, составляет 245 и 327 пикселей соответственно. Шрифты вариативные, поэтому настроить их начертание и ширину так, чтобы все хорошо сочеталось, гораздо проще. Свойство font-stretch (позволяет сжимать или растягивать текст) для слова Mona установлено на 83%, для Hubot — на 75%.

На сайте имеется только одна контрольная точка, которая позволяет ограничивать размер шрифтов на больших экранах. Разработчики используют относительно новую функцию min для установки размера в vw и минимального размера в пикселях. Как и в предыдущих примерах, дефолтный размер шрифта в браузере не влияет на фактический размер текста. Межбуквенное расстояние в заголовке немного уменьшено (на 1%).

Рекомендации по использованию крупной типографики в вебе

1. Короткие заголовки

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

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

Вот пример из моего собственного блога: как я могу быть уверен, что следующие два заголовка будут нормально смотреться в крупном размере?

• Почему дизайнеры увольняются
• Офисы с открытой планировкой — современная каторга западного общества

Если с первым справиться довольно легко, то второй займет слишком много места. Компромисс? Использовать большой шрифт вместо огромного. Именно так я и поступил в ходе последнего редизайна.

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

2. Масштабирование огромного шрифта

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

3. Доступность

В большинстве случаев, когда речь идет о доступности, я даю строгие рекомендации, но этот вопрос находится в “серой зоне”. Когда я увеличил дефолтный размер шрифта в браузере, некоторые заголовки не изменились, но действительно ли это влияет на доступность? Заголовки и так огромные, поэтому я бы сказал, что в подобных случаях мы можем отдать приоритет эстетике.

Изменение размера текста в соответствии с дефолтным размером шрифта в браузере зависит от того, какие единицы измерения используются в CSS. Я бы выбрал те, которые меняются согласно настройкам браузера для небольших экранов (vw, em, rem), и те, которые отключают эту зависимость для очень больших экранов (пиксели). Функции min и max также могут быть эффективны, как мы видели в примере с GitHub.

4. Оптическое выравнивание и соответствие размеров

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

5. Используйте акцидентные шрифты

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

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

6. Отрегулируйте межбуквенное расстояние

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

7. Используйте сетки

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

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

Заключение

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

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