УДК 0041

Важность типографики на цифровом дизайне: влияние на восприятие и эффективность коммуникации

Казанцева Лариса Вячеславовна – старший преподаватель кафедры Вычислительной техники МИРЭА – Российского технологического университета

Акатьев Ярослав Алексеевич – ассистент кафедры Практической и прикладной информатики МИРЭА – Российского технологического университета

Хан Анастасия Александровна – студент кафедры Вычислительной техники МИРЭА – Российского технологического университета

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

Ключевые слова: типографика, шрифт, гарнитура, типографический прием, графический дизайн.

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

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

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

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

Итак, типографика – это искусство создания и расположения текста с помощью различных типографических приемов. Она включает в себя выбор шрифтов, размеров, интервалов, выравнивания и цвета текста, а также использование различных элементов дизайна, таких как заголовки, подзаголовки, списки и т.д. Цель типографики – сделать текст более читабельным, привлекательным и легким для восприятия. Она широко используется в печатной продукции, такой как книги, журналы, газеты и рекламные материалы, а также в веб-дизайне [4].

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

Первым делом, необходимо разобраться в разнице между терминами "шрифт" и "гарнитура". Многие люди ошибочно считают их синонимами. На самом деле это два разных понятия. Гарнитуры – это набор типографических знаков и символов. Это буквы, цифры и другие символы, при помощи которых люди составляют слова на бумаге или экране. Шрифты, с другой стороны, это то, что привычно называют полным набором знаков внутри гарнитуры, часто определенного стиля и размера. Шрифтами также часто называют специальные компьютерные файлы, которые содержат все символы и глифы одной гарнитуры. Когда люди говорят о «шрифтах», на самом деле подразумеваются гарнитуры, семейства начертаний шрифта (группы шрифтов, имеющих общие стилевые особенности) [1]. На Рисунке 1 представлено отличие между гарнитурой и шрифтом.

Рисунок 1. Отличие гарнитуры и шрифта.

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

Самые распространенные стили шрифтов: антиква и гротеск.

Антиква – это шрифт с засечками. Засечки – это короткие дополнительные штрихи на конце основных элементов знака и перпендикулярные им. Засечки бывают односторонними и двусторонними. Их форма может быть разнообразной: треугольной, прямоугольной, закругленной, декоративной, в виде тонкой горизонтальной линии и так далее. Этот шрифт с духом времени. Элегантный, дорогой, строгий. Может быть символом чего-то из древних времен, символом элитарности, символом знаний, искусства [5]. На Рисунке 2 представлен пример шрифта с антиквой.

Рисунок 2. Шрифт с антиквой.

Гротески – это шрифты без засечек. Они гораздо моложе антиквы, и впервые появились в конце восемнадцатого века. Этот шрифт самый универсальный. Он простой, читается легко, плотный, твердый. Может быть символом нового, свежего, современного. Также может быть символом минимализма, простого подхода, дружелюбного, легкого. На Рисунке 3 представлен пример шрифта с антиквой.

Рисунок 3. Шрифт с гротеском.

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

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

Текстовые – шрифты для набора текста, могут называться наборными. Это шрифты с более спокойным характером, с первого взгляда могут показаться простыми, но именно они обладают высокой читаемостью даже в мелких текстах. Хороший текстовый шрифт не отвлекает от чтения, выглядит цельно и приятно [3]. На Рисунке 4 представлен пример совместного использования акцидентного и текстового шрифтов.

Рисунок 4. Пример использования акцидентного и текстового шрифта.

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

1. Характер – гарнитура может быть нейтральной по характеру, тогда сфера применения будет достаточно широкой, а может обладать выразительным характером.
2. Контрастность – разница толщин между тонкими и жирными штрихами в знаках. Например, шрифт Better Vinegar Demo — шрифт с высоким контрастом.
3. Кегль – величина шрифта в наборе, определяется в пунктах. Это величина площадки, на которой размещается знак.
4. Кернинг – избирательное расстояние между буквами.
5. Трекинг – равномерное расстояние между буквами.
6. Интерлиньяж – вертикальный интервал между строками текста.
7. Пропорции – показатель изменения ширины одноименных знаков в начертаниях одной гарнитуры.

Одним из ключевых элементов любого шрифта является начертание. Начертание определяет жирность шрифта и может варьироваться в зависимости от стиля и вида шрифта. Каждое шрифтовое семейство или подсемейство может содержать определенное количество начертаний, которые могут быть представлены различными вариантами. Разновидности начертаний представлены на Рисунке 5. В шрифтовой гарнитуре может быть, как 3 начертания, так и 9, от самого тонкого к самому жирному. Распространенные начертания: Thin, Regular, SemiBold, Bold.

