Что такое типографика: 12 простых правил

В статье рассказывается:

1. Понятие типографики
2. Базовые термины в типографике
3. Наиболее важные характеристики шрифтов и текстов
4. 12 простых правил классической типографики
5. Система ориентирования в тексте

6. Пройди тест и узнай, какая сфера тебе подходит:
   айти, дизайн или маркетинг.

   Бесплатно от Geekbrains

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

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

Понятие типографики

Что же такое типографика? Первым делом стоит отметить, что для рассмотрения сути этого термина нужно дать определение понятия «вёрстка».

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

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

Понятие типографики

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

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

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

Базовые термины в типографике

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

• Гарнитура

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

• Шрифт

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

• Кегль

Понятие кегля подразумевает высоту шрифта с учетом нижних и верхних выносных элементов буквы. Единицей измерения в данном случае является типографский пункт (pt). Скажем, 12 кегль – 12 pt по высоте. При этом 1 pt приравнивается к 1/72 английского дюйма, или 0,352 мм.

• Интерлиньяж

Данный параметр обозначает расстояние между основными линиями соседних строк. Единица измерения – типографский пункт. Как правило, интерлиньяж выставляется таким образом, чтобы он был на одну пятую больше используемого кегля. Допустим, если текст набран 15-м кеглем, то значит, интерлиньяж будет составлять 18 pt. В художественных целях интерлиньяж может повышаться или снижаться, однако из-за того, что этот параметр влияет на читаемость текста, маленький интерлиньяж выставляется довольно редко (иногда – в заголовках, но не более того).

• Кернинг

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

• Трекинг

Пробелы между буквами, которые используются относительно групп символов (слов, строк, абзацев и т. д.). Функция трекинга – разрядка или уплотнение набора. Кроме того, он позволяет осуществлять вгонку и выгонку слов (смену количества набранных в конкретную площадь символов).

• Рубрикация

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

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ ресурсов об IT-сфере

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

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

pdf 3,7mb

doc 1,7mb

Уже скачали 20101

• Графема

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

Графема чаще всего разграничивает единицы текста. Скажем, графема цифры «1» дает возможность отличить ее от цифры «2» и неважно, какой гарнитурой они были набраны.

• Глиф

Глиф – конкретное графическое представление графемы. Когда в тексте применяют несколько глифов для одной и той же графемы, тогда они именуются аллографами друг друга.

Базовые термины в типографике

• Строчные буквы

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

• Прописные буквы

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

• Капитель

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

• Выключка

Выключка – это выравнивание текста. Иными словами, это способ размещения неполной строки относительно вертикальных границ набора. Существует выравнивание по левому и правому краю, по центру и по ширине (по формату).

• Леттеринг

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

Точный инструмент «Колесо компетенций»

Для детального самоанализа по выбору IT-профессии

Список грубых ошибок в IT, из-за которых сразу увольняют

Об этом мало кто рассказывает, но это должен знать каждый

Мини-тест из 11 вопросов от нашего личного психолога

Вы сразу поймете, что в данный момент тормозит ваш успех

Регистрируйтесь на бесплатный интенсив, чтобы за 3 часа начать разбираться в IT лучше 90% новичков.

Только до 27 марта

Осталось 17 мест

• Полоса

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

Наиболее важные характеристики шрифтов и текстов

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

• Удобочитаемость. Данное качество указывает на простоту восприятия текста и, соответственно, шрифта. Эта характеристика наиболее значима для материалов, которые создаются для сплошного чтения. Необходимо чтобы графическая сторона шрифтов была выполнена как можно более привычно для пользователя. При этом удобочитаемость складывается не только из типографических параметров, но и за счет стиля, семантики и других характеристик.
• Заметность. Это свойство имеет большое значение для текста, который следует выделить. Заметный текст должны сначала выявить среди прочих частей, обратив на него особое внимание, а уже потом прочесть. Это достигается за счет использования бо́льшего кегля, акцидентного или выделительного шрифта, регулировки соотношения цветовой палитры символов и/или фона.
• Различимость. Это качество необходимо для текстов, которые будут прочитываться при сниженной видимости или за небольшой промежуток времени. Яркий пример – тексты в наружной рекламе. Для этого нужны четкие и очень отличимые друг от друга формы знаков, большой кегль и мощный контраст цветовой палитры текста и фона.

