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

«Шрифт—это красивая совокупность букв, а не совокупность красивых букв.»

Мэтью Картер

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

Почему важно использовать «правильную» типографику

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

Правила выбора типографики

1.  Цель и аудиторию проекта

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

2. Удобство восприятия текста

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

Подробнее:

2.1 Читаемость: Шрифты должны обеспечивать четкое различение между символами, а также хорошую разборчивость текста даже при малых размерах.

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

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

2.4 Стилистика: Учитывайте стилистику контента. Например, для длинных блоков текста на веб-сайтах хорошо подойдут шрифты с засечками, такие как "Serif", тогда как для заголовков можно использовать более современные шрифты без засечек, такие как "Sans-serif".

3. Соблюдение иерархии

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

4.  Иерархия заголовков

Ключевое правило применение заголовка - заголовок должен быть больше основного текста. Для выбора правильных размеров существует формула: H2= H1/ 1.618 Например:

H1 = 48

Тогда: H2 = 48/1.618 = 30 Данная формула поможет в правильном выборе заголовков в вашей работе.

5. Размер текста

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

12-14px - Не значительные подписи. Начертание Light или Extra-Light

14-24px - Текст. Зачастую Regular

16-24px - Кнопки. Medium - Bold

24 - 96px - Заголовки. Medium - Bold - Extra-Bold

6. Следование брендбуку

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

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

7. Выбор сочетаемых шрифтов

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

8. Правило близости