Рисунок 5. Виды начертаний.

Прямые начертания – основные (Рисунок 6). Такие шрифты используются чаще, поэтому они есть практически во всех шрифтовых гарнитурах.

Рисунок 6. Прямые начертания.

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

Рисунок 7. Наклонные начертания.

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

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

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

• тонкие: Thin, ExtraLight, Light;
• нормальные: Regular, Medium;
• полужирные и жирные: SemiBold, Bold, ExtraBold.

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

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

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

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

Рисунок 8. Текст с левой выключкой.

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

Центральную выключку лучше использовать до 3-4 строчек. Все, что идет дальше, воспринимается хуже. Также, следует переносить слова на новую строку по смыслу, заканчивая мысль. Рекомендуется использовать только в определенных случаях, например, при оформлении заголовков или цитат. Пример представлен на Рисунке 9.

Рисунок 9. Текст с центральной выключкой.

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

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

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

Рисунок 10. Акцентная и информационная типографика.

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

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

Рисунок 11. Типографический прием № 1.

Другим способом создания типографской иерархии является сочетание различных шрифтов. Например, использование геометрического шрифта без засечек для заголовков и классической засечек для тела. Стандартный подход заключается в установлении трех уровней типографской иерархии: заголовки, подзаголовки и основной текст. Каждый уровень использует другой шрифт, и иерархия дополнительно устанавливается с помощью калибровки. Если иерархия выстраивается внутри какого-то бренда, то в большинстве случаев также будет использоваться иерархия 3 уровней, но в порядке: заголовок, основной текст и небольшие подписи под текстом. Данный типографический прием представлен на Рисунке 12.

Рисунок 12. Типографический прием № 2.

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

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

Для того, чтобы создать высокую степень узнаваемости бренда, дизайнеры внимательно изучают характер шрифта, сравнивая его с позиционированием проекта. Бренду в сфере IT лучше подойдет что-то технологичное, а для банка или медицинской компании поискать более классический, традиционный шрифт со спокойным характером. Например, компания МТС уже много лет использует свои фирменные шрифты MTS Wide, MTS Text и MTS Compact. Несмотря на то, что бренд очень яркий, он использует нейтральные стили в шрифтах, которые приятно читать. Пример шрифтов находится на Рисунке 13.

Рисунок 13. Фирменные шрифты компании МТС.

Типографика передает индивидуальность, она также помогает установить настроение и тон графического дизайна. Таким образом, типографика визуально выявляет ценности бренда без необходимости четко указывать, что это за ценности [4]. Например, бренд, который ценит минимализм, может помочь передать эту ценность с помощью современного, легкого шрифта (Рисунок 14).

Рисунок 14. Выделение ценности бренда с помощью типографики.

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

Рисунок 15. Создание настроения с помощью типографики.

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

Рисунок 16. Создание визуального воздействия с помощью типографики.

Программы, с помощью которых можно реализовать все графические приемы о которых говорится в статье:

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

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

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

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

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

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

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

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

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

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

FontForge – бесплатный и открытый редактор шрифтов, который позволяет создавать и редактировать шрифты, а также работать с метриками и кернингом. FontForge поддерживает множество форматов шрифтов, включая TrueType, OpenType и PostScript.

Краткий алгоритм создания типографики представлен в виде блок-схемы (Рисунок 17). Данная диаграмма отражает перечисленные ключевые особенности создания типографики применимо к современным продуктам.

Рисунок 17. Алгоритм создания типографики.

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

Итогом работы является алгоритм создания типографики для современного продукта.

Список литературы

1. О шрифте / Эрик Шпикерманн – Москва: Издательство: «МИФ», 2017.
2. Книга про буквы от Аа до Яя / Юрий Гордон – Москва: Издательство: «Студия Артемия Лебедева», 2021.
3. Шрифтовое мышление / Эллен Лаптон – Москва: Издательство: «Студия Артемия Лебедева», 2023.
4. Шрифт в айдентике, рекламе, многостраничниках, упаковке, навигации и вебе/Браэм Гаральд – Москва: Издательство: «Студия Артемия Лебедева», 2019.
5. Образцы шрифтов/Ян Чихольд – Москва: Издательство: «Студия Артемия Лебедева», 2012.