Как типографика может помочь сделать дизайн более интересным?

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

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

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

1. Определите иерархию шрифтов (и придерживайтесь ее!)

Это имеет решающее значение для восприятия контента. Поэтому:

• Следует сделать иерархию достаточно подробной, включая заголовки (от h1 до h6), абзацы (обычные и полужирные), мелкий текст и текст кнопок. В большинстве случаев нет необходимости использовать другие текстовые стили.
• Не используйте более двух разных шрифтов, потому что это может создать ощущение несоответствия. Даже одного шрифта может быть вполне достаточно.
• Не следует одновременно выделять текст с помощью полужирного начертания, курсива, подчеркивания и верхнего регистра.
• Придерживайтесь иерархии при разработке макетов. При работе над новой страницей следует избегать создания новых текстовых стилей. Единственная цель создания иерархии — повторное использование стилей, созданных вами ранее, для обеспечения согласованности между всеми страницами.

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

2. Внимание к деталям

Призовите своего внутреннего перфекциониста и учитывайте, что:

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

3. Размер и начертание имеют значение

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

• Легче управлять начертаниями для шрифтов без засечек. Начертания могут варьироваться от тонкого до очень жирного.
• Можно использовать вариативные шрифты и менять их начертания и ширину. Кстати, теперь Figma поддерживает вариативные шрифты! 

«Правильно подобранная типографика поможет продемонстрировать структуру и индивидуальность страницы или продукта». — Эллен Луптон (дизайнер, писатель и куратор)

4. Сетки, сетки и сетки

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

5. Выравнивание

Из-за того, что мы читаем слева направо в западных странах наиболее естественным является выравнивание текста по левому краю. Поэтому:

• Следует избегать выравнивания по правому краю.
• Будьте осторожны с центрированием и выравниванием текста по ширине.

6. Ширина текстового столбца

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

В абзацах идеальное количество слов в строке должно составлять от 8 до 12.

7. Высота строки (или интерлиньяж)

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

8. Обеспечение достаточного контраста

Нельзя забывать о доступности контента. Важно:

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

Подсказка: вы можете использовать плагин Figma под названием Contrast, чтобы проверить контрастность (см. ниже). 

9. Обводка букв

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

10. Анимация текста

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

• Анимации можно использовать для привлечения внимания к некоторым важным разделам веб-сайта (или приложения), например к призывам к действию.
• В любом случае делайте взаимодействия простыми. Они не должны быть препятствием или мешать навигации и юзабилити.

Заключение

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

Шрифт — это ключевой элемент в дизайне, и давайте закончим эту статью цитатой Роберта Брингхерста:

«Типографика существует, чтобы чтить контент».