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

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

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

Типографика для интерфейсов, полное руководство

Определите свою цель

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

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

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

Типографика: как выбрать ТОТ самый шрифт - Фото 1

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

Типографика: как выбрать ТОТ самый шрифт - Фото 2

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

Определите свою аудиторию

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

Например, некоторые шрифты более уместны для детской аудитории. Когда дети учатся читать, им нужны хорошо читабельные шрифты с четкими очертаниями букв. Хороший пример — Sassoon Primary. Sassoon Primary был разработан Rosemary Sassoon, основываясь на ее исследовании, какие буквы легче всего читать детям.

Типографика: как выбрать ТОТ самый шрифт - Фото 3
Sassoon Primary

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

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

Ищите вдохновение

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

Источники вдохновения

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

Еще один полезный ресурс — Коллекция 100 лучших бесплатных шрифтов 2015 от Awwwards.

Invision также предлагает огромное хранилище ресурсов по типографике. Тут вы точно найдете, чем вдохновиться.

Типографика: как выбрать ТОТ самый шрифт - Фото 4
Typ.io собрал для вас идеи по шрифтам с веба

Typ.io — целый вебсайт, посвященный шрифтам. Тут собраны идеи со всего интернета. Вдобавок, сайт предоставляет CSS-определения шрифтов внизу каждого примера.

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

Идеи для комбинирования

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

Типографика: как выбрать ТОТ самый шрифт - Фото 5

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

На FontPair также масса идей по шрифтовым парам, особенно по шрифтам Google. Вы можете фильтровать комбинации по типу, например sans-serif и serif, или serif и serif.

Типографика: как выбрать ТОТ самый шрифт - Фото 6

Также доступны целые коллекции шрифтовых комбинаций, созданные дизайнерами. Например, Typography: Google Fonts Combinations и Typography:Google Fonts Combinations Volume 2. Просто погуглите “font pairing” на сайтах вроде Behance и Dribbble.

Выберите свои шрифты

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

Типографика: как выбрать ТОТ самый шрифт - Фото 7

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

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

Типографика: как выбрать ТОТ самый шрифт - Фото 8
Сочетайте шрифты, которые выгодно контрастируют друг с другом

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

Вы можете использовать веб-шрифты из коллекций Google Fonts, Typekit и Font Squirrel. Google Fonts бесплатны, а в Typekit и Font Squirrel есть как платные, так и бесплатные шрифты.

Определите нужный размер

Следующий шаг после выбора комбинации — определение размера. Отличный инструмент для этого — Modular Scale от Tim Brown, главного типографа в Adobe. Modular Scale — это система для определения объективно сочетаемых пропорций шрифтов для создания размерных шкал.

Типографика: как выбрать ТОТ самый шрифт - Фото 9
Modular Scale — это система для определения объективно сочетаемых пропорций шрифтов для создания размерных шкал.

Например, вы можете использовать шкалу, основанную на золотом сечении. Такими будут первые 5 вычисленных размеров шрифта:

 Golden Ratio (1:1.618)
 1.000 x 1.618 = 1.618
 1.618 x 1.618 = 2.618
 2.618 x 1.618 = 4.236
 4.236 x 1.618 = 6.854
 6.854 x 1.618 = 11.089

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

Golden Ratio (1:1.618)
 ...
 11.089 x 1.618 = 17.942
 17.942 x 1.618 = 29.03
 29.030 x 1.618 = 46.971
 46.971 x 1.618 = 75.999
 75.999 x 1.618 = 122.966

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

Minor Second 15:16
 Major Second 8:9
 Minor Third 5:6
 Major Third 4:5
 ...

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

Perfect Fourth (3:4)
 ...
 9.969 x 1.333 = 13.288
 13.288 x 1.333 = 17.713
 17.713 x 1.333 = 23.612
 23.612 x 1.333 = 31.475
 31.475 x 1.333 = 41.956
 41.956 x 1.333 = 55.927

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

Header 1: 55px
 Header 2: 42px
 Header 3: 31px
 Header 4: 24px
 Header 5: 14px

Body: 17px
 Caption: 14px

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

Создайте руководство по стилям типографики

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

Типографика: как выбрать ТОТ самый шрифт - Общие стили в Sketch
Общие стили в Sketch

В программах типа Sketch вы можете создавать общие текстовые стили для быстрой стилизации текста.

Тут вы можете играться и оттачивать текстовые атрибуты, включая цвет, вес и размер.

Пару слов о цвете: при выборе оттенка учитывайте цветовую палитру проекта. Выбирайте цвета, которые сочетаются с общей палитрой.

Типографика: как выбрать ТОТ самый шрифт - цветовая палитра
Используйте руководство по стилям для стандартизации шрифтов в проекте

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

Руководство по типографии Google Material Design — хороший пример того, что должно включать в себя руководство по стилям типографики. Пара других примеров — руководства по стилям Mailchimp, Apple и Focus Labs.

Типографика строится на экспериментах. Здесь наука и искусство едины.

Я призываю вас выйти из зоны комфорта и поэкспериментировать со шрифтами в дизайне.
Какие ваши любимые шрифты? Делитесь лучшими сочетаниями в комментариях.

Подробное руководство по основам типографики