Как работать с типографикой при создании бренда

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

Что такое типографика

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

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

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

Какие виды шрифтов бывают

Выделяют 5 основных видов, которые отличаются особенностью построения:

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

Логотипы известных люксовых брендов с изящной антиквой

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

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

Брусковый. Шрифт — гибрид антиквы и гротеска. Засечки более мощные, чем у антиквы, а рубленость форм передалась от гротеска. Обычно брусковый шрифт массивен, выражает четкость, смелость или брутальность.

Брусковый логотип Sony подчеркивает простоту и силу

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

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

Шрифтовой логотип компании Marshall сохранил рукописный стиль 40-х годов, когда будущий основатель фирмы Джим Маршалл был успешным барабанщиком

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

Акцидентный шрифт бренда Nam Coffee разработан на контрастах толщины горизонтальных и вертикальных штрихов, чтобы передать полярность Вьетнама и Калифорнии: в стране Юго-Восточной Азии кофе собирают, а в штате США — обжаривают

Общие правила для выбора шрифтов

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

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

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

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

Как подобрать шрифтовую пару

Шрифтовые пары помогают выстроить иерархию в тексте, то есть структурировать информацию. Главное правило, которому нужно следовать при выборе комбинации — выдерживать контраст между шрифтами. Этого можно добиться двумя способами:

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

Гарнитура Яндекса одинакова по стилистике, но имеет тонкие и жирные начертания

Добиться контрастности через сопоставление. Можно использовать полярные типографические показатели: например, высота/ширина штрихов и возрастающие/убывающие значения.

В квизе «Вопрос на миллион» от Альфа-Банка использован текстовый контраст: для заголовка выбрали вытянутый акцидентный шрифт, а для основного текста — широкий гротеск

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

Какие тренды в типографике сейчас используют

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

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

Сайт театра Современник использует гротеск и много «воздуха», что позволяет лучше сконцентрироваться на информации

Гигантизм. Крупная типографика — это способ заявить о себе, показать смелость и уверенность, привлечь внимание.

Лендинг о приложении для отслеживания времени выглядит массивно и динамично. На изображении представлено несколько блоков сайта

Шрифты разных эпох. Такая типографика отсылает зрителя к историческому промежутку времени, но не полностью копирует настроение эпохи, а модернизирует его под современность. При обращении к ретро наиболее актуальна винтажная антиква 60-80-х и психоделия 70-х.

Упаковка шоколада голландской кондитерской компании Tony's Chocolonely привлекает внимание яркими цветами и типографикой в стиле хиппи

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

В логотипе Озон растянута вторая буква "O", чтобы подчеркнуть гибкость и готовность ритейлера к изменениям и созданию новых продуктов

Динамика и статичность. Динамика позволяет выделить основной элемент в текстовом блоке, на который стоит обратить внимание.

Агентство Rassvet.digital использует прямой гротеск и курсивную антикву, чтобы сделать акцент на результате, который обещает агентство

Полезные материалы, которые помогут лучше освоить типографику

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

Онлайн-игры для дизайнеров

Typewar. Игра обучает выявлять различия между шрифтами. Благодаря тренажеру можно выработать узнаваемость начертаний и открыть для себя новые шрифты.

На каждом уровне Typewar дает одну букву и два названия шрифтов, к одному из которых принадлежит данный символ. Задача — выбрать правильный шрифт.

Тренажер считает количество заработанных очков и процент игроков, которые правильно ответили на вопрос.

Kern Type. Тренажер помогает наметать глаз на кернинге — расстоянии между двумя символами в слове, которое задает слову целостность.

На каждом уровне игра представляет слово, в котором нужно поставить буквы в правильное расположение. После выполнения Kern Type показывает истинный промежуток между символами и количество заработанных очков, насколько точно вы выставили положение.

Верное взаимное расстояние символов тренажёр обозначает синим цветом после завершения уровня

Библиотека типографических решений

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

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

Подборки шрифтовых пар

Fontjoy. Генератор шрифтовых пар, который можно настроить как вручную, так и автоматически. Есть возможность закрепить понравившийся шрифт и искать пару конкретно под него.

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

Fontpair. Готовые сочетания шрифтов на основе бесплатной библиотеки Google Fonts.

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

Шрифты с открытой лицензией

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

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

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

Rentafont. Сервис, для аренды шрифтов. Rentafont удобен тем, что за небольшие деньги можно приобрести лицензионный шрифт и аренда начинается от 10 минут использования. На платформе представлено более 5000 наименований, сервис рассчитан на кириллицу.

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

DaFont. Большая библиотека шрифтов с 20 000+ наименований.

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

Google Fonts. Подборка шрифтов от Google со свободной лицензией, на сайте представлено 800+ шрифтовых семейств.

Што за шрифт? Канал с актуальными шрифтами в Телеграме.

Бесплатные шрифты. Группа во ВКонтакте с большим количеством шрифтов.