Capitolo 08
La micro-tipografia
Quasi tutto, in un'interfaccia, è testo. E il testo ha mille piccole decisioni — la virgoletta che si curva, il titolo che non lascia parole sole, la riga che dura quanto basta — che decidono se la pagina respira o trattiene il fiato.
Se guardi un prodotto qualsiasi e togli mentalmente le immagini, i bottoni, i bordi — resta il testo. È quasi tutto testo: i nomi dei campi, i messaggi di errore, i numeri, le etichette, i titoli, la riga di copyright in fondo. La tipografia non è il vestito buono che si mette la pagina nelle occasioni importanti: è il materiale di cui è fatta quasi ogni cosa che l’utente legge. E proprio perché è ovunque, i suoi difetti si distribuiscono ovunque — invisibili uno per uno, pesanti tutti insieme.
La micro-tipografia è il livello più fine di questa cura: non la scelta del carattere o della scala, ma quei segni piccolissimi che separano un testo “battuto a macchina” da un testo composto. La virgoletta dritta che dovrebbe curvarsi. Il titolo che lascia una parola orfana sull’ultima riga. La riga di testo lunga il doppio di quanto l’occhio regga. Sono dettagli che nessuno saprebbe nominare, ma che tutti sentono: una pagina con la micro-tipografia curata sembra semplicemente più seria, senza che si capisca perché.
Sei dimostrazioni, ognuna su una decisione che da sola sembra trascurabile. E come sempre qui, niente librerie: il browser moderno ha imparato a fare quasi tutto da solo — text-wrap: balance, le feature OpenType, gli assi dei font variabili, l’unità ch, hyphens: auto. La piattaforma ha recuperato in pochi anni quello che per decenni è stato il mestiere esclusivo del tipografo.
I segni che si curvano
La tastiera è bugiarda: ti dà un solo segno per fare cose diverse. La virgoletta dritta (") finge di essere due virgolette tipografiche, l’apostrofo dritto (') finge di essere un apostrofo vero, il trattino (-) finge di essere tre trattini diversi. La tipografia li distingue perché hanno mestieri diversi: il trattino medio (–) lega gli intervalli, il trattino lungo (—) apre un inciso, e i puntini di sospensione (…) sono un glifo, non tre punti appiccicati.
Punteggiatura tipografica · consapevole della lingua
Scrivi a sinistra “alla buona” — con le virgolette dritte, i trattini doppi, i tre puntini — e a destra leggi la versione composta. Le regole sono poche e oneste: … diventa …, — diventa un trattino medio e --- uno lungo, l’apostrofo fra due lettere si curva in ’. Le virgolette doppie si alternano apertura/chiusura, e qui sta la parte bilingue: in italiano diventano caporali («»), in inglese le double curly (””) — perché la convenzione cambia con la lingua, e fingere che sia universale è il primo errore.
Sul campione composto c’è hanging-punctuation: first last: la virgoletta d’apertura “sporge” oltre il margine, così il bordo sinistro del testo resta otticamente dritto invece di sembrare rientrato. Ha supporto reale solo su Safari — e va benissimo così: dove non è supportata, il testo resta composto, semplicemente non sporge. È la differenza fra un miglioramento progressivo e una promessa che il browser non può mantenere.
Il titolo che non si spezza male
Il modo in cui il browser manda a capo il testo è “ingordo”: riempie ogni riga fino all’orlo e scarica gli avanzi sull’ultima. Per un paragrafo lungo va benissimo. Per un titolo di due righe è un disastro: l’ultima riga finisce con una parola sola, sospesa, e il titolo sembra rotto. La parola sola in fondo si chiama orfana (in un titolo) o vedova (in fondo a un paragrafo), e per anni la si combatteva a mano, infilando <br> o spazi unificatori dove servivano.
La pagina respira quando il titolo non lascia parole sole
Il wrapping predefinito riempie ogni riga fino all’orlo e scarica gli avanzi sull’ultima: spesso una parola sola, sospesa nel vuoto. Una riga finale di una parola si chiama vedova, ed è il piccolo strappo che fa sembrare la pagina trascurata.
text-wrap · balance per i titoli, pretty per il corpo
Due proprietà, due mestieri. text-wrap: balance distribuisce le parole di un titolo su righe di lunghezza simile: niente più orfane. Il browser lo applica solo a blocchi corti (tipicamente fino a sei righe) perché è un calcolo costoso — ed è la scelta giusta, un titolo lo è quasi sempre. text-wrap: pretty invece lavora sul corpo: guarda le ultime righe del paragrafo ed evita la vedova, ricomponendo appena quel tanto che basta.
Spegni l’interruttore e torna il wrapping ingordo: guarda l’ultima riga del titolo accorciarsi a una parola. Il re-wrapping non si anima — un testo che scivola fra una disposizione e l’altra sembrerebbe uno scatto, non una transizione. Si commuta, e basta. È una delle conquiste recenti del CSS che fa risparmiare più markup manuale: zero <br> infilati a mano, zero spazi unificatori, zero correzioni che si rompono al primo cambio di copy.
Le cifre che il font sa comporre
Un font non porta solo lettere: porta delle istruzioni su come comporre i numeri, e sono feature OpenType che restano spente finché non le si chiama per nome. Epilogue sa fare due cose che si vedono subito: trasformare 1/2 nel glifo unico ½ (una frazione vera, non tre caratteri impilati), e dare a ogni cifra la stessa larghezza perché una colonna di numeri si allinei in verticale. I due interruttori accendono esattamente queste due.
1 1/2 tazza di farina, 3/4 di zucchero, 1/3 di latte
Feature OpenType · frazioni e cifre tabulari
Accendi Frazioni e guarda 1/2, 3/4, 1/3 ricomporsi nei glifi ½ ¾ ⅓ — è la feature frac, attivata via font-variant-numeric: diagonal-fractions. Accendi Cifre incolonnate e la colonna a destra si allinea: tabular-nums dà a ogni cifra la stessa cassa, così l’1 stretto non fa più ballare i bordi (è la lezione del capitolo 06, qui vista dal lato del font). Spente, restano frazioni “dattilografiche” e cifre a larghezza variabile.
E qui c’è la lezione di onestà più affilata del capitolo, che mi ha morso mentre lo scrivevo. Non tutti i font compongono queste feature, e quando una manca impostarla non dà errore: semplicemente non fa nulla. La prima versione di questa demo chiedeva al font dei set stilistici (la ‘a’ a un piano, lo zero sbarrato) che quel font non aveva — e i pulsanti non cambiavano niente, in silenzio. Per questo ora la demo mostra solo frac e tnum, dopo aver verificato sul rendering reale che Epilogue le compone davvero. La regola di tutto il playground vale anche per chi lo costruisce: non promettere quello che il materiale sottostante non può dare — e controllare il materiale, invece di fidarsi della documentazione.
Il peso che segue la dimensione
Un font variabile ha un asse di peso continuo — Epilogue va da 100 a 900 — e questo abilita una regola di ottica che gli asset statici non sanno applicare. Più un testo è grande, più vuole essere leggero: alle grandi dimensioni un peso medio sembra goffo, gonfio. Più un testo è piccolo, più vuole un filo di peso in più, altrimenti i tratti sottili si chiudono e la riga sbiadisce. Lo stesso “peso percepito” si ottiene con numeri diversi a seconda della taglia.
Il colore della pagina
Il peso percepito di un blocco di testo dipende dalla sua dimensione: lo stesso valore numerico cambia voce a seconda di quanto è grande.
Didascalia · 13px, il peso più alto
Peso variabile compensato per taglia
Con l’interruttore spento, titolo, corpo e didascalia usano tutti lo stesso peso (500): guarda il titolo sembrare pesante e un po’ grezzo, e la didascalia sottile, quasi smunta. Accendilo e ogni taglia prende il suo peso compensato — titolo a 380, corpo a 460, didascalia a 540 — via font-variation-settings: ‘wght’. Il “colore tipografico”, cioè il grigio medio che il testo lascia sulla pagina, torna uniforme fra le tre taglie. È una cosa che si sente prima di vederla.
È il tipo di rifinitura che separa una tipografia “messa lì” da una tipografia accordata. Un tempo richiedeva tre tagli diversi dello stesso carattere (display, text, caption): pesi disegnati apposta per ogni dimensione. Oggi l’asse variabile lo dà gratis, a patto di ricordarsi che il peso non è un valore assoluto ma una funzione della taglia. La transizione fra i due stati usa le durate-token, quindi con prefers-reduced-motion commuta secca, senza morphing.
La misura giusta
La tipografia comincia molto prima della scelta del carattere: comincia da quanto è lunga una riga. La “misura” — il numero di caratteri per riga — è forse la decisione che più influenza la leggibilità di un testo lungo, e quasi nessuno la regola consapevolmente. Troppo lunga, e l’occhio fatica a ritrovare l’inizio della riga successiva. Troppo corta, e i continui ritorni a capo spezzano il ritmo. La zona comoda per la lettura continua sta fra circa 45 e 75 caratteri.
La tipografia comincia molto prima della scelta di un carattere: comincia da quanto è lunga una riga. È una decisione che l’occhio sente prima che la mente la sappia nominare. Trascina il cursore e guarda dove il testo smette di essere comodo.
La misura in ch · 45–75 è la zona comoda
Trascina lo slider e guarda dove il testo smette di essere comodo. La misura si conta in ch, l’unità che vale la larghezza dello “0” del font corrente: dire max-inline-size: 64ch significa “circa 64 caratteri per riga”, indipendentemente dal corpo. È molto più robusto di una larghezza in pixel, che cambia significato appena cambia la dimensione del testo. Il valore in ch è mostrato con tabular-nums, così non sussulta passando da 9 a 10 — la lezione del capitolo 06.
Due dettagli onesti. Primo: la leading si accorda alla misura — righe più lunghe ricevono un filo di interlinea in più, perché l’occhio ha bisogno di più aiuto a ritrovare la riga successiva quando il salto orizzontale è ampio. Secondo: il verdetto “comoda / troppo stretta / troppo larga” usa un grigio sobrio fuori zona, non un rosso d’allarme. La misura giusta è un intervallo, non una legge: 44 caratteri non sono un errore, sono solo un po’ stretti. Il sistema consiglia, non sgrida.
La sillabazione onesta
L’ultimo segno è il più frainteso: il testo giustificato. Allineare entrambi i margini sembra l’apice dell’ordine tipografico, ma su misure strette è spesso una trappola. Senza sillabazione, per pareggiare il margine destro il browser allarga gli spazi fra le parole — e quando una parola lunga non ci sta, li allarga troppo, fino a creare i “fiumi”: rivoli bianchi che scorrono verticalmente attraverso il blocco e disturbano la lettura.
La giustificazione promette ordine e a volte mantiene disordine: senza sillabazione, parole particolarmente lunghe costringono il browser a dilatare gli spazi della riga precedente. Con la sillabazione attiva, invece, le parole si spezzano dove la lingua lo consente e il grigio del testo torna uniforme.
hyphens: auto · e perché lang è obbligatorio
Due interruttori sullo stesso paragrafo. Attiva solo Giustificato e guarda gli spazi dilatarsi su misura stretta. Aggiungi Sillabazione (hyphens: auto) e le parole si spezzano dove la lingua lo consente: gli spazi tornano regolari, il grigio del testo si fa uniforme. Giustificato e sillabazione sono una coppia — il primo da solo, su colonne strette, fa più danni che eleganza.
Ed ecco il punto onesto, il bug tipografico più comune del web: hyphens: auto funziona solo se l’elemento dichiara la sua lingua con l’attributo lang. Senza, il browser non sa quale dizionario di sillabazione usare e semplicemente non sillaba — silenziosamente, senza errori. Qui il paragrafo porta lang=“it”, sempre. E la posizione di default di tutto il playground resta la bandiera a destra (ragged right): un margine destro irregolare ma con spazi puliti è quasi sempre più leggibile di un giustificato forzato.
Sei segni piccolissimi, ognuno invisibile da solo. La virgoletta che si curva nella lingua giusta, il titolo che non lascia parole orfane, le feature che danno voce al font, il peso che si accorda alla taglia, la riga lunga quanto l’occhio regge, la parola che si spezza solo se sa in che lingua è scritta. Nessuno di questi dettagli si nota quando è fatto bene — si nota solo che la pagina, complessivamente, respira. Ed è di nuovo il principio di Altrove: tutto quello che succede senza che l’utente se ne accorga è la vera potenza dell’interfaccia, mentre lui sta semplicemente leggendo.
Il prossimo capitolo lascia la pagina e torna ai componenti, con una domanda apparentemente banale: anatomia di un toggle. Perché lo switch è l’unico controllo che si comporta come un oggetto fisico — ha due posizioni, non due stati — e quella differenza cambia tutto il modo in cui lo si disegna.