Типографика в дизайне

---

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

Функции типографического дизайна

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

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

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

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

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

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

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

Основы основ

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

Анатомия печати

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

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

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

— Семейство шрифтов — это группа похожих шрифтов с разными начертаниями. Начертания бывают жирные, полужирные, курсивные, тонкие. Некоторые гарнитуры вы знаете, даже если не работаете с текстами: Times New Roman, Arial, Calibri. 

— Полоса — это всё пространство, занятое текстом и изображениями. Это может быть страница книги, газеты, или сайта.

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

— Размер шрифта: Определяет, насколько шрифт большой или маленький.

— Кегль: Мера размера шрифта, определенная в пунктах (1 пункт = 1/72 дюйма). Это классическое понятие, пришедшее из печатной типографики в веб-графику.

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

— Межстрочный интервал: Расстояние между линейками строк текста и абзацами.

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

— Отступы или поля: Расстояние между текстом и краем страницы или блока.

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

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

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

Классификация шрифтов

Шрифты делятся на большие группы по областям применения и особенностям начертания.

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

— Антиквенные — шрифты с засечками, сделанные “под старину”, подвид наборных. Самый популярный шрифт этого семейства — Times New Roman. Добавляют тексту строгости и официальности. Любой шрифт с засечками входит в категорию Serif, без засечек — Sans Serif.

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

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

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

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

Правила швейцарской школы

Современные тенденции в оформлении шрифтов зародились в Швейцарии, в середине прошлого века. Большинство принципов швейцарской школы всё ещё актуальны в современном типографском дизайне. Сегодня они воспринимаются как универсальные, но существовали далеко не всегда. Вот главные из них:

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

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

— Семейственный принцип подбора шрифтов: Швейцарская школа типографского дизайна обычно использует небольшое количество шрифтов в одном проекте, что обеспечивает единообразие и чистоту визуального образа. Такие шрифты, как Helvetica, Akzidenz-Grotesk и Univers, часто используются в этом стиле.

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

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

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

— Использование графики и фотографий: Графика и фотографии, используемые в швейцарском стиле, часто абстрактные и геометричные, что подчёркивает минимализм и функциональность.

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

Подбираем шрифт для формата

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

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

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

— В печатной продукции, такой как книги, газеты и брошюры, оформление текста придаёт интонацию тексту, делает его не обезличенным, а конкретным. Некоторые издательства, такие как The New York Times, разрабатывают собственные шрифты для основного текста и заголовков.

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

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

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

Сочетания шрифтов

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

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

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

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

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

Популярные семейства шрифтов

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

1. Serif (с засечками):

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

   — Georgia: Хорошо подходит для веб-страниц и презентаций, особенно если требуется более формальное оформление.

2. Sans-serif (без засечек):

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

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

   — Verdana: Широко используется в веб-дизайне из-за своей хорошей читаемости на экране любого размера и адаптивности.

3. Monospaced (фиксированной ширины каждой буквы):

   — Courier New: Используется для создания визуального вида машинописного текста и в программировании, где важно сохранить фиксированное расстояние между символами. Стандартный шрифт кино- и театральных сценариев.

   — Consolas: Популярный среди программистов и используется в интегрированных средах разработки (IDE), в таких программах, как VSCode.

4. Handwriting (имитирующие рукописный):

   — Comic Sans MS: Обычно используется в детских материалах, а также в более легких и непринужденных дизайнах. Сейчас считается немного устаревшим.

   — Brush Script: Подходит для декоративных заголовков и логотипов, где нужно придать рукописный, каллиграфический вид.

5. Display (декоративные, акцентные):

   — Bodoni: Часто применяется для создания стильных и выразительных заголовков в дизайне.

   — Gotham: Используется в рекламных материалах, логотипах и наружной рекламе.

6. Альтернативные:

   — Helvetica Neue: Популярен в дизайне и рекламе, обеспечивает современный и чистый вид. Дефолтный шрифт приложения Keynote от Apple.

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

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

Разработка уникального шрифта

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

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

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

Идентичность бренда в шрифтах

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

— Gazprom: Компания Gazprom использует собственный брендовый шрифт Gazprom Neft Sans, который подчёркивает современность и профессионализмо Этот шрифт используется в их логотипе и брендовых материалах.

— Aeroflot: Авиакомпания Aeroflot использует шрифт Aeroflot который применяется в их логотипе и брендовых материалах. Этот шрифт подчеркивает авторитет и стиль авиакомпании.

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

— Mail.ru Group: Mail.ru Group использует шрифт BigCity Grotesque, что создает ассоциации с цифровыми технологиями и интернетом.

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

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

Юридические правила и ограничения

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

Для коммерческих проектов:

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

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

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

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

Для некоммерческих проектов:

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

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

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

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