12 простых правил классической типографики

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

Однако нижеперечисленные нормы нельзя назвать бесспорными и непоколебимыми. Они приведены исключительно в качестве ориентира новичкам.

Итак, рассмотрим 12 фундаментальных основ типографики:

• Для максимального удобства прочтения используйте самые стандартные шрифты. Любой специалист в области типографики текста имеет в арсенале часто применяемый набор классический шрифтов. Эти шрифты не предназначены для удивления читателя, а, наоборот, должны быть максимально привычны. К таковым можно отнести: Academy, Arial, Baskerville, Bodoni, Franklin Gothic, Futura, Garamond, Goudy, Helvetica, Petersburg, Times New Roman и некоторые другие.

• Не применяйте излишне много шрифтов в рамках одного материала. Как правило, несколько их применяют в целях выделения определенного участка текста. Но когда этих шрифтов излишне много, пользователь не может понять, что из материла более важно, а что, напротив, имеет сопутствующее значение. В особенности это касается применения декоративных гарнитур для выделения.
• Применение исключительно прописных букв снижает удобочитаемость. Верхние и нижние выносные элементы строчных знаков увеличивают узнаваемость букв, что способствует более легкому чтению текста.
• Практикуйте тот размер шрифта, который сможет создать наибольшую удобочитаемость для применяемой гарнитуры. Стандартный вариант – 8–12 пунктов для текста, читаемого с расстояния 30–40 см. Вместе с тем не пренебрегайте и междустрочным расстоянием.
• Не используйте излишне темные или крайне светлые шрифты.
• Ориентируйтесь на текстуру текста – она не должна прерываться. За счет оптимальных межсловных и межбуквенных промежутков текст становится ровным и читаемым.
• Применяйте правильную длину строки. Излишне длинная строка, так же, как и очень короткая, ухудшает удобочитаемость. Первые будут создавать напряженность для восприятия, а вторые – нервировать пользователя.

• Придерживайтесь норм междустрочных промежутков. Излишне маленький интерлиньяж сделает прочтение такого текста более длительным. Дело в том, что читателю будет сложно уловить место, где начинается каждая следующая строка.
• Берите на вооружение флаговый набор с выключкой влево. Это позволит увеличить удобочитаемость. Однако есть ситуации, при которых лучше использовать выключку в край (по ширине), хоть это и делает межсловные промежутки менее постоянными.
• Выделяйте место, где начинается абзац. Для этого можно либо использовать отступ, либо увеличить межабзацные пробелы. При этом для первой строки текста после заголовка отступ обычно не нужен.
• Избегайте висячих строк. Этот термин означает неполную концевую строку, которая располагается на верхней границе колонки, или начальную строку, размещенную в самой нижней части колонки. Чтобы нивелировать такую проблему, необходимо осуществить вгонку или выгонку при помощи трекинга или соединения нескольких абзацев в концевую часть текста.
• Используйте в тексте способы выделения, которые не будут создавать помехи для читателя. Но учтите, что чем меньше будет таких акцентов, тем лучше.

Система ориентирования в тексте

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

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

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

Продвижение блога — Генератор продаж

Рейтинг: 4.43

( голосов 7 )

Поделиться статьей

Что такое типографика: основы и правила

Оформление печатных символов в визуально привлекательный и разборчивый текст называется типографикой. Само слово происходит от греческого  “типос” — отпечаток и  “графо” — пишу.

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

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

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

Основные виды гарнитуры

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

Например, Corbel — это гарнитура, которая включает Corbel Light, Corbel Bold Italic, Corbel Light Italic и другие шрифты.

Существует четыре основных видов гарнитуры: антиква, гротеск, рукописная и акцидентная. Разберем их по отдельности.

 

Антиква

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

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

Их можно изменить, поэтому многие гарнитуры включают начертание курсивом и жирным, низкую капитализацию и другие стили.

Несмотря на то, что антиква отличается маленькими засечками в конце букв, у нее есть много вариаций. Одна из самых известных — Times New Roman.

Гротеск

Гарнитура гротеск начала пользоваться популярностью с середины 20 века, и имеет более готический вид, в то время, как антиква считается “римским” стилем.

Символы данного вида гарнитуры более четкие, жирные и современные. Известным примером такой гарнитуры является Arial, который часто встречается в заголовках и объявлениях.

