Хорошие, плохие и отличные примеры веб-типографики

Куратор ресурса о шрифтах Typewolf Джереми Шоаф выбрал примеры сайтов с интересными шрифтовыми решениями и описал их преимущества и недостатки.

Digital-агенство
Red Collar подготовило для рубрики «Интерфейсы» перевод заметки Шоафа.

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

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

Я буду критичен как к плохим решениям, так и к хорошим. Конечно, моя оценка субъективна, поэтому отнеситесь к ней с некоторой долей скепсиса.

Vesper Hotel

Новозеландский дизайнер шрифтов Крис Соверсби на сайте Vesper Hotel использует Domaine Display, витиеватый и богато украшенный экранный шрифт, в комбинации с Proxima Nova. Хоть Proxima Nova, возможно, один из слишком часто используемых веб-шрифтов последних нескольких лет, подбор ему в пару чего-то менее заезженного — например, Domaine Display — может освежить дизайн и сделать его отличным от других.

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

Dragone

Использование шрифта на фоне совершенно роскошных текстур, как здесь, заставляет меня сильно сожалеть, что flat design — настолько преобладающий тренд. Сайт Dragone смотрится, как картина, и элегантный Playfair Display в данном случае — идеальное начертание. Playfair Display в курсиве особенно красив, и сайт отлично это демонстрирует. Классический гротесковый геометрический Futura используется также, обеспечивая прочную основу рядом с ярким Playfair Display.

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

И всё же, количество текста на сайте достаточно невелико, и тогда не составляет большого труда его прочитать. Georgia — уже привычный шрифт с похожими характеристиками, поэтому он мог бы быть использован в качестве более читабельного напарника Playfair Display.

Romain Balcerak

Tiempos Text — ещё одно начертание от Криса Соверсби. Здесь используется вместе с Sentinel, брусковым шрифтом от Hoefler & Co. Apercu, орнаментированный и гротесковый шрифт из Colophon Foundry, дополняет получившийся набор.

Использование трёх начертаний иногда может быть чересчур, но Romain Balcerak выдержан в последовательной схеме, что удерживает дизайн в гармонии. Tiempos Text установлен жирным для заголовков; Sentinel всегда курсивный для подзаголовков; и Apercu используется везде для основного текста.

Rails Assets

Adelle Sans и Whitney — два шрифта без засечек с отчасти похожими характеристиками: оба гротесковые с гуманистическим уклоном. Комбинация двух схожих начертаний — определённо неординарное решение. Похоже, будто дизайнер не смог выбрать какой-нибудь один шрифт, поэтому использовал оба.

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

Dollar A Day

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

Моё предположение таково, что Apercu и другие похожие «орнаментированные и гротесковые шрифты» импонируют дизайнерам, потому что спустя годы использования Helvetica в вебе этот стиль начертания гордо заявляет: «Я не Helvetica».

Итак, если бы сайт Dollar A Day использовал Helvetica, его дизайн мог бы показаться холодным и лишённым своеобразия. Но с Apercu он мгновенно становится весёлым, живым и уникальным. Конечно, свежесть теряется, когда каждый сайт выбирает одинаковое начертание. Но прямо сейчас Apercu всё ещё смотрится интересно.

New Venture Scouting

New Venture Scouting — сайт с кучей хороших вещей в типографике, но есть ощущение, что во взаимодействии дизайна и разработки что-то пошло не так.

На первый взгляд, шрифт с засечками Jubilat отлично смотрится с Open Sans на главном слайде с путешественником. Тёплый и витиеватый брусковый шрифт в сочетании с деловым гуманистическим держит курс на основательный брендинг. Однако, при близком рассмотрении вы заметите, что другой шрифт без засечек Proxima Nova используется для навигации. А потом ниже идёт Arial для основного текста.
Если вы уже прибегли к Open Sans, то почему не взять его и для основного текста? У этих шрифтов же разный вес. Почему для навигации нужно начертание без засечек другого семейства?

Остаток сайта, видимо, является случайным миксом Jubilat, Proxima Nova, Open Sans and Arial без чётко обозначенного предназначения для каждого. Такой случай несогласованности обычно происходит, когда несколько дизайнеров работают над одним сайтом, но над разными страницами. Создание руководства по стилю в начале проекта обычно предотвращает появление подобных проблем.

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

United Strands

United Strands использует только одно начертание, Montserrat, чей шрифт находится в открытом доступе на Google Fonts. Его популярность многим обязана сходству с самыми популярными платными начертаниями последнего десятилетия Gotham и Proxima Nova. Несмотря на то, что у него есть сходства с этими двумя начертаниями, я думаю, что у него есть свой уникальный дизайн с отличительными признаками.

Единственный недостаток Montserrat — у него нет курсива. И если вы основной текст поставите в шрифт без курсива, всё закончится искусственным курсивом. Хотя текста на этом сайте достаточно мало, и я нашёл только несколько кейсов, где так происходит. Поэтому, это не столь заметно, но правильной типографикой данный кейс сложно назвать. Так или иначе, гротесковые шрифты с искусственным курсивом получаются лучше, чем латинские.
И всё же дизайнеры проделали большую работу, выжимая максимум из одного шрифта с ограниченным количеством стилей.

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

Norwegian Rain

На сайте Norwegian Rain классический геометрический гротесковый Avenir идёт вкупе с Freight Text. В прошлом году Avenir по результатам опроса стал любимым шрифтом многих ведущих дизайнеров. Слово ‘avenir’ во французском означает «будущее» — легенда типографики Адриан Фрутигер взял геометрические принципы шрифта Futura и добавил тёплые и органичные элементы для создания Avenir. Неудивительно, что он так предпочитаем теми, кто искренне ценит типографику.

У Freight Text есть характерный курсив, который отлично идёт в паре с опрятными линиями Avenir. Вообще, на сайте используется только курсив семьи начертаний Freight Text. Это держит систему текста в постоянстве, а также уменьшает время загрузки страницы.

Высота строки текста футера смотрится немного тесной. В остальных случаях это отличный сайт с хорошей типографикой.

Pelican Books

Сайт Pelican Books использует другое крайне популярное среди дизайнеров начертание Brandon Grotesque. На самом деле это особая текстовая версия Brandon Grotesque, называется она Brandon Text. Обычная версия Brandon Grotesque больше предназначена для экранного текста и меньше подходит для больших отрывков текста. А у Brandon Text более крупное очко и он больше оптимизирован под основной текст.

Интересно, что на этом сайте Brandon Text используется больше в качестве экранного текста, чем основного, который стоит в Freight Text. Brandon Text всё равно хорошо смотрится в больших размерах, но он не очаровывает так, как оригинальный Brandon Grotesque, из-за своей мягкости и консервативности. Freight Text один из самых чётких латинских шрифтов, так что это превосходный выбор для больших отрывков текста в разделе Read Online.

В сочетании с тонкой бумажной текстурой данная типографика создаёт ощущение, будто читаешь книгу.

Simply Gum

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

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

Логотипы в заголовке и футере стоят в формате PNG, таким образом они теряют чёткость и масштабируемость веб-шрифта. Использование веб-шрифта для логотипа не всегда осуществимо, особенно если вам нужен хороший контроль над кёрнингом; однако, изображение в SVG подойдёт в этом случае лучше, чем PNG, потому что оно может масштабироваться и при этом сохранять свою чёткость.

Краткий вывод

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

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