Модульная типографическая шкала: как создать согласованную систему типографики.

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

При неправильном подходе вы получаете семнадцать размеров шрифта, которые никто не может защитить, заголовки, которые борются с основным текстом за иерархию, и ежеквартальное совещание по редизайну, где кто-то предлагает «давайте просто стандартизируем размеры», и никто не знает, к чему именно следует стремиться. Шкала — это то, к чему вы стремитесь. В этой статье рассказывается, как создать такую ​​шкалу, которая выдержит испытание реальным продуктом, с реальными соотношениями, реальной структурой токенов и переводами Figma и Tailwind, которые делают её реализуемой.

Что такое модульная шкала размеров шрифта

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

Выберите базовый размер, скажем, 16 пикселей, и соотношение, скажем, 1,25. Умножьте 16 на 1,25, и вы получите 20. Умножьте 20 на 1,25, и вы получите 25. Продолжайте, и вы получите 31, 39, 49, 61. Разделите 16 на 1,25, и вы получите 12,8. Разделите это на 1,25, и вы получите 10,24. Это и есть шкала. Восемь размеров, одно базовое значение, одно соотношение, полная математическая согласованность.

Причина, по которой это работает, психофизическая. Человеческое зрительное восприятие реагирует на соотношения, а не на абсолютные различия. Переход от 12 к 14 воспринимается примерно так же, как переход от 24 к 28, поскольку оба значения представляют собой примерно одинаковый мультипликативный шаг. Линейная гамма (12, 14, 16, 18, 20, 22) кажется тесной вверху и слишком разреженной внизу. Модульная гамма кажется ровной, потому что относительно так оно и есть.

Та же логика лежит в основе музыкальных интервалов (октавы — 2x, квинты — 1,5x, кварты — 1,333x), фотографических апертур и большей части теории архитектурных пропорций. Тип просто позаимствовал это. Названия соотношений, которые вы увидите в этой статье (малая секунда, чистая кварта, золотое сечение), заимствованы из музыки не случайно: они описывают тот же тип перцептивных отношений.

Пять соотношений, которые охватывают реальные продукты

Большинство продуктов находятся в диапазоне от 1,125 до 1,618, и каждое соотношение несет в себе определенный сигнал плотности.

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

| Соотношение | Название | Сигнал плотности | Реальная реализация |

|------:|------|----------------|---------------------|

| 1.125 | Малая секунда | Плотный, насыщенный данными, Vercel, Geist, большинство административных панелей |

| 1.2 | Малая треть | Компактный, сбалансированный | Масштаб по умолчанию Tailwind |

| 1.25 | Большая треть | Стандартный редакционный интерфейс | Stripe, роли Material 3 |

| 1.333 | Идеальная четверть | Щедрый, журнальный стиль | Редакционные сайты, длинные блоги |

| 1.618 | Золотое сечение | Эффектный, ориентированный на отображение | Маркетинговые страницы, сайты с главными героями |

Иногда появляются еще два. 1,414 (увеличенная кварта, квадратный корень из 2 и пропорция, лежащая в основе формата A4) находится между идеальной квартой и идеальной квинтой и является разумным выбором для продуктов, оформленных в стиле журналов, которым требуется на один шаг больше драматизма, чем дает 1,333. 1,5 (идеальная квинта) громче, чем 1,333, и тише, чем 1,618, и является значением по умолчанию во многих генераторах маркетинговых страниц.

Вы можете использовать соотношения за пределами этого диапазона, но обычно этого делать не следует. Ниже 1,1 шаги настолько малы, что сливаются друг с другом, и вы не сможете с первого взгляда отличить заголовок 3 от заголовка 4. Выше 1,7 шкала увеличивается настолько быстро, что у вас заканчиваются пригодные для использования промежуточные размеры. Дизайнеры, которым нужен более широкий диапазон, чем дает 1,618, обычно решают не ту задачу: им нужны две шкалы, а не одна большая.

Выберите необходимое соотношение плотности

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

Если продукт — это панель управления, административная панель, CRM, аналитический инструмент или что-либо еще, где пользователь часами читает строки плотной информации, по умолчанию используйте соотношение 1,125 или 1,2. Узкое соотношение означает, что размеры заголовков не отвлекают внимание от данных. Иерархия по-прежнему работает, потому что на этом уровне она в основном создается за счет веса, цвета и интервалов, а не размера.

