Шрифты и шрифтовые пары

Проверенные лица с кириллицей: образцы, наши донастройки и готовые пары. У каждого блока — CSS, который можно скопировать и вставить.

Фирменный приём: вариативный Playfair с донастройками

Playfair из коробки

Свадьба не за горами

АБВГДЕЖЗ абвгдежз AaBbCc 0123456789

Playfair с донастройками — высокая узкая антиква

Свадьба не за горами

wdth 87.5 · weight 300 · tracking −0.055em · lh 0.85 · scaleX(0.82)

CSS донастройки

/* Google Fonts: family=Playfair (вариативный, НЕ Playfair Display —
   у Display нет оси ширины wdth) */
.display-title {
  font-family: "Playfair", Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-variation-settings: "wdth" 87.5;  /* узкий */
  letter-spacing: -0.055em;              /* плотный набор */
  line-height: 0.85;                     /* строки внахлёст */
  transform: scaleX(0.82);               /* ещё уже — фирменная вытянутость */
  transform-origin: left bottom;
  padding-top: 0.08em;  /* компенсация: выносные «б», «й» не режутся */
}

Промпт для ИИ

Подключи вариативный шрифт Playfair (именно «Playfair» с Google Fonts, не «Playfair Display» — у Display нет оси ширины) и настрой фирменные заголовки: font-weight 300, font-variation-settings "wdth" 87.5, letter-spacing -0.055em, line-height 0.85, transform scaleX(0.82) с transform-origin left bottom, padding-top 0.08em для компенсации выносных элементов. Результат — высокая узкая контрастная антиква как на дорогих свадебных и фэшн-сайтах. Кириллица поддерживается.

Образцы

Helvetica / системнаяfont-family: "Helvetica Neue", Helvetica, Arial

Швейцарская классика жива

АБВГДЕЖЗ абвгдежз AaBbCc 0123456789

Interрабочая лошадка интерфейсов · Google Fonts

Интерфейсу нужен порядок

АБВГДЕЖЗ абвгдежз AaBbCc 0123456789

Manropeмягкий гротеск · Google Fonts

Дружелюбный и собранный

АБВГДЕЖЗ абвгдежз AaBbCc 0123456789

Unboundedширокий дисплейный · Google Fonts

Громкие заголовки

АБВГДЕЖЗ абвгдежз AaBbCc 0123

Playfair Displayклассическая контрастная антиква

Приглашение на праздник

АБВГДЕЖЗ абвгдежз AaBbCc 0123456789

Cormorant Garamondлёгкая изящная антиква

Ботаника и акварель

АБВГДЕЖЗ абвгдежз AaBbCc 0123456789

Пары

пара 01 · люкс / свадьбы / фэшн

Красота в каждой детали

Playfair (донастроенный) на заголовках + Inter на тексте и кнопках. Контраст «высокая антиква × нейтральный гротеск» — формула дорогих лендингов.

Кнопка Inter 700

CSS

h1 { font-family: "Playfair", Georgia, serif; font-weight: 300;
  font-variation-settings: "wdth" 87.5; letter-spacing: -.045em; line-height: .9; }
body, .btn { font-family: "Inter", sans-serif; }

пара 02 · студии / портфолио

Мы делаем сайты быстрыми

Helvetica на заголовках + Georgia на тексте: швейцарская жёсткость сверху, книжная теплота снизу. Обе — системные, грузятся мгновенно.

Кнопка Helvetica

CSS

h1 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700; letter-spacing: -.03em; }
body { font-family: Georgia, "Times New Roman", serif; }

пара 03 · техно / ивенты / мерч

Громко и по делу

Unbounded на заголовках + Manrope на тексте: характерный широкий дисплей и мягкий гротеск, который его уравновешивает.

Кнопка Manrope

CSS

h1 { font-family: "Unbounded", sans-serif; font-weight: 700; }
body, .btn { font-family: "Manrope", sans-serif; }

пара 04 · ботаника / арт / поэтика

Лёгкость курсивной антиквы

Cormorant Garamond italic на заголовках + Inter на тексте. Воздушно, но не приторно — курсив работает, пока его мало.

Кнопка Inter

CSS

h1 { font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500; font-style: italic; }
body, .btn { font-family: "Inter", sans-serif; }