Процесс создания системы Utopia шаг за шагом#

Fluid Type Scale (текучая типографическая шкала)

Вместо фиксированных размеров шрифтов для брейкпоинтов, Utopia генерирует CSS с clamp(), который плавно интерполирует размеры Выбираете базовый размер и модульную шкалу (например, 1.2, 1.333, 1.618) Получаете систему от –step–2 до –step-5 (или больше)

Fluid Space Scale (текучая система отступов)

Аналогично типографике, создаёт систему spacing от –space-3xs до –space-3xl Все отступы масштабируются пропорционально размеру экрана

Настройка диапазонов

Задаёте минимальную ширину (например, 320px) и максимальную (например, 1240px) Определяете размеры для этих границ Utopia генерирует формулы для плавного перехода

Процесс шаг за шагом#

Шаг 1: Понимание количества шагов#

Типографические шаги#

Открой макет и посмотри на все размеры текста. Например:

Мелкий текст (копирайты, подписи) — это --step--2 или --step--1
Основной текст (параграфы) — это --step-0 (базовый)
Подзаголовки — --step-1, --step-2
Крупные заголовки — --step-3, --step-4, --step-5

Задание: Выпиши все размеры шрифтов из макета для мобильной и десктопной версии. Сколько разных размеров у тебя есть?

Пространственные шаги#

Аналогично для отступов:

--space-3xs, --space-2xs, --space-xs — мелкие отступы (4-12px)
--space-s, --space-m — средние (16-32px)
--space-l, --space-xl, --space-2xl, --space-3xl — крупные (48-96px+)

Задание: Выпиши все отступы (padding, margin, gap) из макета. Какие значения встречаются?

Шаг 2: Генерация системы#

Идём на https://utopia.fyi/type/calculator/

Настройка Type Scale:#

Step 0 (базовый размер):
- Min (390px): 16px
- Max (1920px): 20px
Type scale:
- Выбираем “Perfect Fourth” (1.333) — это классическая шкала
Negative steps: Ставим 2 (для мелкого текста)
Positive steps: Начни с 5, потом скорректируем
Viewport range:
- Min width: 390px
- Max width: 1920px

Жми “Calculate” — получишь таблицу с размерами и CSS-код.

Шаг 3: Анализ результатов#

Смотришь таблицу: видишь, как каждый шаг масштабируется от 390px до 1920px.

Например:

--step--2: 9.01px → 11.26px (для мелкого текста)
--step-0: 16px → 20px (базовый)
--step-3: 37.90px → 47.37px (средний заголовок)
--step-5: 67.34px → 84.18px (главный заголовок)

Сравни с макетом: Подходят ли эти размеры? Если главный заголовок в макете 72px на десктопе, а у тебя --step-5 даёт 84px — либо используй --step-4, либо скорректируй шкалу.

Шаг 4: Настройка Space Scale#

Идём на https://utopia.fyi/space/calculator/

Base size:
- Min (390px): 16px (берём из типографики)
- Max (1920px): 20px
Spacing pairs:
- Здесь задаём соотношения. Например:
- 3xs: 0.25 × base (4px → 5px)
- xs: 0.75 × base (12px → 15px)
- s: 1 × base (16px → 20px)
- m: 1.5 × base (24px → 30px)
- l: 2 × base (32px → 40px)
- xl: 3 × base (48px → 60px)
- 2xl: 4 × base (64px → 80px)
- 3xl: 6 × base (96px → 120px)
Custom pairs: Можно добавить свои, например:
- container-inline: от 24px (мобильный) до 71px (десктоп) — для твоих контейнерных отступов

Шаг 5: Копируем CSS#

Копируешь сгенерированный код в свой проект:

:root {
  /* Type Scale */
  --step--2: clamp(...);
  --step--1: clamp(...);
  --step-0: clamp(...);
  /* ... */
  
  /* Space Scale */
  --space-3xs: clamp(...);
  --space-xs: clamp(...);
  /* ... */
}

Шаг 6: Применение в проекте#

/* Семантические токены */
:root {
  --text-body: var(--step-0);
  --text-small: var(--step--1);
  --heading-1: var(--step-5);
  --heading-2: var(--step-4);
  
  --container-padding: var(--space-container-inline); /* 24px → 71px */
  --section-gap: var(--space-2xl);
}

/* Использование */
body {
  font-size: var(--text-body);
}

h1 {
  font-size: var(--heading-1);
  margin-bottom: var(--space-l);
}

.container {
  padding-inline: var(--container-padding);
}

Чек-лист:#

Выпиши из макета все размеры шрифтов (мобильные и десктопные)
Выпиши все отступы (особенно обрати внимание на margins, paddings, gaps)
Зайди на utopia.fyi и сгенерируй систему с твоими параметрами

Процесс создания системы Utopia шаг за шагом

Contents