Если продукт — это маркетинговая страница SaaS, контент-сайт, страница продукта или документация, по умолчанию используйте соотношение 1,25 или 1,333. Средние соотношения обеспечивают достаточную выразительность заголовков, чтобы выделить разделы, не делая основной текст по сравнению с ними слишком мелким. Именно здесь находится большинство B2B-продуктов, и именно здесь сходятся Tailwind, Material и Stripe. Если продукт относится к редакционному, журнальному или рекламному формату, например, длинное издание, сайт о моде или микросайт рекламной кампании, по умолчанию используйте соотношение сторон 1,414 или 1,618. Широкое соотношение означает, что заголовки выглядят как заголовки, заслуживающие целого блока заголовка. Основной текст может оставаться приемлемым, поскольку промежуток между заголовком и основным текстом выполняет свою работу.

Ошибка заключается в выборе соотношения сторон, потому что оно звучит впечатляюще (золотое сечение — известный пример), и применении его к продукту, которому такая эффектность не нужна. Соотношение 1,618 на CRM-системе — это нечитаемый шум. Соотношение 1,125 на редакционном сайте выглядит бледным. Выберите соотношение сторон, которое действительно нужно вашему продукту, а затем зафиксируйте его.

Зафиксируйте базовый размер перед масштабированием

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

По умолчанию для основного текста на веб-сайте используется 16 пикселей. По умолчанию в браузерах используется размер 16, в таблицах стилей пользовательского агента — 16, медианный предпочтительный размер для чтения для взрослых — 16, а рекомендации по доступности от WCAG и Apple Human Interface Guidelines рассматривают 16 как минимальный размер для основного текста. Вы можете использовать 17 или 18, если аудитория старше или если продукт предполагает интенсивное чтение, но никогда не следует опускаться ниже 16 для основного текста.

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

Для мобильных устройств вы можете уменьшить базовое значение (до 15 или 16) и использовать относительные единицы измерения. Для печати базовое значение обычно составляет 11 или 12 пунктов, и соотношения остаются теми же. Для документации с блоками кода установите базовое значение для основного текста на 16, а для кода — на 14, применив то же соотношение к шкале кода. Базовое значение задается для каждого носителя, соотношение — для каждого продукта, и оба решения принимаются один раз.

Еще одно правило. На веб-сайтах базовое значение задавайте в rem, а не в px. Вся шкала должна быть выражена в rem, чтобы предпочтения пользователя относительно размера шрифта и инструменты доступности (масштабирование, режим чтения, масштабирование в браузере) корректно отображались. Tailwind уже это делает. Material делает это. Динамический шрифт iOS от Apple делает то же самое. Если ваша шкала жестко задана в пикселях, вы боретесь с платформой.

Сгенерируйте шаги, обозначьте их по назначению

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

Возьмите базовое значение 16 пикселей и соотношение 1,25. Этапы следующие:

• 10 (очень маленький заголовок, сноска)
• 13 (маленький, второстепенный текст)
• 16 (основной текст)
• 20 (лидер, большой основной текст)
• 25 (h4, маленький заголовок)
• 31 (h3, средний заголовок)
• 39 (h2, большой заголовок)
• 49 (h1, заголовок страницы)
• 61 (заголовок, заголовок-герой)

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

Теперь дайте им имена. Не «text-31» или «39px». Назовите их по роли: заголовок, маленький, основной текст, лидер, h4, h3, h2, h1, заголовок. Названия ролей — это договор с инженерами, а не значения в пикселях. Значение в пикселях может меняться, если меняется базовое значение или соотношение сторон, но роль остается той же. h1 всегда является самым крупным заголовком. body всегда является базовым. caption всегда является самым мелким читаемым текстом.

Именно это делает шкалу системой, а не электронной таблицей. Дизайнер говорит: «Это body», а инженер выпускает text-body. Если шкала изменится в следующем квартале, body по-прежнему будет означать body, и каждый компонент автоматически получит новое значение. Никому не нужно искать каждое число 16 в коде и менять его на 17.

В Material Design 3 шкала называется по роли: display, headline, title, label, body, с вариантами размера (large, medium, small) внутри каждого. В HIG Apple используются следующие типы шрифтов: Large Title, Title 1, Title 2, Title 3, Headline, Body, Callout, Subhead, Footnote, Caption 1, Caption 2. В Tailwind используются шрифты text-xs до text-9xl, которые представляют собой размеры для футболок, а не именование ролей, и это единственное место, где настройки по умолчанию в Tailwind, возможно, слабее, чем в Material. Большинство команд, которые внедряют Tailwind, в конечном итоге добавляют псевдонимы с именами ролей поверх классов для футболок.

