Allineamento ottico: 7 correzioni che la matematica sbaglia

Un triangolo di play dentro un bottone tondo da 40px, centrato con place-items: center. I numeri tornano tutti. A schermo il triangolo pende a sinistra. L’allineamento ottico è la correzione che chiude la distanza fra quello che il layout misura e quello che l’occhio legge, e nella maggior parte delle interfacce di prodotto non arriva mai.

I disegnatori di caratteri la applicano da secoli. Una O tonda si taglia più alta di una H piatta perché le due leggano della stessa dimensione: l’overshoot vale circa l’1-3% dell’altezza delle maiuscole, e i manuali di produzione di Peter Karow indicano circa il 3% per la O e il 5% per la A. Le interfacce ereditano lo stesso problema nel momento in cui un cerchio, un triangolo o una riga di testo finiscono dentro una scatola che conosce solo i propri bordi.

Perché un’interfaccia centrata con i numeri sembra storta

L’occhio centra la massa, il motore di layout centra i bordi. In un rettangolo le due cose coincidono, quindi i quadrati si centrano da soli e tutto il resto scivola. Il triangolo porta il peso sul lato piatto, e il centro geometrico ne lascia troppo dalla parte pesante. Un cerchio inscritto in un quadrato ne copre circa il 79% (pi greco diviso 4), quindi a parità di riquadro un avatar tondo sembra più piccolo di una miniatura quadrata. Una riga di testo sta dentro una line box che comprende lo spazio di ascendenti e discendenti che le lettere magari non usano, e così la centratura verticale avviene su metriche invisibili invece che sulle lettere.

Non è questione di gusto. È una differenza misurabile fra due cose che la macchina tratta come identiche, ed è il motivo per cui chi disegna da anni sposta le forme fuori dal centro reale.

I sette punti in cui si rompe in un’interfaccia di prodotto

1. L’icona dentro un bottone tondo

Il triangolo di play è il caso da manuale: massa piatta a sinistra, punta a destra, e il centro geometrico lo fa leggere spostato a sinistra. Noi lo spostiamo verso la punta del 3-6% della larghezza dell’icona e controlliamo alla dimensione reale, non ingrandita. Su un glifo da 24px vuol dire un pixel: transform: translateX(1px). Vale per qualsiasi glifo dalla sagoma asimmetrica: la freccia di invio, il segnalibro, il fumetto con la coda.

Lo spostamento appartiene al componente. Un’istanza che si sposta l’icona da sola è una segnalazione di bug contro il bottone, non una correzione.

2. L’etichetta dentro un bottone o una chip

Il padding verticale si applica alla line box, non alle lettere. Un’etichetta da 14px in un bottone da 40px con 13px di padding sopra e sotto finisce per stare bassa, perché lo spazio delle discendenti sotto la linea di base resta vuoto in una parola come Salva e pieno in una come Aggiorna piano. Oggi il CSS lo risolve in modo diretto: text-box-trim con text-box-edge taglia l’interlinea sopra l’altezza delle maiuscole e sotto la linea di base, così il padding misura le lettere. Il supporto è arrivato in Chrome ed Edge 133 e in Safari 18.2, mentre Firefox a metà 2026 ancora non ce l’ha: fuori da Baseline, quindi. Va messo dentro @supports (text-box: trim-both cap alphabetic) tenendo come riserva il padding asimmetrico, di solito 1-2px in meno sotto.

3. La dimensione ottica nei font variabili

Un carattere disegnato per il corpo 12 e lo stesso carattere disegnato per il corpo 48 sono due disegni diversi: raccordi più sottili, spaziatura più stretta, aperture più chiuse man mano che il corpo cresce. I font variabili portano tutto questo nell’asse opsz, e font-optical-sizing: auto è il valore predefinito del browser: funziona da solo, se il file del font ha l’asse. Due cose lo rompono: font-variation-settings scritto a mano, che scavalca il valore automatico, e i file statici sputati fuori da una pipeline di build che ha perso l’asse per strada. Verifica che l’asse ci sia nel file che servi davvero, non in quello che sta nel tool di design.

4. La spaziatura che cambia con corpo e maiuscole

Un solo valore di letter-spacing su tutta la scala tipografica sbaglia da entrambi i lati. I nostri valori di partenza: 0,04-0,06em in più sulle etichette in maiuscolo a 12px, zero per tutto il corpo del testo, 0,01-0,02em in meno sui corpi display sopra i 40px. Le maiuscole hanno bisogno di aria perché hanno fianchi piatti e nessun ritmo di ascendenti a separarle; i corpi grandi hanno bisogno del contrario, perché la stessa spaziatura relativa cresce insieme al testo. Il valore si scrive dentro il gradino della scala, accanto a corpo e interlinea, come qualsiasi altro dato di una scala tipografica.

