Введение
Рукописные тексты смотрятся непривычно в сфере цифрового дизайна. Тем самым они освежают интерфейсы и привлекают внимание пользователей. Но при работе с рукописным текстом дизайнер должен соблюдать баланс между эстетикой и функциональностью, креативностью и читабельностью.
В этой статье мы расскажем об использовании рукописных шрифтов в UX/UI-дизайне. Мы обсудим их преимущества и недостатки, восприятие с психологической точки зрения, а также лучшие практики для создания ваших макетов и вдохновляющие примеры. Кроме того, мы поделимся полезными ресурсами для тренировки насмотренности и подбора шрифтов.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5dfbd3d98347dda358919_Frame%201321318096.webp)
Что такое рукописный текст
Под «рукописным» подразумевается текст, напечатанный шрифтом, который имитирует настоящий рукописный почерк. Это создает впечатление, что текст написан от руки. Такой прием делает дизайн более оригинальным и индивидуальным. Чаще всего их используют для оформления заголовков, цитат и расставления акцентов.
Мы знаем, что стандартные шрифты отлично подходят для строгих, серьезных и функциональных товаров. Что касается рукописных шрифтов, они хорошо работают для оформления интерфейсов, связанных с едой, модой, впечатлениями, товарами для ухода за собой и т. д. Поскольку они вызывают больший эмоциональный отклик и привязанность.
Преимущества рукописных шрифтов
Если суммировать преимущества использования рукописных шрифтов, то к ним относятся:
1. Уникальность и индивидуальность
Использование рукописных шрифтов дает возможность выделиться и привлечь внимание аудитории. Ведь каждый почерк уникален, поэтому рукописные шрифты ассоциируются с отдельной личностью.
2. Передача настроения и эмоций, повышение экспрессивности
Рукописные шрифты хорошо передают эмоции. Они также могут создавать атмосферу, нужную для конкретного продукта или сайта.
3. Усиление брендинга и идентичности
При создании логотипов, упаковок и других элементов брендинга рукописный шрифт помогает создать запоминающийся дизайн. Это касается и создания интерфейсов.
4. Добавление креативности и эстетичности
Рукописные шрифты могут разнообразить типографику вашего интерфейса, привнести яркие акценты и контрасты.
5. Повышение узнаваемости
Если вы сможете создать ассоциацию между брендом и шрифтом, пользователи будут вспоминать и узнавать ваш бренд быстрее.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e009390d565f35084f78_Frame%201321318096%20(1).webp)
В то же время нужно иметь в виду некоторые недостатки рукописных шрифтов:
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e0618c2b00e60d28286d_Frame%201321318096%20(1)%20(1).webp)
Психология восприятия рукописных шрифтов
Если вы знаете, как работает человеческое восприятие, вы сможете вызвать нужную реакцию у пользователей с помощью различных шрифтов. Поэтому давайте немного поговорим про ассоциации.
Рукописные шрифты разнообразны: некоторые можно назвать забавными, милыми, непринужденными, а другие — традиционными и старомодными. Поэтому при выборе вида рукописного шрифта учитывайте, к какой категории он относится. Это поможет вам избежать несоответствия между дизайном и содержанием интерфейса.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e09d43030c807ff830cc_Frame%201321318096%20(1)%20(2).webp)
Также существуют общие представления о том, что выражают те или иные характеристики шрифтов:
Поэтому при выборе шрифта также думайте о целевой аудитории: ее составе, возрасте, предпочтениях и ожиданиях.
Полезные советы
Далее мы поделимся советами о том, как использовать рукописные шрифты, с чем их можно сочетать, и как обеспечить читаемость таких текстов. Но давайте начнем с общих правил:
1. Не используйте слишком много гарнитур (семейств шрифтов)
Обычно для создания хорошей типографики достаточно использовать две гарнитуры, которые хорошо сочетаются между собой. Для очень минималистичных интерфейсов можно выбрать всего одну гарнитуру и по необходимости менять ее начертания (жирный, курсив и т. д.). В редких случаях допустимо использовать три гарнитуры, но этот вариант не подходит для начинающих дизайнеров.
2. Выбранная гарнитура должна хорошо смотреться в любом размере
Это правило связано с форматом экранов разных устройств. Часть пользователей будут просматривать ваш сайт с компьютеров и ноутбуков, а часть — с мобильных устройств. По этой причине вам придется менять размер шрифтов, при этом надписи всегда должны оставаться разборчивыми и аккуратными.
3. Используйте рукописный шрифт в ограниченном количестве
Основной текст должен быть хорошо читаемым. Поэтому рукописный текст следует использовать для отдельных элементов, чтобы придать выразительности.
4. Определите и переиспользуйте набор правил для шрифтов во всем интерфейсе
Используйте одинаковый набор характеристик шрифта для текстов и надписей с одинаковыми функциями. Например, на всех кнопках должен быть одинаковый шрифт. Это сделает процесс создания дизайна более упорядоченным, а пользователю будет легче ориентироваться в интерфейсе.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e125bc5500b027dfaac7_Frame%201321318096%20(2).webp)
Как визуально обыграть рукописный шрифт
Вот несколько идей, как можно внедрить рукописный текст в интерфейс так, чтобы это выглядело уместно:
- Используйте контраст: в пару к рукописному шрифту подберите минималистичный гротескный шрифт.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e224b9b91cc76151fc16_Frame%201321318097.webp)
- Создавайте акценты: сделайте рукописными только ключевые фразы или слова. Более креативный вариант — выделить одну букву в слове. Такой прием будет привлекать внимание и освежать композицию в целом.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e25ef6f1b3a27c1af255_Frame%201321318098.webp)
- Можно усилить эффект рукописи, если выбрать шрифт с имитацией кисти, пера или фломастера.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e289e51a2d70165811b5_Frame%201321318100.webp)
- Рукописный шрифт уместен для создания логотипов и иллюстраций, которые затем можно разместить в вашем интерфейсе.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e2bc9cb12efb2bd3230a_Frame%201321318099.webp)
Как сделать рукописный шрифт читаемым
Примеры интерфейсов с использованием рукописного текста
Приведем еще несколько примеров удачных интерфейсов, в которых использованы рукописные шрифты.
- Рукописная буква «M» используется в качестве акцента для заголовка:
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e3bb53c299c14a4a7227_Frame%201321318100%20(1).webp)
- Рукописный шрифт используется в качестве заголовка и акцента для текста:
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e3fb2d4d33fcbdd05886_Frame%201321318102.webp)
- Рукописный шрифт используется в качестве декоративного элемента, дополняющего композицию:
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e49e97a019f3817743b8_Frame%201321318102%20(1).webp)
- Рукописный шрифт используется в качестве акцента для заголовка и небольшой надписи, поэтому ее несложно прочитать:
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e4d7bb25607c123e4af6_Frame%201321318101.webp)
- Рукописный шрифт используется в качестве заголовка и сочетается с гротескным шрифтом, который используется для основного текста:
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e526f6f1b3a27c1d2873_Frame%201321318103.webp)
Ресурсы для развития насмотренности и поиска шрифтов
В дополнение мы поделимся несколькими ресурсами, где вы можете анализировать, находить и скачивать новые шрифты. Начнем с более очевидных ресурсов:
- Google Fonts — коллекция самых популярных и базовых шрифтов.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e68d8d285038e38e0953_Frame%201321318102%20(2).webp)
- Adobe Fonts — большая база шрифтов для работы в Adobe Creative Cloud.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e6a8e641f444eec8733f_Frame%201321318103%20(1).webp)
- Font Squirrel — коллекция качественных шрифтов, которые можно использовать в коммерческих целях бесплатно.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e6c2bb25607c123fb215_Frame%201321318105.webp)
- FontSpace — база бесплатных шрифтов.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e6da714f7b1d54e9539d_Frame%201321318104.webp)
Кроме того, можно использовать сайты студий, которые занимаются разработкой шрифтов. Там можно купить оригинальные и необычные шрифты, а также посмотреть примеры их использования.
- Paratype — здесь вы найдете кириллические версии популярных шрифтов, которые были специально адаптированы профессионалами.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e6fcfcce76dcef89078a_Frame%201321318106.webp)
- Type.today и Tomorrow — два магазина шрифтов, в первом представлены качественные универсальные шрифты, а во втором — экспериментальные и дерзкие варианты.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e718eca0c5f8eecec285_Frame%201321318107.webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e73a694a7ab5b158ce40_Frame%201321318108.webp)
- Pangram Pangram — сайт канадской студии, где каждому шрифту посвящена отдельная страница.
Здесь можно найти историю шрифтов и рекомендации по их использованию. Кроме того, в разделе Font in Use вы найдете примеры использования шрифтов в дизайне.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e756b1fcbc8f156340b4_Frame%201321318109.webp)
- OH no Type — сайт калифорнийского дизайнера, который открыл свою студию, чтобы работать над экспериментальными шрифтами. Шрифты можно использовать бесплатно в личных целях и некоторых коммерческих проектах.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/65d5e770ae8a8c896dd59a58_Frame%201321318110.webp)
Заключение
Итак, рукописные шрифты привлекают и пользователей, и дизайнеров. Их главное преимущество заключается в том, что они хорошо передают эмоции, настроение и создают нужную атмосферу.
Главное при работе с рукописными шрифтами — подобрать вариант, который подойдет для вашей аудитории и тематики сайта или приложения.
Кроме того, важно убедиться в том, что такой шрифт не затрудняет чтение контента. Для этого учитывайте контрастность фона и шрифта, размер и начертания символов, а также общую структуру и организацию текста.