Преобразование шкалы в дизайн-токены

Токены превращают шкалу из электронной таблицы дизайнера в контракт команды.

Дизайнерские токены — это именованные значения, представляющие дизайнерские решения. Для шкалы шрифтов вам нужны три слоя:

1. Исходные токены. Фактические значения размеров. 1. **CODEI0⟧, font-size-200 и т. д., или с именами типа font-size-body, font-size-h1. Это источник истины.

2. Семантические токены. Псевдонимы, выражающие намерение. text-heading-page, text-body-default, text-caption. Семантические токены указывают на исходные токены. Компоненты используют семантические токены, никогда не используя исходные напрямую.

3. Токены компонентов. Привязки внутри конкретных компонентов. card-title-size указывает на text-heading-card, который указывает на font-size-200. Токены компонентов позволяют переопределять параметры для каждого компонента без нарушения работы системы.

Минимальный JSON-файл токенов для 16-базовой шкалы с соотношением сторон 1,25:

{
  "font-size": {
    "raw": {
      "100": { "value": "0.625rem" },
      "200": { "value": "0.8125rem" },
      "300": { "value": "1rem" },
      "400": { "value": "1.25rem" },
      "500": { "value": "1.5625rem" },
      "600": { "value": "1.9375rem" },
      "700": { "value": "2.4375rem" },
      "800": { "value": "3.0625rem" },
      "900": { "value": "3.8125rem" }
    },
    "semantic": {
      "caption":  { "value": "{font-size.raw.100}" },
      "small":    { "value": "{font-size.raw.200}" },
      "body":     { "value": "{font-size.raw.300}" },
      "lead":     { "value": "{font-size.raw.400}" },
      "h4":       { "value": "{font-size.raw.500}" },
      "h3":       { "value": "{font-size.raw.600}" },
      "h2":       { "value": "{font-size.raw.700}" },
      "h1":       { "value": "{font-size.raw.800}" },
      "display":  { "value": "{font-size.raw.900}" }
    }
  }
}

Эта структура является переносимой. Style Dictionary, Tokens Studio, Specify, Supernova — все они считывают этот формат и генерируют Figma переменные, CSS-переменные, конфигурацию Tailwind, константы iOS Swift, Android XML — всё, что требуется платформам. Токены являются исходным кодом. Всё остальное генерируется автоматически.

Передача шкалы в Figma переменные

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

Создайте коллекцию переменных под названием Typography. Внутри добавьте числовую переменную для каждого размера исходного изображения: от size/100 до size/900, с эквивалентными значениями пикселей в rem (10, 13, 16, 20, 25, 31, 39, 49, 61). Затем добавьте второй уровень псевдонимов: text/caption, text/small, text/body, text/lead, text/h4, text/h3, text/h2, text/h1, text/display. Каждый псевдоним указывает на переменную размера исходного изображения.

Затем создайте стили текста, по одному для каждой роли. Heading/H1 использует text/h1 для размера, шрифт заголовка — для семейства шрифтов, толщину заголовка — для толщины, а межстрочный интервал — для соотношения межстрочного расстояния. Body/Default использует text/body, шрифт основного текста — стандартного начертания. Повторите для каждой роли.

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

Сочетайте это с настройкой режимов, если вы поддерживаете несколько режимов плотности. В «компактном» режиме можно переопределить исходные переменные размера, используя соотношение 1,125 для более плотного отображения. В «комфортном» режиме можно использовать 1,25. Псевдонимы остаются прежними. Компоненты не меняются. Масштаб просто смещается под ними. Вот что вам даёт система.

Подключение масштаба к CSS Tailwind

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

Замените значение по умолчанию fontSize в Tailwind на ваш масштаб в tailwind.config.js:

module.exports = {
  theme: {
    fontSize: {
      'caption':  ['0.625rem',  { lineHeight: '1rem' }],
      'small':    ['0.8125rem', { lineHeight: '1.25rem' }],
      'body':     ['1rem',      { lineHeight: '1.5rem' }],
      'lead':     ['1.25rem',   { lineHeight: '1.75rem' }],
      'h4':       ['1.5625rem', { lineHeight: '2rem' }],
      'h3':       ['1.9375rem', { lineHeight: '2.375rem' }],
      'h2':       ['2.4375rem', { lineHeight: '2.875rem' }],
      'h1':       ['3.0625rem', { lineHeight: '3.5rem' }],
      'display':  ['3.8125rem', { lineHeight: '4.25rem' }],
    },
  },
}

