вебинар  «реальные кейсы: как искать и выполнять «Как найти первые заказы  на фрилансе»  3 декабря  в 19:00 по мск!

Рукописные шрифты в дизайне

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

Введение

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

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

Что такое рукописный текст

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

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

Преимущества рукописных шрифтов

Если суммировать преимущества использования рукописных шрифтов, то к ним относятся:

1. Уникальность и индивидуальность

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

2. Передача настроения и эмоций, повышение экспрессивности

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

3. Усиление брендинга и идентичности

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

4. Добавление креативности и эстетичности

Рукописные шрифты могут разнообразить типографику вашего интерфейса, привнести яркие акценты и контрасты.

5. Повышение узнаваемости

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

wonderfullywild.co.uk

В то же время нужно иметь в виду некоторые недостатки рукописных шрифтов:

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

Психология восприятия рукописных шрифтов

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

Рукописные шрифты разнообразны: некоторые можно назвать забавными, милыми, непринужденными, а другие — традиционными и старомодными. Поэтому при выборе вида рукописного шрифта учитывайте, к какой категории он относится. Это поможет вам избежать несоответствия между дизайном и содержанием интерфейса.
darina-cg.com

Также существуют общие представления о том, что выражают те или иные характеристики шрифтов:

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

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

Полезные советы

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

1. Не используйте слишком много гарнитур (семейств шрифтов)

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

2. Выбранная гарнитура должна хорошо смотреться в любом размере

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

3. Используйте рукописный шрифт в ограниченном количестве

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

4. Определите и переиспользуйте набор правил для шрифтов во всем интерфейсе

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

changers.studio

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

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

  1. Используйте контраст: в пару к рукописному шрифту подберите минималистичный гротескный шрифт.
Автор: Ann Filatova, ученица UPROCK
  1. Создавайте акценты: сделайте рукописными только ключевые фразы или слова. Более креативный вариант — выделить одну букву в слове. Такой прием будет привлекать внимание и освежать композицию в целом.
Автор: Andrew Smiriagin, ученик UPROCK
  1. Можно усилить эффект рукописи, если выбрать шрифт с имитацией кисти, пера или фломастера.
Автор: Mila Vasileva, ученица UPROCK
  1. Рукописный шрифт уместен для создания логотипов и иллюстраций, которые затем можно разместить в вашем интерфейсе.
Автор: Анастасия Дудузова, ученица UPROCK

Как сделать рукописный шрифт читаемым

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

Примеры интерфейсов с использованием рукописного текста

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

  1. Рукописная буква «M» используется в качестве акцента для заголовка:
Авторы: Kseniya Kalganova, Nastasia Bubentsova, ученицы UPROCK
  1. Рукописный шрифт используется в качестве заголовка и акцента для текста:
Автор: Alina P., ученица UPROCK
  1. Рукописный шрифт используется в качестве декоративного элемента, дополняющего композицию:
Автор: Sabina Alieva, ученица UPROCK
  1. Рукописный шрифт используется в качестве акцента для заголовка и небольшой надписи, поэтому ее несложно прочитать:
Автор: Yanina Kryuniuk, ученица UPROCK
  1. Рукописный шрифт используется в качестве заголовка и сочетается с гротескным шрифтом, который используется для основного текста:
Автор: Elizaveta Melkova, ученица UPROCK

Ресурсы для развития насмотренности и поиска шрифтов

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

  1. Google Fonts — коллекция самых популярных и базовых шрифтов.
  1. Adobe Fonts — большая база шрифтов для работы в Adobe Creative Cloud.
  1. Font Squirrel — коллекция качественных шрифтов, которые можно использовать в коммерческих целях бесплатно.
  1. FontSpace — база бесплатных шрифтов.

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

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

Здесь можно найти историю шрифтов и рекомендации по их использованию. Кроме того, в разделе Font in Use вы найдете примеры использования шрифтов в дизайне.

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

Заключение

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

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

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