Типографика для кириллицы

Адаптируй типографику под кириллицу.

Различия с латиницей

1. Меньше восходящих и нисходящих — буквы выглядят "квадратнее" (н, м, в, г)
2. Меньше визуальных "якорей" для глаза → сложнее различать буквы быстро
3. Italic выглядит хуже в большинстве шрифтов — буквы превращаются в скоропись (а → а)
4. Прописные занимают больше места относительно строчных
5. Меньше глифов в дисплейных шрифтах часто

Шрифты которые хорошо работают

С кириллицей (free)

• ✓ Inter — стандарт, отлично читаем
• ✓ Geist Sans — техно-вайб, чистый
• ✓ Manrope — варио, поддержка широкая
• ✓ Onest — современный, свежий
• ✓ TT Hoves — премиум-вайб
• ✓ PT Sans / PT Serif — классика для русских текстов

Серифы с кириллицей

• ✓ Lora — editorial, хорошо для блогов
• ✓ Spectral — динамичный, для journalism
• ✓ EB Garamond — классика, с кириллицей
• ✓ Bitter — отдалённо как Trebuchet но сериф

Display с кириллицей (редкость)

• ✓ Unbounded — варио, выразительный
• ✓ Tilda Sans — display + body
• ✓ Inter Display — крупная версия Inter
• ❌ Instrument Serif — НЕТ кириллицы (в дефолте). Нужны альтернативы

Альтернатива Instrument Serif для кириллицы

• Tinos или Times New Roman (если хочется serif)
• Spectral (italic особенно красив)
• Cormorant Infant (если найдёте кириллическую версию)
• Просто отказаться от serif для display и использовать Inter Display

Что НЕ работает с кириллицей

• ❌ Inter Display italic для emphasis — буквы выглядят странно
• ❌ Дисплейные с малым символьным набором — fallback на default
• ❌ Очень тонкие веса (100, 200) — кириллица плохо различима
• ❌ Сжатые шрифты (condensed) — кириллица "толпится"

Спецификации

Tracking для кириллицы

• Чуть более открытый чем латиница (-0.005em → 0)
• Большой текст: -0.02em ок
• Маленький: можно +0.01em

Размер шрифта

• Кириллица визуально мельче при той же x-height
• Можно увеличить на 1-2px (например, 17px body вместо 16px)

Капитель / small caps

• В кириллице капитель работает хуже
• Используй prопис чем small caps для emphasis

Italic

• Используй sparingly
• Лучше bold или color для emphasis
• Тестируй на читаемость

Цифры

• Большинство кириллических шрифтов имеют табличные / пропорциональные цифры
• font-variant-numeric: tabular-nums — для табличных данных
• font-feature-settings: 'tnum' — то же

Подключение в Next.js

import { Inter, Geist_Mono } from "next/font/google";

const inter = Inter({
  subsets: ["latin", "cyrillic"],  // важно!
  display: "swap",
});

Без cyrillic subset — шрифт грузится без русских глифов → fallback.

Fallback

font-family: 'Inter', -apple-system, 'Segoe UI', 'Roboto', sans-serif;

На случай если основной не загрузился.

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

1. Покажи весь сайт с реальным русским текстом, не "lorem ipsum"
2. Проверь H1-H6, body, mono, captions
3. Проверь обе темы
4. Проверь mobile
5. Проверь смешанный текст (русский + английский в одной строке) — буквы должны выглядеть консистентно

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

• ❌ Brittle подбор шрифта на английском, потом "проверка" на русском в конце
• ❌ Использование шрифта без cyrillic subset
• ❌ Italic как основной emphasis для русского
• ❌ Дисплейный шрифт без проверки кириллицы → fallback ломает дизайн
• ❌ Lorem ipsum в дизайн-mockup для русско-язычного продукта