F-02 · Foundation

Типографіка

Чотири шрифти, кожен зі своєю роллю. Жодних Inter / Roboto. Тут йдеться про друк, не про generic SaaS.

Сімейств04
Розмірних кроків09
Типfluid · variable

Сімейства

Display · Serif

Playfair Display

Editorial serif з контрастними штрихами. Тільки для display + h1-h3. Ніколи менше 18px. Weights: 400 · 500 · 600 · 700 · 800 · italic.

Aa
Стоматологія
Cycle of CME credits
Body · Sans

Montserrat

UI text — labels, buttons, body, eyebrows. Weights: 300/400/500/600/700/800. Eyebrows: 700 uppercase, letter-spacing 0.18em.

Aa
Завантажити сертифікат
F-02 · Foundation
Звичайний parag для опису компонента — щільність 1.55, читається спокійно.
Hand · Script

Caveat

Рукописний акцент — підпис на серті, margin-нотатки, motivational кутки. Дозовано. Не для UI labels.

Aa
Наталія Юнакова
— ремарка на полях
Mono · Numerals · IDs

JetBrains Mono

Серійники сертифікатів, ID, технічні поля. Weights: 400/500/600. Tabular numerals on.

Aa
MC-2026-125-299905
Issued 2026-05-20 12:34 EET

Розмірний scale (fluid)

Усі розміри clamp(min, vw-based, max). Мобільні зменшуються плавно.

displayСертифікат готовий
h1Вітаємо, Лариса!
h2Сім принципів
h3Підрозділ зі списком
h4Card title 18/22
h5Metadata title 15/20
body-lgБільший body для intro-абзаців. 18 / 1.6, ink. Зручно для першого параграфа сторінки.
bodyСтандартний body. 15 / 1.6, ink. Основний текст для усього інтерфейсу.
body-smМалий текст. 13.5 / 1.55, muted. Hint, secondary info, captions.
eyebrowSection · Group · Eyebrow
hand— зробив колега
monoMC-2026-125-299905

Правила застосування

Робимо

  • Playfair Display тільки ≥ 18px (intuitive serifs guzzle clarity below)
  • Eyebrow + h1 пара — структура сторінки
  • Tabular numerals для цифр (font-variant-numeric: tabular-nums)
  • Caveat — як приправа: 1 раз на екран максимум
  • Cert IDs тільки в JetBrains Mono
  • Tracking негативний для display (-0.02em), позитивний для eyebrows (+0.18em)

Не робимо

  • Playfair для body тексту — стомлює очі
  • Caveat для будь-чого кліковного / actionable
  • Mono для довгих абзаців
  • Більше 3 розмірних кроків на одному екрані
  • Заголовки без eyebrow або subtitle
  • System UI fallback як основний шрифт

Самостійний хостинг

Production юзає @fontsource/* npm пакети або preload self-hosted woff2. Тут — Google Fonts CDN для simplicity. 

// preload critical (cyrillic + latin subsets, weights actually used)
<link rel="preload" as="font" type="font/woff2"
      href="/fonts/montserrat-400.woff2" crossorigin>
<link rel="preload" as="font" type="font/woff2"
      href="/fonts/playfair-700.woff2" crossorigin>