Улучшение типографики в дизайн-системе

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

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

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

В ходе этой переработки я столкнулся с некоторыми концепциями, которыми хотел бы поделиться здесь:

‍

Размер шрифта

Выбор масштаба размера шрифта зависит от контекста, в котором он будет применяться.

Статья Джозефа Мюллера «Исследование адаптивных шкал шрифтов» содержит полезные рекомендации по поиску правильного ритма типографики в зависимости от типа проекта.

В нашей линейке B2B-продуктов мы уделяем приоритетное внимание панелям управления с высокой плотностью информации и экранам с большим объемом данных, где читаемость имеет первостепенное значение. Для обеспечения единообразия мы выбрали масштаб «Major Second» (соотношение 1,125), начиная с базового размера шрифта 14 пикселей и увеличивая или уменьшая его с шагом 12,5%.

Межстрочный интервал

Что касается межстрочного интервала, ведущие системы дизайна следуют следующему правилу:

Межстрочный интервал должен составлять не менее 1,5 размера шрифта;

Если вам интересно, почему, то ответ довольно прост: это часть критериев доступности, определенных WCAG (SC 1.4.12). Это означает, что минимальная высота строки должна составлять 1,5 размера шрифта (150%).

(размер шрифта) * 150% = высота строки

Размер шрифта = 16px

16 * 150% = 24px

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

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

Типографика с сеткой 4 пикселя

Выравнивание размеров шрифта и высоты строк по сетке 4 пикселя – это настоящий прорыв.

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

Мы решили эту проблему, округляя масштабированные размеры до ближайшего шага в 4px, например, округляя размер шрифта 12,25px до 12px для более четкого выравнивания.

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

«The Good Line Height» – это инструмент, позволяющий автоматически рассчитывать высоту строки на основе сочетания размера шрифта и сетки. Таким образом, при заданной шкале размера шрифта определение высоты строки становится проще простого.

Сочетание надписей и значков

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

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

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

Типографические токены

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

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

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

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

Адаптивная типографика

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

• Маленькие экраны (например, мобильные устройства): базовый размер шрифта 16 пикселей
• Средние экраны (например, ноутбуки): базовый размер шрифта 14 пикселей
• Большие экраны (например, компьютеры): базовый размер шрифта 18 пикселей

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

Особенности адаптации к маленьким экранам

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

1. Минимальный размер основного текста

Хотя в WCAG нет строгих рекомендаций по размеру шрифта, кроме требования, чтобы текст можно было изменять, общепринятая практика UX предполагает минимальный размер шрифта 16 пикселей для основного текста на мобильных устройствах. Это обеспечивает комфортную читаемость, не вызывая напряжения глаз. Чтобы достичь этого минимума, сохраняя гармонию с другими стилями, крайне важно реализовать плавную систему масштабирования, которая адаптируется последовательно (например, следуя шкале «Major Second»).

2. Работа с заголовками

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

3. Использование токенов для последовательной адаптации

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

Конвенции именования стилей текста

Использование таких имен, как h1, h2 и h3 для классов CSS, может создавать проблемы как с гибкостью, так и с доступностью в системе дизайна.

Семантические теги (<h1>, <h2> и т. д.) – это элементы HTML, которые помогают определять структуру и иерархию страницы, что крайне важно для экранных считывающих устройств и SEO. Но когда мы называем классы CSS таким же образом, это подразумевает, что класс всегда должен представлять именно этот конкретный уровень в иерархии. Это допущение ограничивает гибкость системы. Вместо этого крупные системы дизайна предпочитают использовать размеры одежды (например, title-md или title-xl), чтобы отделить решения по стилю от структуры страницы. Такой подход позволяет нам более гибко стилизовать типографику для различных сценариев использования, не вступая в конфликт с требованиями иерархии страницы.

Заключение

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

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