Рукописная

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

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

Акцидентная

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

Многие бренды используют данную гарнитуру в дизайне логотипа. Два ярких примера логотипов, выполненных с акцидентной гарнитурой, — Disney и Fanta.

Элементы типографики, которые нужно знать

Зная основные элементы типографики, вы сможете существенно упростить свою работу. Они станут базой, на основе которой вы сможете создать и оформить текст со знанием дела (и не закрывать редактор в отчаянии).

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

 

Интерлиньяж

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

Трекинг

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

Кернинг

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

Выравнивание

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

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

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

Иерархия

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

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

Важные правила и советы для новичков

Читабельность в приоритете

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

Делимся полезными советами, как сделать текст эффектным:

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

Используйте сетку

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

Если вы новичок, начните с простой сетки, чтобы понять, как она работает.

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

Не поддавайтесь трендам

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

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

Лучшая теория — это практика

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

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

 

Подведем итоги

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

Основных гарнитур четыре: гротеск, антиква, рукописная и акцидентная.

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

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

 

СОЗДАТЬ ДИЗАЙН

Теория цвета и цветовые палитры — полное руководство [2023]

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

Цвета обладают неизмеримой силой влиять на наше настроение, эмоции и мысли. Исследования, проведенные Институтом исследования цвета, показывают, что люди делают подсознательное суждение о продукте в течение 9 лет.0 секунд просмотра, и от 62% до 90% этой оценки основано только на цвете.

Перед дизайнерами пользовательского интерфейса (UI) стоит непростая задача — включить цвет в свой интерфейс таким образом, чтобы он четко передал визуальную идентичность бренда. Хотя может показаться, что цветовая палитра веб-сайта — это вопрос личного вкуса клиента, на самом деле дизайнеры пользовательского интерфейса полагаются на структуру, называемую теорией цвета: многоуровневый набор рекомендаций, который информирует об использовании цвета в дизайне.

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

Вот что мы рассмотрим:

1. Что такое теория цвета?
2. Знакомство с цветовым кругом
3. Важность цветовой гармонии
4. Аддитивные и субтрактивные цветовые модели
5. Знакомство с цветовыми палитрами
6. Какие бывают типы цветовых палитр?
7. Как выбрать цветовую палитру 
8. Лучшие онлайн-инструменты для выбора цветовой палитры 
9. Заключительные мысли 

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

1. Что такое теория цвета?

Начнем с основ: что такое теория цвета?

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

Современная теория цвета в значительной степени основана на цветовом круге Исаака Ньютона, который он создал еще в 1666 году. Базовый цветовой круг отображает три категории цвета; первичные цвета, вторичные цвета и третичные цвета. Если вы помните, что узнали об этом на уроках рисования, молодец — вы уже усвоили основы теории цвета!

Давайте быстро вспомним, что значат эти цветовые категории:

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

2. Знакомство с цветовым кругом

Вы можете подумать: «Существует более 12 цветов». Вы правы — и все они могут быть найдены в более продвинутой версии цветового круга.

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

Оттенок

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

Оттенок

Оттенок определяет, сколько черного добавляется в оттенок. Таким образом, оттенок затемняет цвет.

Оттенок

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

Тон

Тон – это результат добавления белого и черного цвета. Другими словами, тон относится к любому оттенку, который был изменен с добавлением серого, при условии, что серый является чисто нейтральным (содержащим только белый и черный).

Цветовая температура

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

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

3. Важность цветовой гармонии

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

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

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

4. Аддитивные и субтрактивные цветовые модели

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

Аддитивная цветовая модель (RGB)

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

Субтрактивная цветовая модель (CMYK)

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

5. Знакомство с цветовыми палитрами

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

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

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

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

6. Какие существуют типы цветовых палитр?

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

Монохроматический

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

Аналоговая

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

Дополнительный

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

Сплит-дополнительная цветовая палитра

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

Триадный

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

Tetradic

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

7. Как выбрать цветовую палитру

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

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

Изучите свою аудиторию

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

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

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

Учитывайте психологию цвета

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

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

