tidy-typography.css su CSS-Tricks: un reset moderno per la tipografia web

Su CSS-Tricks arriva tidy-typography.css, un foglio di stile che raccoglie regole tipografiche pronte all’uso: rendering e fallback, dimensioni fluide, ritmo verticale, wrapping, sillabazione, dettagli OpenType. Si può usare intero o a pezzi, copiando la dichiarazione che risolve il problema del momento¹.

Il blocco iniziale mette in ordine il rendering. In html compaiono -webkit-font-smoothing: antialiased e text-rendering: optimizeLegibility, suggerimenti rivolti soprattutto a WebKit. font-synthesis: none impedisce al browser di simulare grassetto o corsivo quando il font non li offre. Le proprietà text-size-adjust con e senza prefissi disattivano l’inflazione del testo su mobile. Sul body, font-size-adjust: from-font riduce gli sbalzi percettivi mentre un fallback prende il posto del webfont¹.

La tipografia diventa fluida in base al contenitore. container-type: inline-size trasforma il wrapper in container query. I figli possono così usare cqi, l’unità legata alla larghezza del contenitore. In :root gli esempi mostrano clamp con cqi, per dimensionare titoli e testi senza affidarsi a vw. Risultato: lo stesso heading si adatta sia alla colonna dell’articolo sia a una sidebar da 300 pixel, senza media query per componente¹.

Per il ritmo verticale, il foglio taglia il “mezzo leading” predefinito delle linee. Su titoli, paragrafi, citazioni, didascalie e liste entrano text-box-trim: trim-both e text-box-edge: cap alphabetic, che misurano dai cappucci delle maiuscole alla baseline alfabetica. È un approccio basato su metriche, alternativo agli aggiustamenti con margini negativi legati al singolo font. Il selettore :heading, proposto in Selectors Level 5 per coprire h1, h6 e [role="heading"], non è ancora nei browser: va protetto dietro @supports selector()¹.

Il wrapping bilancia e ripulisce. text-wrap: balance su titoli, blockquote e didascalie distribuisce il testo sulle righe, utile fino a circa sei linee. Nei paragrafi, nelle liste e nelle definizioni, text-wrap: pretty evita l’ultima parola isolata senza ribilanciare tutto il blocco. Per i campi editabili serve text-wrap: stable, che impedisce il rimescolamento a ogni battuta. I paragrafi impostano anche max-width: 65ch per mantenere una misura confortevole¹.

La sillabazione richiede la lingua corretta, in HTML o CSS. hyphens: auto usa i dizionari, ma va regolata. Il foglio imposta limiti per lunghezza minima della parola, frammenti prima e dopo la rottura, numero massimo di linee consecutive, zona di tolleranza e protezione dell’ultima parola. Specifica anche un glifo di trattino. Safari ha bisogno degli equivalenti con prefisso -webkit-, dichiarati insieme. Su pre, code, var, samp, kbd e titoli, hyphens: manual evita rotture in parti sensibili come codice e intestazioni¹.

La microtipografia affina margini e sottolineature. hanging-punctuation: first allow-end last fa sporgere la punteggiatura di apertura e chiusura, così il bordo del testo risulta otticamente allineato. Sui link, text-decoration-thickness: from-font usa lo spessore previsto dal font, text-underline-offset: 0.15em alza la linea a una distanza leggibile, text-decoration-skip-ink: auto evita che l’underline invada le discendenti¹.

Alcune proprietà restano sperimentali, con supporto diseguale tra browser, quindi servono guardrail e non inclusioni alla cieca. L’articolo offre il foglio completo e incoraggia a prelevare solo ciò che serve¹. La novità pratica è nei container query: sostituiscono le scale basate su viewport e sbloccano componenti tipografici davvero riusabili, che si adattano al contesto senza media query dedicate¹.