5. Forme tonde accanto a forme quadrate

Un avatar tondo da 40px accanto a una miniatura quadrata da 40px sembra più piccolo, esattamente per quel 79% di area. Noi ingrandiamo gli elementi tondi del 4-8% rispetto ai quadrati che stanno nella stessa riga, poi guardiamo la riga al 100%. I sistemi di icone risolvono la stessa cosa con le keyline: glifi tondi e quadrati stanno dentro la griglia, quelli alti e larghi possono sconfinare nel padding, così ogni icona legge della stessa dimensione.

6. Il padding intorno a un glifo in coda

Le icone arrivano con dello spazio bianco già dentro il viewBox. Un bottone con 16px di padding sui due lati e un chevron in coda ha 16px più quello che il chevron si porta dentro, e il lato destro sembra largo. Si misura l’inchiostro, non l’SVG: o si stringe il viewBox nel set di icone, o si tolgono 2-4px al padding in coda nel componente che accosta testo e icona.

7. La punteggiatura a inizio riga

Le virgolette aperte in cima a una citazione rompono il filo sinistro, perché il segno è piccolo, alto e quasi tutto spazio bianco. La stampa lo risolve appendendo il segno fuori dalla colonna. Il CSS ha hanging-punctuation, che però funziona solo in Safari, e il valore last nel 2026 non è implementato da nessuna parte. Per una citazione che deve reggere ovunque: il segno in un ::before con margine negativo, oppure un text-indent negativo sulla prima riga.

Perché continua a uscire così

Tre cause, nell’ordine in cui le vediamo.

• Gli strumenti centrano sui bordi. L’allineamento di Figma e place-items lavorano sui riquadri. Niente, nel percorso predefinito, sa cos’è il peso visivo: la versione sbagliata è quella che costa zero.
• La correzione resta in un override di istanza. Chi disegna sposta il triangolo dentro una singola istanza, il valore non diventa mai un token, e la schermata dopo riparte dal componente non corretto. È il component drift che entra dalla porta più piccola possibile.
• La revisione confronta il build con lo spec. Se lo spec nasce dalla geometria, il build corrisponde allo spec e a schermo sono storti tutti e due. Nessuno, in tutta la catena, controlla il pixel renderizzato.

Quanto costa

Non rompe un flusso e non fa fallire un audit. Il costo è il commento di revisione che nessuno riesce a localizzare: la schermata sembra non finita, e in tre passano un pomeriggio a rimettere in fila il layout mentre il problema è un pixel dentro un bottone. Ed è un costo che si moltiplica, perché il componente non corretto viene copiato in ogni schermata nuova: costa poco sistemarlo nel componente, costa tempo quando lo stesso errore sta in quaranta schermate.

Un vincolo sulle correzioni: quando la correzione stringe il padding, l’area cliccabile resta. Le WCAG 2.2 fissano un bersaglio minimo di 24 per 24 pixel CSS al livello AA, e una rifilatura ottica che porta un bottone icona sotto quella soglia scambia un problema di finitura con un problema di conformità.

Come sistemare quello che è già online

1. Screenshot delle tre schermate più dense, zoom al 100%. Gli errori ottici spariscono quando ingrandisci, ed è il motivo per cui sopravvivono a una revisione fatta su un monitor da 27 pollici.
2. Ribalta lo screenshot in orizzontale. Lo specchio azzera il riconoscimento di forme che stava compensando l’errore, e lo storto salta fuori.
3. Sfoca di 8px. Il dettaglio sparisce, la distribuzione della massa resta. Quello che pende nella sfocatura pende anche nell’originale.
4. Correggi nel componente, mai nell’istanza. Una modifica al bottone icona vale più di quaranta override, ed è l’unica versione che sopravvive al redesign successivo.
5. Dai un nome a ogni correzione. Una costante --optical-shift-triangle: 1px si rivede, si cerca e si toglie. Un translateX(1px) lasciato nel foglio di stile è folklore.
6. Rimisura le aree cliccabili alla fine. Le rifilature ottiche rimpiccioliscono i riquadri.

Come tenerlo fuori

Quattro regole reggono alla prova dei fatti. Le correzioni ottiche appartengono ai componenti, quindi uno spostamento fatto sull’istanza si tratta come un difetto del componente. La spaziatura sta nella scala tipografica, un valore per gradino e non per singolo uso. Il taglio moderno del testo va dentro @supports con il padding di riserva intatto, così chi usa Firefox vede il comportamento di prima e non uno rotto. E la revisione di design guadagna una domanda: c’è qualcosa che stona quando la schermata è allo specchio.

Sono correzioni piccole, vecchie e quasi tutte codificabili. Quello che non si codifica è il controllo finale, uguale a com’era ai tempi dei caratteri di piombo: metti la cosa a schermo alla dimensione a cui la vedranno le persone, e guardala.