Tipografia interfaccia

1) Il ruolo della tipografia nel prodotto

• accelera la scansione e riduce il carico cognitivo
• crea una gerarchia e aiuta a orientarsi nello stato,
• aumenta la conversione (CTA, moduli) e riduce gli errori,
• rende l'interfaccia disponibile e resistente alla localizzazione.

2) Impostazioni di base

Kegl (testo principale): 16-18 px sul desktop, 15-16 px sul mobile.
Intervallo tra righe (line-height): 1. 45–1. 6 per il testo, 1. 2–1. 35 per i titoli.
Lunghezza riga (measure): 45-80 caratteri; I sidbar sono 36-60.
Intervallo trasversale (tracking): 0-1% per il testo normale; per il caps - + 2-4%.
Contrasto (WCAG) - Testo normale ≥ 4. 5:1, grosso/grasso 3:1.
Registro: evitare l'ALL CAPS permanente; Usa per etichette/chip, compensi il tracking.

3) Gerarchia e scala delle quote

Si consiglia un approccio modulare: griglia a 8 pt + scala tipografica.

• Display: 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)
• Body/L: 18/28 (1. 55)
• Body/M: 16/26 (1. 55)
• Body/S: 14/22 (1. 5)
• Caption: 12/18 (1. 5)
• Mono/UI: 12–14/18–20

• Tra i livelli adiacenti è un passo notevole (minimo 12-16%).
• La gerarchia è costruita con una combinazione di dimensioni, peso, interlinea, colore (tenendo conto del contrasto) e distanze fino ai blocchi adiacenti.

4) Capovolgimento, linea base e ottica

Allineare gli elementi in base al livello di intestazione (utile per le icone).
Supporta la linea di base del testo con un passo di 4/8 pt - i ritmi piatti semplificano la lettura.
Indentazioni ottiche: le intestazioni sopra il blocco sono più grandi di quelle sottostanti (ad esempio + 4-8 px in alto).

5) Caratteri e caratteri variabili

Set minimo: Regolare, Medium, SemiBold (Bold opzionale).
Non usare Ultra-Light/Thin in UI.

• Body: 420-470 (più rigido ottico di 400).
• UI labels: 500–550.
• Headers/CTA: 600–650.
• In caso di riduzione del volume - aumenta leggermente il peso (compenso).
• Disattivare le legature decorative nei numeri UI; tenete le legature standard per cirillico/latino.

6) Numeri, tabelle e datawise

Includere tabula figures (numeri a larghezza di banda) per importi, coefficienti, timer, ascolti.
I segni +/- sono sempre visibili e con un contrasto sufficiente; i valori negativi non sono solo di colore (icone/freccia/grasso).
Per i valori di denaro, utilizzare lo spazio stretto come separatore di cifre sottile (o formato locale).
Nelle tabelle, allineate il punto decimale; per le mono-colonne è un carattere monouso.
I grafici di firma degli assi 12 px (mobile) e 13-14 px (desktop), LH 1. 3; Le leggende ≥ 4. 5:1 verso il fondo.

7) Moduli, input, messaggi

Etichette 12-14 px, LH 1. 3–1. 4, regolatore o medium.
Placeholder non deve essere «aria» - Obiettivo 3:1 al fondo, visivamente diverso dal testo.
Errori/successo/testo help 12-14 px; Non fare affidamento solo sul colore (icona/testo).

8) Temi scuri/luminosi

In un argomento oscuro, evitare # FFF su # 000, alzare lo sfondo fino al L≈0. 14–0. 18, e abbassate il testo a L≈0. 9, meno riflessi.
L'interlinea in dark può essere a + 0. 05 più alto per comfort.
Riferimenti/accenti in dark - riduce la saturazione e aumenta la luminosità di 0. 02–0. 04.

9) Localizzazione e multilingue

Scegli le famiglie con il supporto completo di cirillico/latino/greco, segni e valute.
RTL: mirroring icone/allineamento, ma non numeri e latitanza; testate le trasferte.
Includi automaticamente ('hyphens: auto') solo in zone di contenuti lunghi; pulsanti UI - Impedisci la migrazione.
Per il turco/azero, controllate i moduli «İ/ı».
Per il georgiano e il thailandese, aumentare di 1 px (caratteristiche di stile).

10) Disponibilità (A11y)

Contrasto del testo: Vedere l'articolo 2.
Gli stili di attivazione sono visibili senza colore: underline, cornice, ombra, offset.
La dimensione del carattere viene scalata a livello di sistema (supporta OS text size).
Non codificare il significato solo attraverso il colore/peso - aggiungere firme e icone esplicite.

11) Caricamento di caratteri e performance

Obiettivi: ridurre al minimo i blocchi, garantire un FOUT prevedibile e un CLS stabile.

Sottoinsiemi (subset) - Latino, cirillico, numeri/caratteri - file separati.
I formati sono «woff2», «woff» come fallback.
«font-display: swap» (o «optional» per le famiglie secondarie).

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

Un font variabile anziché 3-4 statici è spesso più vantaggioso per il peso.
Budget: ≤ 150-200 KB in totale su un percorso critico (dopo il gzip/brotli).
Render: evitare le ombre o le maschere multiple sul testo; Utilizzare gli effetti di sistema in modo conveniente.

12) Token tipografici (sistema di progettazione)

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) Flebo e ritmo

Modulo verticale a 8 pt distanze tra paragrafi = 1 x passo base.
Elenchi - Il rientro della maniglia è allineato alla linea di base del testo.
Pulsanti e campi: l'altezza è multipla della griglia di base (ad esempio, 40/48/56 px).

14) Particolare iGaming (laboratorio)

Coefficienti/probabilità, bilanci, timer - Usa i numeri tabulari, monosirina nelle colonne critiche.
Leader/classificazioni: allineamento a cifre, unico formato di valuta, esplicito «↑/↓».
Notifiche responsabili (18 +, limiti, rischi): minimo AAA per contrasto, non utilizzare ALL CAPS.
Banner promozionali: testo solo su piastrelle/overlay con controllo del contrasto.

15) Anti-pattern

Light/Thin su piccoli bagagli.
Testo grigio su sfondo colorato senza controllare il contrasto.
Due o più auricolari per la bellezza.
Righe lunghe (> 90 caratteri) e line-height dense <1. 35.

Numeri di larghezza proporzionale nelle tabelle/« scaricabili »

Spostamenti forzati nei pulsanti/etichette.

16) Foglio di assegno con gelosia

Leggibilità

• Body 16-18 px; LH ≥ 1. 45.
• Lunghezza della riga 45-80 caratteri.

Gerarchia

• Scala a passo 12%; I ritiri sono coerenti con la griglia.

Numeri/tabelle

• Tabolare-nums per importi/coefficienti; allineamento decimale.

Disponibilità

• Il contrasto WCAG è stato raggiunto; gli stili di attivazione sono visibili senza colore.

Performance

• Subset/woff2; `font-display: swap`; Il budget è di 200 KB.

Localizzazione

• Supporto cirillico/latino/RTL; spostamenti/diacritici testati.

17) A/B e metriche

Prova: Capillare Body © 1 px, barra del titolo, peso CTA, interlinea.
Misurare: read time, scroll depth, CTR CTA, errori di modulo, CLS (stabilità del testo).

Breve riepilogo

La tipografia è lo scheletro dell'interfaccia. Impostare una scala prevedibile, mantenere il contrasto e il ritmo, utilizzare i caratteri variabili e i numeri tabulari, ottimizzare il caricamento. Allora la UI si leggerà rapidamente, funzionerà in modo stabile e ridimensionato sotto temi e lingue.