Типографияи интерфейс

1) Нақши типография дар маҳсулот

• сканингро суръат мебахшад ва сарбории маърифатиро коҳиш медиҳад,
• иерархияро ташкил медиҳад ва дар паймоиш ба давлат кӯмак мекунад,
• табдилдиҳиро зиёд мекунад (CTA, шаклҳо) ва хатогиҳоро коҳиш медиҳад,
• интерфейсро дастрас ва ба маҳаллисозӣ тобовар месозад.

2) Параметрҳои асосӣ

PIN (матни бадан): 16-18 px дар мизи корӣ, 15-16 px дар мобилӣ.
Баландии хат: 1. 45–1. 6 барои матн, 1. 2–1. 35 барои унвонҳо.
Дарозии хат (андоза): 45-80 аломат; дар панели тарафӣ - 36-60.
Пайгирӣ: 0-1% барои матни оддӣ; барои капсулаҳо - + 2-4%.
Контрасти (WCAG) - Матни оддӣ ≥ 4. 5:1, дағалӣ/равғанӣ ≥ 3:1.
Бақайдгирӣ: пешгирӣ кардани ҲАМА CAPS; барои барчасбҳо/микросхемаҳо истифода баред, барои пайгирӣ ҷуброн кунед.

3) Ҷадвали иерархия ва андоза

Мо равиши модулиро тавсия медиҳем: шабакаи 8-pt + миқёси типографӣ.

• Намоиш: 40/48 (LH 1). 15)
• H1: 32/40 (1). 25)
• H2: 24/32 (1). 25)
• H3: 20/28 (1). 3)
• H4: 18/26 (1). 4)
• Бадан/L: 18/28 (1). 55)
• Бадан/M: 16/26 (1). 55)
• Бадан/S: 14/22 (1). 5)
• Сарлавҳа: 12/18 (1. 5)
• Моно/UI: 12-14/18-20

• Байни сатҳҳои ҳамсоя - қадами назаррас (ҳадди аққал 12-16%).
• Иерархия бо омезиши андоза, вазн, пешбар, ранг (бо назардошти контраст) ва масофа ба блокҳои ҳамсоя сохта мешавад.

4) Баландии ҳадди аққал, ибтидоӣ ва оптика

Элементҳоро ба баландии ҳадди ақалли сарлавҳаҳо ҳамоҳанг созед (бо нишонаҳо қулай аст).
Нигоҳ доштани заминаи матнии 4/8-pt - ҳатто ритмҳо хонданро осонтар мекунанд.
Нишонаҳои оптикӣ: сарлавҳаҳои болои блок аз поёнтар аз он калонтаранд (масалан, + 4-8 px дар боло).

5) Услубҳо ва ҳуруфҳои тағйирёбанда

Маҷмӯи ҳадди ақал: Мунтазам, Миёна, Semi-Bold (Bold ихтиёрӣ).
Ultra-Light/лоғарро дар UI истифода набаред.

• Бадан: 420-470 (оптикӣ аз 400).
• Тамғакоғазҳои UI: 500-550.
• Сарлавҳаҳо/CTA: 600-650.
• Агар андоза кам шавад, каме вазн (ҷуброн) зиёд мешавад.
• Лигатураҳои ороиширо дар рақамҳои UI хомӯш кунед; лигатураҳои стандартии кириллӣ/лотинӣ доранд.

6) Рақамҳо, ҷадвалҳо ва санаҳо

Рақамҳои ҷадвалро барои миқдор, коэффисиентҳо, вақтсанҷҳо, рейтингҳо дохил кунед.
Аломатҳои +/ − ҳамеша намоён ва бо фарқияти кофӣ мебошанд; арзишҳои манфиро на танҳо бо ранг нишон диҳед (нишона/тир/ғафс).
Барои арзишҳои пулӣ фазои тангро ҳамчун ҷудосози лоғар (ё формати маҳаллӣ) истифода баред.
Дар ҷадвалҳо ба нуқтаи даҳӣ мувофиқат кунед; барои сутунҳои моно - ҳуруфи якранг.
Графикаи имзои меҳвар ≥ 12 px (мобилӣ) ва ≥ 13-14 px (мизи корӣ), LH 1. 3; афсонаҳои ≥ 4. 5:1 ба замина.

