Типографіка BabiyPro

Жива reference-сторінка дизайн-системи BabiyPro. Усі приклади нижче рендеряться поточною темою Ghost. Коли змінюється типографіка сайту, цю сторінку потрібно перевіряти першою.

Font family

Current family: Modern sans-serif — нативна сучасна sans-serif система теми Ghost Source. Окремий бренд-шрифт BabiyPro наразі не затверджений.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГҐДЕЄЖЗИІЇЙКЛМНОПРСТУФХЦЧШЩЬЮЯ
абвгґдеєжзииіїйклмнопрстуфхцчшщьюя
0123456789 — € $ % & @ #

Ієрархія заголовків

H1 / Page title. Заголовок цієї сторінки вище є реальним H1. Desktop: 40/44 px. Mobile: 32/36 px.

H2 — Заголовок другого рівня

Desktop: 30/36 px. Mobile: 26/31 px. Використовується для основних смислових розділів сторінки.

H3 — Заголовок третього рівня

Desktop: 23/30 px. Mobile: 21/27 px. Для внутрішньої структури великого розділу.

H4 — Локальний підзаголовок

Desktop: 20/28 px. Mobile: 19/26 px. Для невеликих підсекцій, де H3 створював би надмірний акцент.

Lead / вступний текст

Професійна комунікація має звучати впевнено, але не голосно — і читатися без зусиль. Lead задає контекст сторінки, не конкуруючи з основним заголовком.

Desktop: 21/31 px. Mobile: 20/29 px.

Основний текст

Це базовий body-текст BabiyPro. Він має бути достатньо великим для тривалого читання і не виглядати як другорядна примітка до великих заголовків. Рекомендована ширина читальної колонки — близько 60–70 символів у рядку.

Другий абзац показує вертикальний ритм. У тексті можуть використовуватися напівжирне виділення для смислового акценту та курсив для природного мовного наголосу, але не як декоративний прийом.

Desktop: 18/30 px. Mobile: 18/29 px.

Посилання в тексті

Приклад звичайного текстового посилання на блог BabiyPro. Посилання має бути помітним, але не перетворювати абзац на рекламний блок.

Маркірований список

• одна думка — один пункт;
• формулювання короткі й паралельні за структурою;
• список використовується для сканування, а не замість нормальної аргументації.

Нумерований список

1. Спочатку контекст.
2. Потім рішення або послідовність.
3. Наприкінці конкретна наступна дія.

Цитата / сильний вислів

Спокійна компетентність важливіша за візуальну гучність.

Цитата використовується тоді, коли сам вислів має окрему доказову або смислову вагу.

Small / metadata

16/24 px — дата, категорія, юридична або службова інформація. Приклад вище використовує фактичний meta-style теми Source.

Navigation / interface text

Головна навігація у верхній частині цієї сторінки та legal-навігація у футері є живими specimen для interface text.

16/24 px. Інтерфейсні підписи залишаються читабельними й візуально слабшими за основний контент.

Button labels

Кнопка використовує короткий дієслівний label. Другорядна дія має залишатися візуально слабшою.

Принцип

BabiyPro — restrained, warm, editorial, practical and human. Типографіка повинна підтримувати цю поведінку: впевнено, не голосно; читабельно, не декоративно; професійно, не холодно.