Дизайн типографической системы: Как создать масштабируемую типографику

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

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

Эта непоследовательность — проблема типографической системы. И она решаема.

Что на самом деле содержит типографическая система

Настоящая типографическая система определяет пять вещей:

1. Типографический масштаб. Математическая зависимость между размерами вашего текста.
2. Сочетания шрифтов. Какие гарнитуры играют какие роли и почему.
3. Правила начертания и стиля. Когда использовать жирный, курсивный, средний и что означает каждое начертание.
4. Стандарты интервалов. Межстрочный интервал, межбуквенный интервал и интервал между абзацами для каждого размера.
5. Адаптивное поведение. Как каждый из вышеперечисленных элементов адаптируется к различным размерам экрана.

Если в вашей "типографической системе" отсутствует что-либо из этого, у вас есть выбор шрифтов, а не система.

Типографический масштаб — это основа

Типографический масштаб — это набор размеров шрифтов, сгенерированных на основе постоянного математического соотношения. Вместо того чтобы выбирать размеры на глаз (16px здесь, 24px там, возможно 36px для главного заголовка), вы выбираете базовый размер и соотношение, и все остальные размеры вытекают из этого.

Распространенные рабочие соотношения:

Начните с базового размера 16px (по умолчанию в браузере, доступно, читаемо) и умножайте для заголовков, делите для подписей и меток. Масштаб «Большая терция» от 16px дает вам: 10px, 12.8px, 16px, 20px, 25px, 31.25px, 39px. Округлите до чистых значений, и вы получите масштаб, который выглядит целенаправленным, а не произвольным.

Сочетание шрифтов — это стратегия

Интернет полон списков "лучших сочетаний шрифтов". Большинство из них — это советы по декорированию, замаскированные под советы по дизайну. Настоящее сочетание шрифтов — это стратегия.

Правила, которые действительно работают:

Контраст в структуре, гармония в пропорциях. Сочетайте геометрический гротеск с гуманистической антиквой. Структурный контраст создает визуальный интерес. Общая высота строчных букв и пропорции создают ощущение, что они подходят друг другу. Inter + Merriweather. DM Sans + Lora. Satoshi + Source Serif.

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

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

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

Правила начертания и стиля

Начертание — это иерархия. Жирный означает важный. Средний означает вспомогательный. Обычный означает основной текст. Светлый означает декоративный или второстепенный. Эти ассоциации заложены в то, как люди читают.

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

• H1: Жирный (700). Всегда. Это ваш самый громкий голос.
• H2: Полужирный (600) или Жирный (700). Выберите один, используйте его везде.
• H3: Средний (500). Достаточный контраст, чтобы быть заметным, не конкурируя с H2.
• Основной текст: Обычный (400). Читаемый, нейтральный, без затруднений.
• Подписи и метки: Обычный (400) или Средний (500) при меньших размерах.

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

Интервалы — это то, где системы ломаются

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

Правила межстрочного интервала:

Заголовкам требуется более плотный межстрочный интервал (от 1.1 до 1.3), потому что крупный текст создает слишком много вертикального пространства при соотношениях основного текста. Основному тексту требуется более свободный межстрочный интервал (от 1.5 до 1.8) для комфортного чтения. Распространенная ошибка — применение 1.5 ко всему, что заставляет заголовки «плавать», а основной текст — выглядеть стесненным при неправильном размере.

Правила межбуквенного интервала:

Крупный текст (заголовки, дисплейный) выигрывает от слегка отрицательного межбуквенного интервала (от -0.01em до -0.02em). Оптический интервал при больших размерах создает пробелы, которые кажутся шире, чем предполагалось. Мелкий текст (подписи, метки, заглавные буквы) выигрывает от слегка положительного межбуквенного интервала (от +0.02em до +0.05em), потому что плотный трекинг при малых размерах снижает читаемость.

Интервал между абзацами:

Используйте постоянный множитель вашей базовой единицы. Если ваша база составляет 16px с сеткой 4px, интервал между абзацами должен быть 16px или 24px, а не произвольным значением. Это поддерживает постоянный вертикальный ритм на каждой странице.

Адаптивное поведение

Типографическая система, которая работает только на одной контрольной точке, — это не система. Это скриншот.

Адаптивная типографика плавно масштабирует размеры шрифтов между контрольными точками с помощью CSS clamp(). Вместо того чтобы перескакивать с 16px на 14px в контрольной точке, размер интерполируется. Это устраняет рывки в макете, возникающие при резких изменениях контрольных точек.

font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem);

Сжатие масштаба на мобильных устройствах. Ваше соотношение масштаба для десктопа (скажем 1.250) создает слишком большой контраст на маленьком экране. Заголовок H1 размером 39px на десктопе работает. Заголовок H1 размером 39px на телефоне с экраном 375px — нет. Решение: сжать соотношение на мобильных устройствах (снизить до 1.125 или 1.150), сохраняя базовый размер. Иерархия сохраняется, размеры адаптируются.

Минимальные читаемые размеры. Никогда не опускайтесь ниже 16px для основного текста на мобильных устройствах. Никогда не опускайтесь ниже 12px для любого текста. Доступность не является необязательной, и мелкий текст на маленьких экранах подводит реальных пользователей.

Распространенные ошибки типографической системы

Шрифтовой буфет. Пять гарнитур, без обоснования. Каждая страница ощущается как другой бренд.

Одинокое начертание. Использование Thin (100) или Black (900) для одного декоративного элемента и ничего более. Это добавляет визуальный шум, не принося системной ценности.

Угадывание интервалов. Межстрочные и межбуквенные интервалы, которые меняются между компонентами, потому что никто не определил правила.

Масштаб только для десктопа. Отлично смотрится на макете 1440px. Разваливается на чем-либо меньшем, потому что никто не тестировал адаптивное поведение.

Отсутствующие токены. Типографическая система, определенная в файле Figma, но не переведенная в токены дизайна или пользовательские свойства CSS. Система существует в теории, но не в коде, поэтому инженеры изобретают ее заново каждый спринт.

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

Что такое типографическая система в дизайне?

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

Сколько шрифтов должно быть в дизайн-системе?

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

Какое соотношение типографического масштаба лучшее?

Единого лучшего соотношения не существует. Большая терция (1.250) хорошо подходит для маркетинга и редакционных материалов. Малая терция (1.200) подходит для плотных интерфейсов. Идеальная кварта (1.333) создает сильный контраст заголовков. Выберите соотношение, которое соответствует плотности вашего контента и потребностям иерархии.

Создайте систему, прежде чем выбирать шрифт

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