Tipografia interfeței

1) Rolul tipografiei în produs

• accelerează scanarea și reduce sarcina cognitivă,
• formează o ierarhie și ajută la navigarea statului,
• crește conversia (CTA, formulare) și reduce erorile,
• face interfața accesibilă și rezistentă la localizare.

2) Parametrii de bază

Pin (textul corpului): 16-18 px pe desktop, 15-16 px pe mobil.
Înălțimea liniei: 1. 45–1. 6 pentru text, 1. 2–1. 35 pentru titluri.
Lungime linie (măsură): 45-80 caractere; în bare laterale - 36-60.
Urmărire: 0-1% pentru text simplu; pentru capsule - + 2-4%.
Contrast (WCAG) - Text simplu ≥ 4. 5:1, grosier/gras ≥ 3:1.
Înregistrați-vă: evitați TOATE CAPS permanente; utilizați pentru etichete/chips-uri, compensa pentru urmărire.

3) Ierarhie și dimensiune scară

Vă recomandăm o abordare modulară: 8-pt grilă + scară tipografică.

• Afişare: 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)
• Corp/L: 18/28 (1. 55)
• Corp/M: 16/26 (1. 55)
• Corp/S: 14/22 (1. 5)
• Legendă: 12/18 (1. 5)
• Mono/UI: 12-14/18-20

• Între nivelurile vecine - un pas vizibil (cel puțin 12-16%).
• Ierarhia este construită printr-o combinație de mărime, greutate, leading, culoare (luând în considerare contrastul) și distanțe la blocurile învecinate.

4) Înălțimea capacului, valoarea inițială și optica

Aliniați elementele la înălțimea capacului anteturilor (convenabil cu pictogramele).
Mențineți o bază de text 4/8-pt - chiar și ritmurile fac mai ușor de citit.
Linii optice: rubricile de deasupra blocului sunt mai mari decât sub el (de exemplu, + 4-8 px de mai sus).

5) Stiluri și fonturi variabile

Set minim: Regular, Mediu, SemiBold (opțional Bold).
Nu utilizați Ultra-Light/Subțire în UI.

• Corp: 420-470 (optic mai plat decât 400).
• Etichete UI: 500-550.
• Anteturi/CTA: 600-650.
• Dacă dimensiunea scade, creșteți ușor greutatea (compensația).
• Dezactivați ligaturile decorative în numere UI; țineți ligaturi chirilice/latine standard.

6) Numere, tabele și date

Includeți cifre tabelare pentru sume, coeficienți, cronometre, evaluări.
+/ − semnele sunt întotdeauna vizibile și cu un contrast suficient; evidențiați valorile negative nu numai în culoare (pictogramă/săgeată/bold).
Pentru valori monetare, utilizaţi un spaţiu îngust ca separator de biţi subţiri (sau format local).
În tabele, aliniați la punctul zecimal; pentru coloane mono - font monospaced.
Graficele pentru semnătura axei ≥ 12 px (mobil) şi ≥ 13-14 px (desktop), LH 1. 3; legende ≥ 4. 5:1 la fundal.

7) Formulare, intrări, mesaje

Etichete 12-14 px, LH 1. 3–1. 4, regulat sau mediu.
Înlocuitorul nu ar trebui să fie „aer gri” - scopul este 3:1 la fundal, vizual distinct de text.
Erori/succes/ajutor text 12-14 px; nu se bazează numai pe culoare (pictogramă/text).

8) Întuneric/Teme de lumină

Într-un subiect întunecat, evitați # FFF pe # 000: ridicați fundalul la L≈0. 14–0. 18 și coborâți textul la L≈0. 9 - mai puțin strălucire.
Leading în întuneric poate fi + 0. 05 de mai sus pentru confort.
Legături/accente în întuneric - reduce saturația și crește lumina cu 0. 02–0. 04.

9) Localizare și multilingvism

Alegeți familii cu suport chirilic/latin/grec, accent și monedă.
RTL: oglindă icoane/aliniamente, dar nu numere și latină; Transferuri de testare.
Transferuri automate („cratime: auto”) pentru a include numai în zonele cu conținut lung; în butoanele UI - interzice transferul.
Pentru limba turcă/azeră, verificați formularele „İ/ı”.
Pentru georgiană și thailandeză, ridicați pinul de bază cu 1 px (caracteristici de stil).

10) Disponibilitate (A11y)

Contrast text: a se vedea § 2.
Stiluri de focalizare - vizibile fără culoare: subliniere, margine, umbră, offset.
Dimensiunea fontului este scalată sistemic (suport pentru dimensiunea textului OS).
Nu codificați sensul numai prin culoare/greutate - adăugați subtitrări și pictograme explicite.

11) Încărcarea și performanța fontului

Obiective: pentru a minimiza blocajele, pentru a oferi FOUT previzibil și CLS stabil.

Subseturi: latină, chirilică, numere/simboluri - fișiere individuale.
Formate: 'woff2' (principal), 'woff' ca rezervă.
„font-display: swap” (sau „opțional” pentru familiile secundare).

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

Font variabil în loc de 3-4 statici - adesea mai profitabil în greutate.
Buget: ≤ 150-200 KB în total pentru calea critică (după gzip/brotli).
Randare: Evitați mai multe umbre/măști pe text; utilizaţi cu uşurinţă efectele sistemului.

12) Jetoane tipografice (sistem de proiectare)

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) Aspect și ritm

Modul vertical 8-pt; distanța dintre paragrafe = 1 × pasul de bază.
Liste-Indentarea marcatorului este aliniată cu linia de bază a textului.
Butoane și câmpuri - Înălțimile sunt multipli ai liniei grilei de bază (de exemplu, 40/48/56 px).

14) Specificitatea iGaming (atelier)

Cote/cote, solduri, cronometre - utilizați numere tabelare, monospaced în coloane critice.
Lideri/rating: nivelare pe categorii, format valutar unificat, „↑/↓” explicit.
Notificări critice (18 +, limite, riscuri) - AAA minim în contrast, nu utilizați TOATE CAPS.
Bannere promoționale: Text numai pe alunecări/suprapuneri controlate de contrast.

15) Anti-modele

Lumină/subțire pe ace mici.
Text gri pe un fundal colorat, fără contrast de verificare.
Două sau mai multe căşti „pentru frumuseţe”.
Linii lungi (> 90 caractere) și înălțimea densă a liniei <1. 35.
Numere de lățime proporționale în tabele/sume” jumping „.
Push transferuri în butoane/etichete.

16) Lista de verificare

Lizibilitate

• Bodysuits 16-18 px; LH ≥ 1. 45.
• Lungimea șirului este de 45-80 de caractere.

Ierarhie

• Scalați în trepte ≥ 12%; liniuțe în concordanță cu grila.

Numere/tabele

• Numere tabelare pentru sume/coeficienți; aliniere zecimală.

Disponibilitate

• Contrast WCAG realizat; stilurile de focalizare sunt vizibile fără culoare.

Performanță

• Subset/woff2; 'font-display: swap'; buget ≤ 200 KB.

Localizare

• Suport chirilic/latin/RTL; hifenare/diacritice verificate.

17) A/B și valori

Test: Corp ± 1 px pin, poziția scară pitch, CTA greutate, de conducere.
Măsură: timp de citire, adâncime de derulare, CTR CTA, erori de formă, CLS (stabilitate text).

Scurt rezumat

Tipografia este scheletul interfeței. Setați o scală previzibilă, păstrați contrastul și ritmul, utilizați fonturi variabile și numere tabelare, optimizați încărcarea. Apoi interfața interfeței va fi citită rapid, va funcționa stabil și va scala la teme și limbi.