Советы по UX/UI: Гайд по UX-типографике

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

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

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

Терминология в типографике

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

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

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

Размер: Существует множество способов представления размера в типографике:

• Пиксель (px)
• Пункт (pt)
• em: Размер шрифта является относительным по отношению к размеру родительского шрифта
• Корневой em (rem): относится к размеру шрифта корневого элемента
• Процент (%)
• Ширина или высота области просмотра (vw (viewport width) или vh (viewport height))

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

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

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

Межстрочный интервал, или интерлиньяж: Это расстояние между двумя базовыми линиями текста. Раньше при наборе текста использовались металлические полоски свинца, которые вставляли между каждой строкой, так в типографике появилось понятие «межстрочный интервал».

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

Иерархия и шкала шрифтов

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

При настройке системы шрифтов начните с размера, который вы будете использовать чаще всего (основной текст). Лучше всего, если этот размер будет равен 16-18 px. Затем на основе этого размера создайте шкалу шрифтов, которая поможет выстроить иерархию и последовательность в дизайне. Обязательно протестируйте систему шрифтов на нескольких устройствах.

Цвет и контраст

Убедитесь, что типографика обладает достаточной контрастностью. Стремитесь к уровню WCAG, равному AAA, подробнее о стандартах WCAG читайте здесь.

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

Длина строки и межстрочный интервал

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

Ширина текстового блока также имеет значение, потому что пользователю трудно читать длинные строки. Оптимальная длина строки для основного текста составляет 50-75 символов. Согласно рекомендациям Руководства по обеспечению доступности веб-контента (WCAG) длина строки текста должна включать до 80 символов.

Используйте стандартные шрифты

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

Ниже вы найдёте ссылки на несколько сайтов, где можно скачать бесплатные шрифты:

Google fonts. Одна из самых больших подборок бесплатных шрифтов в Интернете.

UrbanFonts: Ещё один замечательный ресурс, на котором представлено более 8.000 бесплатных шрифтов.

Font Squirrel: Font Squirrel собирает шрифты с других сайтов и размещает ссылки на них.

Создание шрифтовой шкалы для нескольких устройств

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

Затем разработайте шкалу: типичные размеры — 1,250x, 1,414x, 1,5x и 1,618x. В этом вам помогут такие сайты, как Modular Scale и Type Scale.

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

Типографика, язык, эстетика и их реализация — это всё разные темы. Из статьи вы узнали некоторые ключевые моменты из области типографики. А теперь несколько дополнительных советов:

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