Теперь text-h1 в разметке означает то же самое, что и Heading/H1 в Figma. Имя класса — это контракт. Разработчики не выбирают размеры, они выбирают роли, и роль определяется правильным значением в пикселях во время сборки.

Высота строк здесь не произвольна. Шаблон таков: узкая высота строки для основного текста для небольших размеров, более свободное межстрочное расстояние для основного текста и межстрочного расстояния, снова узкое межстрочное расстояние для заголовков. Общепринятое правило: межстрочный интервал основного текста 1,5, межстрочный интервал заголовка 1,1–1,2, с переходом от 1,3 до 1,4 вокруг межстрочного интервала и размера заголовка h4. Вы можете выразить это как другую шкалу (шкалу межстрочного интервала) или как значения для каждого шага, но соотношение между размером и межстрочным интервалом должно быть продуманным, а не на глаз.

Если вы хотите сохранить доступные классы Tailwind по умолчанию вместе с вашей шкалой (для устаревшего кода или сторонних компонентов), используйте extend вместо полной замены fontSize. Но долгосрочная цель — одна шкала, а не две. Две шкалы шрифтов в одном продукте — это всего лишь одна шкала шрифтов и множество случайностей.

Сочетайте шкалу с реальным руководство по сочетанию шрифтов для выбора шрифтов и система проектирования фреймворком, который поместит шкалу в контекст. Шкала — это одна часть типографической системы, выбор шрифта и сопоставление ролей — другие части. Нужна рабочая шкала, реальные токены и Figma + правильная настройка Tailwind с самого начала? Нанимайте Brainy. Мы поставляем полные типографические системы через BrandBrainy и UXBrainy, объединяя токены, переменные Figma и конфигурацию Tailwind в единую систему.

Правила управления, поддерживающие жизнеспособность шкалы

Каждая мертвая типографическая шкала умирала одинаково, по принципу исключения.

Три правила позволят сохранить шкалу жизнеспособной дольше, чем любой инструмент:

Правило первое: каждый новый компонент выбирает роли, а не размеры. Дизайнер, создающий карточку, выбирает Body для основного текста, H3 для заголовка, Caption для временной метки. Он не вводит font-size: 18px в инспектор. Если роль не существует, они предлагают новую роль через систему, а не делают разовое переопределение.

Правило два: исключениям присваивается имя и дата. Если маркетинговой команде нужен заголовок размером 72 пикселя для главного элемента на странице кампании, а размер отображения составляет 61 пиксель, исключению присваивается имя (hero-marketing-q3-launch) и дата. После запуска кампании исключение либо включается в шкалу (если оно многоразовое), либо удаляется (если это было разовое исключение). Никаких анонимных переопределений.

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

Команды, которые теряют свою шкалу типографики, всегда рассказывают одну и ту же историю потом. Кому-то понадобился размер 17 пикселей для одной кнопки, кому-то другому — 21 пиксель для одного баннера, и спустя шесть месяцев в коде оказалось сорок семь размеров шрифтов, и никто не может сказать, какие из них настоящие. Шкала исчезла. Осталось лишь кладбище размеров шрифтов.

Этого можно избежать, рассматривая шкалу как контракт, а не как электронную таблицу. Контракт обеспечивается инструментами (стили Figma, классы Tailwind, правила линтинга) и проверкой. Контракт пересматривается на ежеквартальной проверке. Всё, что выходит за рамки контракта, — это ошибка.

Часто задаваемые вопросы

Что такое модульная шкала шрифтов?

Модульная шкала шрифтов — это система, в которой каждый размер шрифта в продукте генерируется путем применения одного соотношения к одному базовому размеру. Выберите базовый размер, обычно 16 пикселей для веб-сайтов, выберите соотношение сторон, обычно от 1,125 до 1,618, и многократно умножайте или делите базовый размер на это соотношение, чтобы получить шаги. В результате получается шкала, где каждый размер математически связан с каждым другим размером, что придает типографике ощущение внутренней согласованности, недоступное при произвольном выборе пикселей.

Какое соотношение сторон следует использовать для моей шкалы шрифтов?

