Подбор пары шрифтов

Подбери пару шрифтов под {{vibe}}.

Принципы пары

1. Контраст

Серифный + санс-серифный — классическая комбинация. Контраст создаёт иерархию.

Плохо: 2 похожих санс-серифа (Helvetica + Inter) — выглядят как одна штука.

2. Один характер

Headline берёт энергию. Body работает спокойно.

3. Tone match

Editorial: серьёзный сериф + чистый санс Tech: геометрический санс + моноширный Playful: дисплейный сериф + рукописный Luxury: элегантный сериф + классический санс

Готовые пары (всё free / Google Fonts)

A. Editorial / Premium

• Display: Instrument Serif (italic — особенно красив)
• Body: Inter или Geist Sans
• Mono: Geist Mono или JetBrains Mono

Используется в Promptbook, многих SaaS-сайтах.

B. Tech / Modern

• Display: Geist Sans (медиум-вес)
• Body: Inter
• Mono: JetBrains Mono

Минимум контраста, максимум читаемости. Linear, Vercel.

C. Editorial / Classic

• Display: Playfair Display
• Body: Source Sans Pro

Магазины премиум-бренды.

D. Playful / Friendly

• Display: DM Serif Display
• Body: DM Sans

Bold, warm. Stripe, Notion ранние версии.

E. Brutalist / Strong

• Display: Space Grotesk
• Body: Inter
• Display variant: Space Mono для акцентов

F. Luxury / Refined

• Display: Cormorant Garamond
• Body: Inter Light

Кириллица

Проверь поддержку! Часто красивые англоязычные шрифты не имеют русских глифов.

• ✓ С кириллицей: Inter, Geist, Manrope, Onest, Russian Trove sans-serifы
• ✓ Серифы с кириллицей: Lora, Spectral, EB Garamond
• ✗ Часто нет кирилицы: Cormorant, многие дисплейные

Шкала размеров

Базовая 1.25 (major third) или 1.333 (perfect fourth):

text-xs:    12px  (0.75rem)
text-sm:    14px  (0.875rem)
text-base:  16px  (1rem)
text-lg:    18px  (1.125rem)
text-xl:    20px  (1.25rem)
text-2xl:   24px  (1.5rem)
text-3xl:   30px  (1.875rem)
text-4xl:   36px  (2.25rem)
text-5xl:   48px  (3rem)
text-6xl:   60px  (3.75rem)
text-7xl:   72px  (4.5rem)

Body: 16-18px optimum.

Веса

Минимум 3 веса:

• Regular (400) — body
• Medium (500-600) — UI labels, ссылки
• Bold (700) — заголовки, акценты

Не используй italic regular для emphasis в RU — кириллица курсивная плохо смотрится в большинстве шрифтов.

Tracking (letter-spacing)

• Большие размеры (≥ 36px): -0.02em to -0.04em (тайт)
• Body: 0 или -0.005em
• Маленький (≤ 12px): +0.02em to +0.05em (открыть)

Тестирование пары

1. Покажи 5 разных текстов: H1, H2, abzac, code, метка
2. На разных размерах
3. На разных фонах (тёмный/светлый)
4. На разных размерах экрана
5. С кириллицей и латиницей

Анти-паттерны

• ❌ 5+ шрифтов на сайте
• ❌ Похожие шрифты вместе (нет контраста)
• ❌ Все размеры одного веса
• ❌ Кириллица в шрифте который не предназначен
• ❌ Italic регулярного веса для emphasis в кириллице

В конце

• Display + body + mono шрифты
• Веса каждого
• Шкала размеров
• Tracking-правила
• Проверка кириллицы