7) Шаклҳо, воридот, паёмҳо

Тамғакоғазҳо 12-14 px, LH 1. 3–1. 4, муқаррарӣ ё миёна.
Ҷойгузин набояд "ҳавои хокистарӣ" бошад - ҳадаф 3:1 ба замина аст, ки аз матн ба таври визуалӣ фарқ мекунад.
Хатогиҳо/муваффақият/кӯмак матни 12-14 px; танҳо ба ранг такя накунед (нишона/матн).

8) Мавзӯъҳои торик/сабук

Дар мавзӯи торик, аз # FFF дар # 000 канорагирӣ кунед: заминаро ба L ≈ 0 бардоред. 14–0. 18, ва матнро ба L ≈ 0 паст кунед. 9 - камтар дурахшон.
Пешсаф дар торикӣ метавонад + 0 бошад. 05 боло барои тасаллӣ.
Истинодҳо/акцентҳо дар торик - тофтаро кам кунед ва сабукиро ба 0 зиёд кунед. 02–0. 04.

9) Маҳаллисозӣ ва бисёрзабонӣ

Оилаҳоро бо кириллӣ/лотинӣ/юнонӣ, аломати аксент ва дастгирии асъор интихоб кунед.
RTL: нишонаҳои оина/ҳаммарказҳо, аммо рақамҳо ва лотинӣ нестанд; Интиқолҳои санҷишӣ.
Интиқоли худкор ('hyphens: auto') танҳо ба минтақаҳои мундариҷаи дароз дохил карда мешавад; дар тугмаҳои UI - интиқолро манъ мекунад.
Барои туркӣ/озарбойҷонӣ шаклҳои "Ё/ы" -ро санҷед.
Барои Гурҷистон ва Таиланд, пиндорро ба 1 px (хусусиятҳои услуб) боло бардоред.

10) Дастрасӣ (A11y)

Муқоисаи матн: нигаред § 2.
Услубҳои фокус - бе ранг намоён: зерхат, сарҳад, соя, ҷуброн.
Андозаи ҳуруф ба таври системавӣ васеъ карда мешавад (дастгирии андозаи матни OS).
Танҳо тавассути ранг/вазн рамзгузорӣ накунед - сарлавҳаҳо ва нишонаҳои возеҳро илова кунед.

11) Боркунӣ ва иҷрои ҳуруф

Ҳадафҳо: кам кардани басташавӣ, таъмин намудани FOUT пешгӯишаванда ва CLS устувор.

Зеристгоҳҳо: лотинӣ, кириллӣ, рақамҳо/аломатҳо - файлҳои инфиродӣ.
Форматҳо: 'woff2' (асосӣ), 'woff' ҳамчун афтиш.
'font-display: своп' (ё 'ихтиёрӣ' барои оилаҳои миёна).

html
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Inter-UI-subset. woff2">

Ҳуруфи тағирёбанда ба ҷои 3-4 статикӣ - аксар вақт дар вазн фоидаовартар аст.
Буҷа: дар маҷмӯъ 150-200 КБ барои роҳи интиқодӣ (пас аз gzip/brotli).
Намоиш: Аз сояҳо/ниқобҳои зиёд дар матн канорагирӣ кунед; таъсири системаро сарфакорона истифода баред.

12) Нишонаҳои типография (системаи тарроҳӣ)

type. scale.{role}     # h1, h2, body, caption, mono type. weight.{role}    # regular, medium, semibold type. leading.{role}    # line-height type. tracking.{role}   # letter-spacing type. feature. numeric   # tabular, lining

json
{
"type": {
"family": { "ui": "InterVariable", "mono": "JetBrainsMonoVariable" },
"scale": { "h1": 32, "h2": 24, "h3": 20, "body": 16, "caption": 12 },
"leading": { "h1": 40, "h2": 32, "h3": 28, "body": 26, "caption": 18 },
"weight": { "body": 450, "label": 520, "cta": 620 },
"numeric": { "figures": "tabular", "zeros": "slashed" }
}
}

