Как подбирать шрифты к проекту. Часть 1/2

Вступление

Когда я только узнавал, что такое дизайн, я часто слышал: «Типографика — самая важная часть проекта. Она может спасти даже провальный проект.»

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

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

Во второй части статьи поговорим подробнее об алгоритме выбора шрифтов и об их сочетаниях.

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

Начало

Всё началось с просмотра лекции Миши Шишкина, основателя и креативного директора «Шишек». В своей лекции он рассказывает о крутом подходе к выбору шрифтов для проекта.

Запись лекции с «Дизайн просмотра»

Embedded content: Типографика бренда | Михаил Шишкин | Prosmotr

Вопросы к подбору шрифта

Кто он? (шрифт, разумеется)

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

Слайд презентации Миши.

Во-первых, мы должны понять, да кто такой этот ваш шрифт.

Хладнокровный бизнесмен, всеми любимый офисный пухляш, уставшая домохозяйка, кайфовый и чилловый сёрфер?

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

Где он?

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

Слайд презентации Миши.

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

Помните шрифт из Гарри Поттера? Объективно, вроде не оч, но для такого сказочного мира очень даже оч.

Какой он?

Слайд презентации Миши. Вариант сочетания шрифтов подобран им.

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

Какая у него задача?

Слайд презентации Миши.

Далее мы определяемся с задачей шрифта. Этот добродушный пухляш всех успокаивает? Весело шутит? Приободряет?

Если решить, какие задачи должен выполнять шрифт, то окончательно становится понятно, как он должен выглядеть.

Непоколебимый опытный деловой чел говорит болдовым гротеском в верхнем регистре.

Шрифт, соответствующий деловому челу.

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

Шрифт, соответствующий офисному пухляшу.

Личный опыт

Вопросы к шрифту

Однажды я вёл работу над айдентикой онлайн-школы подготовки к ЕГЭ по Физике. Нужно было выделиться от конкурентов современным необычным стилем, в какой-то степени даже экстравагантным.

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

По всем советам из лекции выше я расписал в Miro карту шрифтов, получилась такая схема (см. ниже). Этим способом я пользуюсь до сих пор.

Далее я стал искать нужные по духу шрифты (о сервисах, где искал — в конце статьи).

Акцидентный

Его задачи: зацепить и заявить о себе. Нужно что-то неординарное и необычное. Helvetica, Roboto или Montserrat тут нам не помогут, поэтому пришлось немного постараться. В итоге я нашёл, что искал.

Шрифт Rostov.

Только поглядите, насколько он драматичен, груб, заметен и с русской грустинкой. Вроде, не подходит, да? Посмотрим.

Текстовый

Тут всё более мене понятно, подходит множество гротесков типа Montserrat, Open Sans, Source Pro, Roboto …

Мне хотелось найти что-нибудь поинтереснее, ведь ни один из этих шрифтов не настолько добродушен, как наш образ шрифта. Хотелось найти больше доброты, приятности, отзывчивости.

Искать долго не пришлось.

Шрифт Exo 2.

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

Проба

Для привлечения внимания я решил использовать Rostov в верхнем регистре, а над Exo 2 не шаманил, он у нас и так спокоен и добр. Попробовал «примерить» их на сырые макеты, и вот что получилось.

Показал примеры, клиент шрифтовую пару утвердил. И мне, и клиенту понравился необычный нрав шрифтов. По нашему мнению, свои функции они выполняют на 101%.

Итог

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

Итоговый стиль проекта.

Смотрите полную презентацию проекта тут.

Бонусы

Как и обещал, раздаю подарочки для тех, кто дочитал до конца :3

Сервисы

Сервисы, где искать годные бесплатные шрифты:

Google Fonts;
Jovanny;
Font library;
Hndwd Fonts;
Бесплатные шрифты.

Статьи

Как сочетать шрифты в проекте;
Как подбирать отступы от заголовка;
Как эффективно и бесплатно прокачиваться дизайнеру (цикл статей).

Шрифты, упомянутые в статье

Montserrat (Деловой чел)
Rounded Mplus 1c (Офисный пухляш)
Rostov (Моргенштерн)
Exo 2 (Добрый и понимающий)

Бонус для дочитавших ♥

Каждый из вас, кто подпишется на меня в Инстаграм и напишет в директ, что хочет получить «Атлас дизайна» — получит от меня PDF, в котором я поделюсь морем полезных материалов и советов.

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

Получить «Атлас-дизайна»

Спасибо за прочтение, но и ты вырази благодарность :)

Чтобы выразить её, подпишись на мои Инст и Телеграм-канал, для меня это очень важно ♥

Дополнительно, если интересно:

Обещаю, твою поддержку я не забуду ♥