@Jonathanzwhite

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

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

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

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

Определите вашу цель

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

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

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

Выберите шрифт, который соответствует стилю вашей иллюстрации

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

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

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

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

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

Например, некоторые шрифты больше подходят для детей. При обучении чтению дети нуждаются в легко читаемых шрифтах с большими буквами. Хороший пример этого - Sassoon Primary. Sassoon Primary была разработана Розмари Сассун и основана на ее исследовании того, какие письма дети находят легко читать.

Сассун Первоначальный был разработан Розмари Сассун

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

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

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

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

Вдохновение шрифтов

Для вдохновения шрифтов The 100 Best Free Fonts от CreativeBloq - это отличная статья, которая поможет вам правильно выбрать тип шрифта. В статье CreativeBloq объясняет мотивы каждого шрифта.

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

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

Typ.io вдохновляет шрифтов со всего Интернета

Для вдохновения от реальных веб-сайтов, проверьте Typ.io. Сайт вдохновляет шрифтов со всего Интернета. Кроме того, сайт предоставляет определения шрифтов CSS внизу каждого образца.

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

Спаривание Вдохновение

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

Сопряжение шрифтов так же важно, как и сами шрифты

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

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

И, наконец, существует множество коллекций парных шрифтов, созданных дизайнерами онлайн. Например, Типография: Google Fonts Combination и Типография: Google Fonts Combination Volume 2. Просто выполните поиск «сопряжение шрифтов» на таких сайтах, как Behance и Dribbble.

Выберите ваши шрифты

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

Прежде чем выбрать шрифт, изучите его назначение.

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

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

Пара шрифтов, которые контрастируют друг с другом

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

Для веб-шрифтов вы можете использовать Google Fonts, Typekit и Font Squirrel. Google Fonts бесплатен, Typekit и Font Squirrel имеют бесплатные и платные шрифты.

Определить размеры шрифта

Следующим шагом после выбора комбинации шрифтов является определение размера. Отличным инструментом для этого является «Модульная шкала» Тима Брауна, главы типографии в Adobe. Модульная шкала - это система определения исторически приятных соотношений для создания шкал для определения размеров шрифта.

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

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

Золотое сечение (1: 1.618)
1.000 x 1.618 = 1.618
1,618 х 1,618 = 2,618
2,618 х 1,618 = 4,236
4,236 x 1,618 = 6,854
6,854 x 1,618 = 11,089

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

Золотое сечение (1: 1.618)
...
11,089 х 1,618 = 17,942
17,942 x 1,618 = 29,03
29,030 х 1,618 = 46,971
46,971 х 1,618 = 75,999
75,999 х 1,618 = 122,966

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

Малая секунда 15:16
Major Second 8: 9
Незначительный третий 5: 6
Большой третий 4: 5
...

Таким образом, вместо использования золотого сечения, вы можете использовать отношения, которые дают меньшие интервалы, такие как Perfect Fourth.

Идеальный четвертый (3: 4)
...
9,969 x 1,333 = 13,288
13,288 x 1,333 = 17,713
17,713 х 1,333 = 23,612
23,612 х 1,333 = 31,475
31,475 х 1,333 = 41,956
41,956 х 1,333 = 55,927

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

Размеры шрифта
Заголовок 1: 55 пикселей
Заголовок 2: 42 пикселя
Заголовок 3: 31 пикселей
Заголовок 4: 24 пикс.
Заголовок 5: 14 пикселей
Тело: 17px
Надпись: 14px

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

Создать руководство по типографии

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

Общие стили в Sketch

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

Именно на этом этапе процесса вы можете настроить и завершить свои текстовые атрибуты, такие как цвет, вес и размер.

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

Используйте руководства по стилю для стандартизации типа в ваших проектах

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

Рекомендации Google по типографскому оформлению материалов - хороший пример того, что следует включить в руководство по стилю. Несколько других примеров включают руководства по типографии Mailchimp, Apple и Focus Labs.

Типография это все о экспериментах. Это и наука, и искусство.

Я призываю вас выйти из своей зоны комфорта и изучить тип в вашем дизайне.

Какие твои любимые шрифты? Оставьте мне записку или отправьте мне твит в Твиттере.

Если вам понравилась эта статья, вам также может понравиться CSS в Javascript с Aphrodite, библиотекой Khan Academy.

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

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