Про типографику в дизайн-системах Типографика — один из самых | /designer

Про типографику в дизайн-системах

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

1. Какие платформы собираемся поддерживать: iOS, Android, Web, macOS, Windows. Всё это совершенно разные миры, которые трудно синхронизируются.

2. Является ли какая-либо из них доминирующей для нашего продукта? На всех стульях не усидеть. То, что изначально опирается на iOS, может деградировать для веба или Android, и наоборот, не использовать потенциал iOS, например, поддержку Dynamic Type.

3. Собираемся ли делать дизайн на базе единого шрифта или единой шрифтовой пары для всех систем? Готовы ли отказаться от гайдов и классных возможностей определённых систем (вариативные шрифты на Android и в вебе против Dynamic Type на iOS).

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

5. Что будет, если потребуется добавлять новые стили между существующими? Например, между H1 и H2. Не будут ли они ломать шкалу стилей? А что будет, если в шкале появляются разные модификации стилей, вроде normal, medium, bold?

Здесь ответом может быть внедрение нескольких слоёв токенизации, которые между собой не смешиваются, а существуют параллельно, например: body.500-heavy, где body — семантика, 500 — условный средний размер по шкале размеров, а heavy — font-weight по абстрактной шкале.

@slashdesigner #дизайн_системы #для_профи