Черная пятница в UPROCK!

Акцидентная типографика

Автор статьи:
,

Введение

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

Что такое акцидентная типографика

Акциденция (с лат.) — случайно появляющийся; случайное, несущественное свойство вещи по Аристотелю. Акциденция — эмоционально-окрашенная, заряженная фраза.
Акцидентные шрифты — шрифты, намеренно созданные с недостатками и несовершенствами, которые отличаются от классических своей уникальностью, асимметрией и нестандартной формой знаков. Они привлекают внимание и не используются в основном тексте.
hellosuperheroes.com

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

Особенности акцидентной типографики

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

Давайте конкретнее разберем дизайн, в котором акциденция будет уместна:

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

Преимущества и недостатки

Преимущества:

01
Уникальность
Контрастирует с традиционными шрифтами за счет необычной формы, более яркий и запоминающийся.
02
Акцент
Выделяет конкретную фразу или текст, привлекает внимание пользователей к определенной части контента.
03
Настроение
Передает эмоции и атмосферу, что помогает создать необходимое впечатление.
04
Брендинг
Акцидентный шрифт нередко является частью брендинга компании и работает на ее имидж.

Недостатки:

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

Немного из истории

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

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

Бесплатная газета 19-го века Oxford Chronicle

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

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

Шрифт в стиле ар-нуво, Sylvester

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

neura.adanede.com

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

Виды акцидентной типографики

Классификация акцидентной графики богата и разнообразна, рассмотрим основные ее виды.

Вариационные

«Сверх-». Крайние варианты привычного рисунка текстовых шрифтов: сверхжирные или сверхсветлые, сверхконтрастные и т.д.  Например, Infinity, Compact.

Шрифт Infinity

Декорированные. Шрифты с контуром, орнаментом и различными декоративными элементами. Например, Sapphire, Cloister Initials.

Шрифт Cloister Initials font

«Спецэффекты». Сломанные или прыгающие шрифты, часто с измененным контуром. Например, Drunk, Pollock, Crew.

Пример шрифта Crew

Имитационные

Подражают уже существующим или когда-то существовавшим способам проектирования символов.

Рукописные. Имитируют рукописный текст. Например: Pushkin, Cezanne, Ascript.

Пример шрифта Cezanne

Технические. Подражают машинному письму (на печатной машинке). Например, Blur, Trixie, Matrix.

Пример шрифта Blur

Стилистические. Имитируют стиль написания или шрифта определенной эпохи. Например, шрифт SK Sofuto имитирует стиль граффити, а SK Fillout отсылает к глитчам и цифровому дизайну.

Пример шрифта SK Sofuto в стиле граффити
Пример шрифта SK Fushimi, который отсылает к японской современной культуре

Геометрические

Состоят из простых геометрических форм и лишь напоминают символы традиционной формы. Например, New Zelek, Rastr.

Пример шрифта New Zelek

Предметные

Созданы из очертаний разных объектов, которые не являются буквами. Например, Mas D’Azil, Kamysh.

Пример шрифта Mas D’Azil

Комбинированные

Составные шрифты, которые собраны из частей разных шрифтов или деталей, характерных для разных стилистических групп. Например, Fudoni, NoShift, DeadHistory, Fourty-Nine Face.

Пример шрифта Fourty-Nine Face
Пример шрифта DeadHistory

Способы работы с акцидентной типографикой

Текст из разных гарнитур

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

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

01
Контрастное сочетание
Когда шрифты сильно отличаются друг от друга, но в них присутствует небольшое сходство. Как правило, контраст по форме.
02
Подобное сочетание
Когда пара схожа по большинству элементов, но имеется и небольшое отличие (толщина штриха, высота знаков, пропорции знаков, апертура*),
*апертура — открытость знаков.
Данный прием является мощным инструментом привлечения внимания, поэтому использовать его нужно с осторожностью. Например, это может быть название компании + лозунг (или описание сферы деятельности), название журнала + тема номера, имя исполнителя + название нового альбома и пр.
rossmorin.com
shilomagazine.xyz

Текст за изображениями

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

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

ahfire.ru

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

readymag.website
storyofbrutalism.com

Текст + изображения

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

Ключевые моменты:

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

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

heights.agency
pavilionpromotional.co
quivo.co

Текст в несколько слоев

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

  • Расстояние между элементами. Чем ближе вы располагаете элементы, тем сильнее становится ощущение напряжения.
  • Контраст. Наложение слоев часто используется в сочетании с контрастом цветов, форм и размеров, что усиливает эффект напряжения и делает дизайн более выразительным.

Советы по использованию:

01
Читабельность. Не перегружайте дизайн слоями и убедитесь, что важные моменты, например, дата и время, остаются легко читаемыми. Особенно, если вы готовить баннеры или афиши.
02
Подходящие шрифты. Шрифты с большим межбуквенным интервалом лучше подходят для наложения слоев, так как они обеспечивают достаточное пространство для изображений или других элементов.
03
Несколько цветов. Яркие контрастные цвета создадут напряжение и привлекут внимание к «наложенным» элементам.
Шрифт TT Lakes Neue
спортэкс.рф

Текст как графическая метафора

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

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

Трансформация очертаний:

01
Сжатие букв. Создает ощущения скорости и динамики. Например, в дизайне сайта спортивных мероприятий можно сжать буквы в заголовках, чтобы передать ощущение движения и мощи.
02
Расширение букв. Передает ощущения стабильности, монументальности и власти. Для премиальных брендов расширьте буквы в названии, чтобы усилить ощущения престижа и уверенности.
03
Наклон букв. Добавляет ощущения движения и динамики. Наклон букв в сторону может передавать ощущение падения или подъема, в зависимости от направления.
Не перегружайте дизайн слишком большим количеством деформированных букв, чтобы он не стал хаотичным и трудно читаемым. И всегда учитывайте контекст!
typographicposters.com
syndesicollection.com

Примеры шрифтов

SK Quadratica

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

Michelle Fox, Shriftovik Foundry

Epos

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

tomorrow.type.today

Carmin

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

futurefonts.xyz

Monstera

Создан дизайнером Spaghetype. В основе этого шрифта переработанные приемы каллиграфии и леттеринга.

futurefonts.xyz

Ghimli

Автор Артем Рулёв. Необычные формы у букв, сильный характер и образ шрифта.

futurefonts.xyz

Библиотека шрифтов Uprock

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

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

fonts.uprock.ru

Заключение

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

Бесплатный учебник по UX/UI‑дизайну
Все лонгриды