• Оранжевый энергичный и теплый. Некоторые общие ассоциации с оранжевым включают креативность, энтузиазм, беззаботность и доступность.
• Красный — это цвет крови, поэтому он часто ассоциируется с энергией, войной, опасностью и силой, а также со страстью, желанием и любовью. Некоторые распространенные ассоциации с красным включают действие, приключение, агрессию и волнение.
• Желтый вызывает позитив, молодость, радость, игривость, солнечный свет и тепло.
• Розовый вызывает чувства невинности и деликатности, благодарности, романтики, мягкости и признательности.
• Синий воспринимается как авторитетный, надежный и заслуживающий доверия. Общие ассоциации с синим цветом включают спокойствие, безмятежность, уверенность, достоинство и безопасность.
• Зеленый — цвет природы. Он символизирует рост, свежесть, безмятежность, деньги, здоровье и исцеление. 9№ 0014
• Черный олицетворяет силу, элегантность и авторитет. Общие ассоциации с черным также включают класс, различие, формальность, тайну, секретность и серьезность.

Выбирайте цвета с умом

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

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

Не экономьте на контрасте

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

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

Придерживайтесь соглашений пользовательского интерфейса

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

Некоторые распространенные цветовые соглашения в дизайне пользовательского интерфейса включают:

• Использование темного цвета для текста, чтобы обеспечить читаемость
• Сохранение светлых цветов для фона
• Использование контрастных цветов для акцентов (как указано выше)
• Придерживаясь классического призыва к цвета действия — например, красный для предупреждающего знака

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

Получить отзыв

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

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

8. Лучшие инструменты для выбора цветовой палитры

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

Ниже мы собрали три лучших инструмента для создания онлайн-палитр цветов. Выбирайте!

Adobe Color

Являясь источником «хлеба с маслом» для всех цифровых креативщиков, Adobe Color предлагает практически любую цветовую палитру. По сравнению с другими генераторами цветовых схем, Adobe Color гораздо более универсален, поэтому не выбирайте его, если вам нужно что-то быстрое и простое. Среди ключевых функций Adobe Colors — генератор цветовой палитры, который извлекает цвета из загруженных вами изображений.

Coolors

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

Цветовая шкала Adobe Illustrator

Цветовая шкала Adobe Illustrator отличается своей популярной функцией «цветовая шкала». После того, как вы выбрали цвет, руководство по цвету сгенерирует для вас палитру из пяти цветов. Он также предоставит вам ряд оттенков и оттенков для каждого цвета в палитре. Если вы переключите свой основной цвет, цветовая шкала автоматически обновит соответствующие цвета, чтобы ваши акцентные цвета дополняли друг друга.

9. Заключение

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

Ищете вдохновение для дизайна пользовательского интерфейса? Ознакомьтесь с этими сообщениями в блогах:

• 10 примеров прекрасных блогов с отличным дизайном пользовательского интерфейса
• Как улучшить свои навыки дизайнера пользовательского интерфейса
• Дизайн пользовательского интерфейса мобильного приложения: 10 основных принципов для начинающих

Что такое типографика? | Полное изложение

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

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

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

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

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

‍

Гарнитура и шрифт, в чем разница?

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

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

‍

Типовые категории

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

‍

Гарнитуры с засечками

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

‍

‍

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

‍

‍

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

‍

Шрифты без засечек

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

‍

‍

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

‍

‍

Декоративные или акцидентные шрифты

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

Элементы типографики Источник изображения: https://www.shillingtoneducation.com/blog/what-is-typography/

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

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

‍

Интерлиньяж

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

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

‍

‍

Отслеживание

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

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

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

‍

‍

Кернинг

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

‍

‍

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

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

‍

Выравнивание

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

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

‍

‍

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

‍

‍

Иерархия

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

‍

Как добавить иерархию в ваш дизайн

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

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

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

Посмотрите наше видео, в котором Ран знакомит вас с более наглядными примерами иерархии в веб-дизайне и дизайне приложений:

‍

Добавьте контраста к вашей типографике

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

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

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

‍

Как выбирать шрифты

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

‍

Избегайте тенденций

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

‍

Начните с поиска категории шрифта

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

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

‍

Ограничьте количество пар шрифтов до 2 или 3 максимум

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

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

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

‍

Как улучшить свои навыки типографики

На самом деле нет другого пути, кроме практики. По сути, дизайн — это шрифт + изображение. Но внутри этих двух элементов существует бесконечное количество дизайнерских возможностей.

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

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