Здравствуйте!
В прошлых уроках мы заложили прочный фундамент визуальной организации: научились использовать 8-точечную сетку для выравнивания, управлять вниманием через визуальную иерархию и группировать связанные элементы с помощью принципа близости. Мы теперь знаем, где и как располагать контент. Пришло время ответить на вопрос: какого размера должен быть этот контент, в частности, текст?
Цель этого урока — научиться определять и применять типографическую шкалу для интерфейсных элементов. Ваш опыт в графическом дизайне дал вам превосходную интуицию в подборе гармоничных размеров шрифта. Сегодня мы преобразуем эту интуицию в системный, воспроизводимый метод, который необходим в продуктовом дизайне для создания последовательных и масштабируемых интерфейсов. Мы создадим предсказуемую систему размеров, которая будет работать в любом проекте.
Что такое типографическая шкала?
Представьте музыкальную гамму. Ноты в ней подобраны не случайно — они создают гармоничное звучание. Типографическая шкала работает по тому же принципу, но для размеров шрифта.
Типографическая шкала (typographic scale) — это набор размеров шрифта, которые находятся в определенной математической зависимости друг от друга. Эта зависимость, основанная на базовом размере и коэффициенте (пропорции), создает визуальный ритм и гармонию, делая иерархию текста очевидной и приятной для глаз.
Вместо того чтобы подбирать размеры для заголовков и подписей наугад (32px, 24px, 18px...), мы будем их вычислять по единой формуле. Это делает дизайн не только эстетичным, но и системным.
Давайте ознакомимся с формальным определением и базовой формулой типографической шкалы.
Typographic scaling: Definition, Figma tutorial, and examples - LogRocket Blog
Прочтите вводную часть статьи от LogRocket, чтобы понять основную концепцию.
Обратите внимание на раздел "Что такое типографическая шкала". Ключевая идея здесь — использование базового размера и коэффициента (ratio) для создания гармоничной системы.
Два кита типографической шкалы: базовый размер и коэффициент
Чтобы построить шкалу, нам нужны всего два элемента:
- Базовый размер шрифта (Base Size): Это кегль основного текста вашего интерфейса (body text). Все остальные размеры будут выстраиваться относительно него.
- Коэффициент (Ratio или Scale): Это множитель, на который мы будем умножать или делить базовый размер, чтобы получить следующий шаг шкалы (например, размер заголовка).
1. Выбор базового размера
Выбор базового размера — это отправная точка. От него зависит читаемость всего контента. Как правило, для веба хорошей отправной точкой является 16px. Гайдлайны платформ также дают свои рекомендации.
Статья из журнала ux.pub подробно описывает, как подойти к выбору этого ключевого параметра.
Гармоничная типографика и сетки, руководство
Эта статья поможет вам системно подойти к выбору основы для всей вашей типографики.
Прочтите раздел «4. Базовый размер шрифта и высота строки». Сосредоточьтесь на подразделах о выборе базового размера и факторах, которые на него влияют (количество контента, аудитория, контекст). Важный практический совет — тестировать размеры прямо на реальном устройстве.
2. Выбор коэффициента
Коэффициент определяет, насколько сильно будут отличаться размеры шрифтов в вашей шкале — то есть, насколько контрастной будет иерархия.
- Низкий коэффициент (например, 1.200 - Minor Third): Создает тонкие, едва заметные переходы. Идеально для сложных, насыщенных информацией интерфейсов (например, админ-панели, CRM-системы), где не нужна излишняя драматичность.
- Средний коэффициент (например, 1.250 - Major Third): Универсальный, сбалансированный вариант, подходящий для большинства веб-сайтов и приложений.
- Высокий коэффициент (например, 1.500 - Perfect Fifth или 1.618 - Golden Ratio): Создает сильный контраст между заголовками и текстом. Отлично подходит для маркетинговых страниц, лендингов и сайтов, где главную роль играет крупная, выразительная типографика.
Статья от LogRocket, которую мы начали читать, наглядно иллюстрирует эти варианты.
Typographic scaling: Definition, Figma tutorial, and examples - LogRocket Blog
Вернемся к статье от LogRocket, чтобы изучить популярные коэффициенты.
Прочтите раздел "Типы типографических шкал". Обратите внимание на примеры для шкал с низким, средним и высоким контрастом. Подумайте, какой тип контраста подошел бы для новостного сайта, а какой — для интерфейса банковского приложения.
Строим шкалу на практике
Теория ясна, теперь — к делу. Рассчитывать все размеры вручную необязательно. Существуют удобные инструменты, которые делают это за нас. Один из самых популярных — typescale.com.
В следующем видео дизайнер Сергей Чирков наглядно показывает, как с помощью этого инструмента быстро сгенерировать шкалу и перенести её в Figma.
Как подобрать шрифты для сайта? Визуальная иерархия. Создаем стили за 15 минут!
Это видео поможет вам понять структуру текстовых стилей и использовать онлайн-генератор для их создания.
Сначала посмотрите фрагмент, где объясняется иерархия заголовков H1-H6 и роль основного текста (body text). Это стандартная конвенция, которую полезно знать. Затем переходите к демонстрации инструмента. Посмотрите, как автор использует сервис typescale.com, чтобы на основе базового размера (16px) и выбранного коэффициента получить готовый набор размеров для всех уровней заголовков.
Как вы видите, процесс состоит из простых шагов:
- Задать базовый размер.
- Выбрать коэффициент.
- Скопировать сгенерированные значения для каждого уровня иерархии (H1, H2, Body, Caption и т.д.).
Применение шкалы в Figma
Теперь, когда у нас есть набор гармоничных размеров, наша задача — превратить их в переиспользуемые стили текста в Figma. Это позволит применять их по всему макету одним кликом и легко вносить изменения в будущем.
В следующем видео от дизайнера Mizko показан весь процесс от и до — от генерации шкалы до её настройки в Figma с привязкой к 8-точечной сетке.
Figma Tutorial: Create the Perfect Typography Scale for UI & Web Projects (IN 10 MINUTES) - Part 1
Это короткое и очень насыщенное практикой видео покажет, как создать идеальную типографическую шкалу в Figma.
Посмотрите, как автор переносит размеры из typescale.com в Figma, присваивая их разным уровням текста, от H1 до параграфа. Обратите внимание, что он округляет дробные значения (например, 13.33px до 13px) — это нормальная практика. Далее, в очень важном фрагменте, он объясняет, как настроить высоту строки (line height) так, чтобы она была кратна 8 и текст идеально вписывался в вертикальный ритм 8-точечной сетки, которую мы изучали ранее.
Чтобы закрепить практические навыки, давайте пошагово разберем этот процесс в текстовом формате. Статья LogRocket содержит отличное руководство.
Typographic scaling: Definition, Figma tutorial, and examples - LogRocket Blog
Это руководство проведет вас по всем шагам создания и настройки текстовых стилей в Figma.
Изучите раздел "Как создать кастомную типографическую шкалу в Figma". Повторите эти шаги в своем проекте в Figma: Set your base font size: Создайте текстовые слои для иерархии (H1-H6, Body). Define your scaling factor: Выберите коэффициент (в примере — 1.250). Apply your scaling factor: Последовательно вычислите и примените размеры, начиная с основного текста и двигаясь вверх и вниз по шкале. Adjust the font weights: Настройте начертания (Bold, Semi-bold, Regular), чтобы усилить иерархию.
Наконец, не стоит забывать, что типографика должна быть адаптивной. Шкала, которая отлично смотрится на большом десктопном экране, может оказаться слишком контрастной для мобильного. Часто для мобильных устройств используют шкалу с меньшим коэффициентом. Мы подробнее поговорим об этом в модуле про адаптивный дизайн, но уже сейчас полезно знать об этом. Можете быстро ознакомиться с этой концепцией в том же руководстве от LogRocket.
Ключевые выводы
- Типографическая шкала — это системный способ создания гармоничных и последовательных размеров шрифта, основанный на базовом размере и коэффициенте.
- Базовый размер (обычно 16px для веба) является отправной точкой для основного текста.
- Коэффициент (ratio) определяет визуальный контраст шкалы. Его выбор зависит от целей проекта: низкий — для UI, высокий — для маркетинговых сайтов.
- Используйте онлайн-инструменты, такие как typescale.com, для быстрой генерации размеров.
- В Figma необходимо создавать стили текста на основе сгенерированной шкалы, чтобы обеспечить консистентность.
- Высота строки (line height) должна быть математически связана с размером шрифта и, в идеале, кратна шагу вашей сетки (например, 4px или 8px) для поддержания вертикального ритма.
Что дальше?
Мы определили размеры для наших текстовых элементов. Но для идеальной читаемости и ритма не менее важны и вертикальные расстояния — интервалы между строками (интерлиньяж) и отступы между абзацами. В следующем уроке мы подробно разберем, как задавать межстрочные интервалы и отступы, обеспечивающие читаемость экранного текста, и как связать их с нашей 8-точечной сеткой и типографической шкалой.