css
:root {
--font-ui: "InterVariable", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: "JetBrainsMonoVariable", ui-monospace, SFMono-Regular, Menlo, monospace;

--fs-h1: 32px; --lh-h1: 40px; --w-h1: 600;
--fs-h2: 24px; --lh-h2: 32px; --w-h2: 600;
--fs-h3: 20px; --lh-h3: 28px; --w-h3: 550;
--fs-body: 16px; --lh-body: 26px; --w-body: 450;
--fs-caption: 12px; --lh-caption: 18px; --w-caption: 450;

--tracking-caps: 0. 04em;
--tracking-default: 0em;
}
.u-num {
font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

13) Тарҳ ва ритм

Модули амудии 8-pt; масофа байни параграфҳо = 1 × қадами асосӣ.
Lists-Индекси аломатгузорӣ бо заминаи матн ҳамоҳанг карда шудааст.
Тугмаҳо ва майдонҳо - Баландӣ мултипликатори хати шабакаи ибтидоӣ мебошанд (масалан, 40/48/56 px).

14) Хусусияти IGaming (устохона)

Нишонаҳо/эҳтимолиятҳо, тавозунҳо, вақтсанҷҳо - рақамҳои ҷадвалиро истифода баред, дар сутунҳои интиқодӣ моноспед.
Роҳбарон/рейтингҳо: ҳамоҳангсозӣ аз рӯи категория, формати ягонаи асъор, возеҳи "↑/↓".
Огоҳиҳои интиқодӣ (18 +, маҳдудиятҳо, хатарҳо) - ҳадди аққали AAA, баръакс, ҲАМАИ CAPS-ро истифода набаред.
Баннерҳои Promo: Матн танҳо дар слипҳои контрасти назоратшаванда/такрорӣ.

15) Анти-намунаҳо

Нур/лоғар дар сӯзанҳои хурд.
Матни хокистарӣ дар заминаи ранга бе санҷиши контраст.
Ду ё зиёда гӯшмонакҳо "барои зебоӣ".
Хатҳои дароз (> 90 аломат) ва хати зиччи <1. 35.
Рақамҳои паҳнои мутаносиб дар ҷадвалҳо/ҷамъи" ҷаҳида ".
Интиқолро дар тугмаҳо/тамғакоғазҳо пахш кунед.

16) Рӯйхати назоратӣ

Хониш

• Bodysuits 16-18 px; LH ≥ 1. 45.
• Дарозии сатр 45-80 аломат аст.

Иерархия

• Ҷадвали афзоиш ≥ 12%; indents мувофиқ ба шабака.

Ададҳо/Ҷадвалҳо

• Ҷадвалҳо барои ҷамъҳо/коэффисентҳо; ҳаммарказкунии даҳӣ.

Мавҷудият

• Муқоисаи WCAG ба даст оварда шуд; услубҳои фокус бе ранг намоёнанд.

Иҷро

• Subset/woff2; 'намоиши ҳуруф: мубодила'; буҷет ≤ 200 КБ.

Маҳаллисозӣ

• Дастгирии кириллӣ/лотинӣ/RTL; hyphenation/diacritics тафтиш карда шуд.

17) A/B ва ченакҳо

Санҷиш: Бадан ± 1 px pin, қатори миқёси сарлавҳа, вазни CTA, пешсаф.
Андоза: вақти хондан, чуқурии ҳаракат, CTR CTA, хатогиҳои шакл, CLS (устувории матн).

Хулосаи мухтасар

Типография скелети интерфейс мебошад. Ҷадвали пешгӯишавандаро таъин кунед, контраст ва ритмро нигоҳ доред, ҳуруфҳои тағирёбанда ва рақамҳои ҷадвалро истифода баред, боркуниро оптимизатсия кунед. Он гоҳ UI зуд хонда мешавад, устувор кор мекунад ва мавзӯъҳо ва забонҳоро васеъ мекунад.