Один из самых важных навыков, которые должен освоить любой дизайнер, — как выбирать шрифты. Все потому, что текст — это один из главных способов коммуникации с пользователями. Типографика может как «сделать» ваш дизайн, так и полностью его разрушить.
В типографике сочетаются красота и сложность. Некоторые дизайнеры полностью посвящают свою карьеру одним шрифтам. К счастью, их работа отлично документирована, так что у нас есть тонны ресурсов по типографике онлайн.
Этот пост создан для помощи в выборе шрифтов под ваши дизайны. Он поможет вам открыть шрифты и шрифтовые комбинации за пределами тех, с которыми вы уже знакомы.
Типографика для интерфейсов, полное руководство
Определите свою цель
Перед тем, как что-либо делать, обязательно обозначьте цель вашего дизайна. Какую информацию вы собираетесь подать? Для какой среды создается ваш дизайн?
В хорошем дизайне типографика полностью соответствует его цели. Все потому, что именно типографика — ключ в задании настроения, тона и стиля в дизайн-проекте.
Например, если вы рисуете поздравительную открытку, нагруженную графикой, выберите шрифт, который подходит вашей иллюстрации. Гармонизируйте текст с остальной частью дизайна.
Если вы создаете лендинг, главным контентом в котором являются изображения, выберите простой шрифт, не отвлекающий от графики. Используйте шрифт как способ подчеркнуть то, что вы хотите донести до пользователя.
Если дизайн сфокусирован на изображении, выбирайте простые шрифты, чтобы графика выходила на первый план.
Определите свою аудиторию
После задания цели дизайна, определите свою аудиторию. Этот шаг критичен, так как возраст и интересы пользователей будут влиять на выбор шрифтов.
Например, некоторые шрифты более уместны для детской аудитории. Когда дети учатся читать, им нужны хорошо читабельные шрифты с четкими очертаниями букв. Хороший пример — Sassoon Primary. Sassoon Primary был разработан Rosemary Sassoon, основываясь на ее исследовании, какие буквы легче всего читать детям.
Другие шрифты больше подходят пожилым читателям. Это шрифты более крупного размера, в более контрастирующих цветах, в них нет вычурного декора и прочих элементов, которые могли бы затруднить распознавание букв.
При выборе шрифта, берите во внимание особенности аудитории и их потребности. Другими словами, проявите эмпатию к своим пользователям.
Ищите вдохновение
Посмотрите на работы других дизайнеров. Попытайтесь понять, на чем основывался их выбор шрифтов.
Источники вдохновения
Отличный пост по этой теме — 100 лучших бесплатных шрифтов на CreativeBloq. В ней CreativeBloq поясняет мотивацию для выбора каждого представленного шрифта.
Еще один полезный ресурс — Коллекция 100 лучших бесплатных шрифтов 2015 от Awwwards.
Invision также предлагает огромное хранилище ресурсов по типографике. Тут вы точно найдете, чем вдохновиться.
Typ.io — целый вебсайт, посвященный шрифтам. Тут собраны идеи со всего интернета. Вдобавок, сайт предоставляет CSS-определения шрифтов внизу каждого примера.
Помимо просмотра ресурсов, посвященных этой теме, просто зайдите на свои любимые сайты и проверьте, какие шрифты там используются. В этом поможет отличный инструмент WhatTheFont. Это расширение для Chrome, которое определяет веб-шрифты при ховере на текст.
Идеи для комбинирования
Помимо просто шрифтов, ищите идеи для их сочетания. Это не менее важно, чем сами шрифты отдельно. Хорошие шрифтовые комбинации задают визуальную иерархию и улучшают читабельность дизайнов.
Для вдохновения начните с Typewolf. Typewolf показывает идеи по комбинированию шрифтов с разных сайтов. Кроме того, там вы найдете рекомендации по типографике и массу углубленных уроков.
На FontPair также масса идей по шрифтовым парам, особенно по шрифтам Google. Вы можете фильтровать комбинации по типу, например sans-serif и serif, или serif и serif.
Также доступны целые коллекции шрифтовых комбинаций, созданные дизайнерами. Например, Typography: Google Fonts Combinations и Typography:Google Fonts Combinations Volume 2. Просто погуглите «font pairing» на сайтах вроде Behance и Dribbble.
Выберите свои шрифты
Вооружившись своим ресерчем и найденными идеями, вы готовы выбрать шрифт для своего дизайна. Тут следует соблюдать некоторые принципы: читабельность, разборчивость и цель.
Выбирайте шрифты, которые легко и быстро читаются. Избегайте вычурных начертаний в пользу простых и практичных. Например, некоторые шрифты больше подходят для заголовков, чем для основного текста.
По этой причине перед выбором шрифта всегда определяйте его цель.
Сочетайте максимум три разных типа шрифта. Вдобавок, сочетайте те, которые контрастируют друг с другом. Это поможет читателям сначала обратить внимание на заголовок, а потом уже пробежаться глазами по основному тексту. Вы можете создать визуальный контраст и за счет разного размера, цвета и жирности текста.
Вы можете использовать веб-шрифты из коллекций Google Fonts, Typekit и Font Squirrel. Google Fonts бесплатны, а в Typekit и Font Squirrel есть как платные, так и бесплатные шрифты.
Определите нужный размер
Следующий шаг после выбора комбинации — определение размера. Отличный инструмент для этого — Modular Scale от Tim Brown, главного типографа в Adobe. 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 вы можете создавать общие текстовые стили для быстрой стилизации текста.
Тут вы можете играться и оттачивать текстовые атрибуты, включая цвет, вес и размер.
Пару слов о цвете: при выборе оттенка учитывайте цветовую палитру проекта. Выбирайте цвета, которые сочетаются с общей палитрой.
В руководстве должны присутствовать как минимум следующие элементы: типы шрифтов, размеры, цвета и примеры использования.
Руководство по типографии Google Material Design — хороший пример того, что должно включать в себя руководство по стилям типографики. Пара других примеров — руководства по стилям Mailchimp, Apple и Focus Labs.
Типографика строится на экспериментах. Здесь наука и искусство едины.
Я призываю вас выйти из зоны комфорта и поэкспериментировать со шрифтами в дизайне.
Какие ваши любимые шрифты? Делитесь лучшими сочетаниями в комментариях.
Нет комментариевПодробное руководство по основам типографики