Выберите соотношение сторон, соответствующее плотности, необходимой для вашего продукта. Используйте 1,125 или 1,2 для продуктов с большим количеством данных, таких как панели мониторинга и инструменты администрирования, где заголовки не должны отвлекать внимание от данных. Используйте 1,25 или 1,333 для стандартных маркетинговых страниц SaaS, контентных сайтов и страниц продуктов, где размещается большинство B2B-продуктов. Используйте 1,414 или 1,618 для редакционных материалов, журналов или рекламных материалов, где заголовки должны восприниматься как заголовки. Самая распространенная ошибка — выбор соотношения сторон, потому что оно звучит впечатляюще, а не потому, что оно подходит для продукта.

Сколько размеров должна иметь шкала размеров шрифта?

Большинство готовых к использованию шкал имеют от семи до девяти размеров. Подпись, малый шрифт, основной текст, межстрочный интервал, h4, h3, h2, h1 и заголовочный текст охватывают практически все реальные поверхности продукта. Использование менее семи размеров оставляет пробелы, которые дизайнеры будут заполнять разовыми изменениями. Использование более десяти размеров сужает шкалу до такой степени, что некоторые размеры никогда не используются, и система становится сложнее в обслуживании. Оптимальным является диапазон от семи до девяти размеров, и названия ролей должны описывать назначение каждого размера, а не его значение в пикселях.

Следует ли использовать rem или px для значений шкалы размеров шрифта?

Для веб-сайтов используйте rem. Размер основного шрифта браузера по умолчанию составляет 16 пикселей, но пользователь может изменить его через настройки специальных возможностей и параметры браузера, и шкала на основе rem автоматически учитывает эти настройки. Шкалы на основе пикселей игнорируют их. Tailwind, Material Design и большинство современных дизайн-систем используют rem именно по этой причине. Для мобильных платформ следуйте указаниям платформы: iOS использует точки и поддерживает динамический тип, Android использует пиксели, не зависящие от масштаба. Принцип тот же: используйте относительные единицы измерения платформы, а не абсолютные.

В чём разница между модульной шкалой типов и токенами дизайна?

Модульная шкала типов — это математические вычисления, токены дизайна — это способ передачи этих вычислений. Шкала определяет значения (10, 13, 16, 20, 25, 31, 39, 49, 61). Токены — это именованный слой, который позволяет остальной части системы дизайна ссылаться на эти значения без жёсткого кодирования. Можно иметь шкалу без токенов, но она не сохранится в реальном коде. Можно иметь токены без шкалы, но значения будут произвольными. Полная система — это шкала, выраженная в виде токенов, с необработанными, семантическими и компонентными слоями, и передаётся в Figma и код через один и тот же исходный код.

Ошибка большинства систем классификации шрифтов

Система классификации шрифтов — это не список размеров шрифтов, это договор о том, как текст занимает иерархическое положение в вашем продукте.

Команды, которые правильно понимают это, не просто выбирают соотношение и останавливаются. Они выбирают соотношение, создают шкалу, выпускают её в виде токенов, интегрируют её в Figma и Tailwind, а затем обеспечивают её соблюдение посредством ежеквартального обзора и строгого правила без исключений. Шкала — это не конечный результат, а дисциплина. Конечный результат делает эту дисциплину возможной.

Команды, которые ошибаются, рассматривают шкалу как мудборд. Они выбирают красивые соотношения на макете из Pinterest, выпускают статичный документ с описанием спецификации и через шесть месяцев обнаруживают, что команда разработчиков так и не приняла её, потому что документ не был исполняемым кодом. Или они внедряют шкалу в Figma, но никогда не в Tailwind, и файлы дизайна и приложение для производства расходятся, пока не превращаются в два разных продукта с разными шрифтами. Или же они внедряют систему в обе системы, но управление ею так и не осуществляется, и в течение года количество исключений превышает количество правил.

Самый простой способ — рассматривать масштаб как контракт с самого первого дня. Математические расчеты определяют этапы. Токены делают эти этапы доступными для внедрения. Переменные Figma и конфигурация Tailwind делают этапы пригодными для использования по обе стороны линии проектирования и разработки. Управление поддерживает работоспособность этапов после запуска. Каждая часть системы выполняет одну задачу, и система выходит из строя, если какая-либо из них отсутствует.

Если вам нужен работающий модульный масштаб, реальные токены, реальные переменные Figma, реальная конфигурация Tailwind и план управления, который обеспечит целостность масштаба после запуска, нанять Brainy. Мы внедряем полноценные дизайн-системы через BrandBrainy и UXBrainy, с разработанными с самого начала токенами для шрифтовых шкал, типографическая система, связанными с цветовая палитра бренда, и правилами, которые поддерживают работоспособность системы после того, как команда приступает к ее внедрению.