text-wrap: balance e pretty — Tipografia Perfetta in CSS
Perché text-wrap nel 2026
Per anni, la tipografia web ha sofferto di un problema silenzioso: le righe di testo si spezzano in modo arbitrario, lasciando titoli con una sola parola orfana sull’ultima riga, o paragrafi con distribuzioni di parole visivamente squilibrate. Finora l’unica soluzione era affidarsi a <br> manuali, a JavaScript, oppure rassegnarsi. Nel 2026 esistono due nuovi valori CSS che risolvono il problema in modo nativo: text-wrap: balance e text-wrap: pretty. Non si tratta di hype — sono già in Chrome, Edge, Firefox e Safari con supporto stabile, e cambiano concretamente il modo di gestire la tipografia nei tuoi progetti. In questo articolo esploreremo come funzionano entrambi i valori, quando usarli, i loro limiti di performance, e come integrarli oggi in produzione. Se già lavori con tipografia fluida e responsive — ad esempio usando la tecnica clamp() per i font — text-wrap è il passo successivo naturale per completare il tuo toolkit tipografico.
Il Problema: Orfane, Vedove e Righe Squilibrate
Prima di capire la soluzione, identifichiamo il problema con precisione. Il comportamento default del browser divide il testo in righe usando un algoritmo greedy: riempie ogni riga con quante più parole possibile, poi va a capo. Risultato: l’ultima riga di un titolo spesso contiene una parola sola (“orfana”), l’equilibrio visivo va a rotoli e il layout appare poco professionale. Un esempio classico:
<!-- Senza text-wrap: balance -->
<!-- Risultato: 3 parole / 3 parole / 1 parola -->
<h2>Come Ottimizzare le Performance
del Tuo Sito con
CSS</h2>
<!-- Con text-wrap: balance -->
<!-- Risultato: 3 parole / 4 parole (bilanciato) -->
<h2 style="text-wrap: balance;">Come Ottimizzare le Performance
del Tuo Sito con CSS</h2>Il browser con balance calcola la distribuzione ottimale delle righe in modo che abbiano larghezze simili. Non elimina necessariamente le righe brevi, ma le rende proporzionate. Questo ha un costo computazionale, ed è per questo che CSS limita balance a blocchi di testo brevi — tipicamente sotto le 6 righe.
text-wrap: balance — Come Funziona e Quando Usarlo
text-wrap: balance è progettato specificamente per heading, sottotitoli e blocchi di testo corti. Il browser applica un algoritmo che bilancia visivamente le righe cercando di rendere la larghezza di ogni riga il più simile possibile. La spec limita l’effetto alle prime 10 righe del blocco (Chrome usa 6 come soglia pratica) per ragioni di performance.
/* Applicazione base */
h1, h2, h3, h4 {
text-wrap: balance;
}
/* Pattern comune: tutti gli heading del progetto */
:is(h1, h2, h3, h4, h5, h6) {
text-wrap: balance;
}
/* Solo per blocchi hero o callout */
.hero-title,
.section-title,
.card__heading {
text-wrap: balance;
}
/* Con fallback per browser non supportati */
.balanced-title {
/* Fallback: niente di speciale, testo normale */
text-wrap: balance;
/* Per browser molto vecchi che non supportano text-wrap
si può aggiungere max-width come compromesso visivo */
max-width: 20ch; /* opzionale, come fallback estetico */
}Una regola importante: non usare balance su paragrafi lunghi. Su testi di 3-4 righe e oltre, il risultato estetico diventa discutibile (le righe tendono ad essere tutte più corte del massimo disponibile) e il costo computazionale aumenta. L’uso ideale è su titoli e sottotitoli — esattamente dove il problema visivo delle orfane è più evidente e fastidioso.
🔧 Pro tip: Applica
text-wrap: balancea livello di reset CSS globale su tutti gli heading. È safe, non ha side effects su testi che non vanno a capo, e il miglioramento visivo su heading multi-riga è immediato.
text-wrap: pretty — La Soluzione per i Paragrafi
Se balance è il rimedio per i titoli, pretty è la risposta per i paragrafi di testo lungo. Il suo obiettivo non è bilanciare le righe, ma applicare un algoritmo più intelligente per evitare orfane tipografiche (una singola parola sull’ultima riga) e migliorare il colore tipografico generale del blocco. A differenza di balance, pretty non ha un limite di righe — lavora sull’intero paragrafo — ma il suo impatto è più sottile e concentrato sulle ultime righe.
/* text-wrap: pretty per paragrafi */
p {
text-wrap: pretty;
}
/* Oppure combinato con altri valori tipografici */
article p,
.post-content p,
.prose p {
text-wrap: pretty;
/* Buona tipografia va di pari passo con line-height e max-width */
line-height: 1.7;
max-width: 65ch; /* larghezza ottimale per la leggibilità */
}
/* Schema completo: balance per heading, pretty per testi */
:is(h1, h2, h3, h4, h5, h6) {
text-wrap: balance;
}
p, li, blockquote {
text-wrap: pretty;
}L’algoritmo di pretty si ispira agli algoritmi di typesetting tradizionali come TeX/Knuth-Plass, che guardano il paragrafo nella sua interezza invece di ottimizzare riga per riga. Il risultato è meno drammatico rispetto a balance ma contribuisce in modo concreto alla leggibilità dei testi lunghi. Se stai lavorando a una content-heavy app e hai già ottimizzato la performance web con Core Web Vitals, aggiungere pretty ai paragrafi è un’ottimizzazione UX a costo quasi zero.
Supporto Browser e Progressive Enhancement
Nel 2026 il supporto è ampio ma non universale al 100%. Ecco la situazione attuale:
- Chrome/Edge 114+: supporto completo per entrambi i valori
- Firefox 121+: supporto completo
- Safari 17.4+: supporto per
balancestabile;prettysupportato da 17.5+ - Browser legacy: ignorano la proprietà silenziosamente (graceful degradation)
La buona notizia: text-wrap è un progressive enhancement perfetto. I browser che non lo supportano ignorano la dichiarazione e mostrano il testo nel modo tradizionale. Non ci sono fallback complessi da gestire. Puoi tranquillamente aggiungerlo già oggi nel tuo CSS globale senza if-checks o feature queries, anche se per progetti enterprise potresti voler usare @supports per documentare l’intento:
/* Approccio progressive enhancement diretto */
h1, h2, h3 {
text-wrap: balance; /* Ignorato silenziosamente da browser vecchi */
}
p {
text-wrap: pretty; /* Stessa cosa */
}
/* Alternativa con @supports (utile per documentazione o team) */
@supports (text-wrap: balance) {
:is(h1, h2, h3, h4, h5, h6) {
text-wrap: balance;
}
}
@supports (text-wrap: pretty) {
p, li {
text-wrap: pretty;
}
}
/* Utility classes per casi specifici */
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.text-nowrap { text-wrap: nowrap; }
.text-wrap { text-wrap: wrap; }Nota: text-wrap è una shorthand per le proprietà white-space-collapse e text-wrap-mode/text-wrap-style, introdotte nella spec CSS Text Level 4. I valori balance e pretty si riferiscono allo stile di wrapping, non alla modalità. Se lavori con il CSS avanzato nei tuoi progetti, vale la pena conoscere questa distinzione per evitare conflitti con proprietà legacy come white-space: nowrap.
Integrazione con Tailwind CSS e Framework Moderni
Se usi Tailwind CSS, dalla versione 3.3 hai le utility classes pronte. In Tailwind 4 (2025+) sono ancora più integrate nel sistema di design:
<!-- Tailwind CSS 3.3+ -->
<h1 class="text-balance text-4xl font-bold">
Titolo che si bilancia automaticamente su più righe
</h1>
<p class="text-pretty leading-relaxed max-w-prose">
Paragrafo lungo con distribuzione delle parole ottimizzata
per evitare orfane tipografiche sull'ultima riga del blocco.
</p>
<!-- Pattern completo per card -->
<article class="card">
<h2 class="text-balance text-2xl font-semibold mb-3">
Titolo della Card con Possibile Orfana
</h2>
<p class="text-pretty text-gray-600 leading-relaxed">
Descrizione della card con testo abbastanza lungo da
beneficiare dell'algoritmo pretty per evitare orfane.
</p>
</article>
<!-- In Next.js / React con className -->
<h1 className="text-balance text-5xl font-bold tracking-tight">
{heroTitle}
</h1>Per chi usa CSS Modules o styled-components in React, l’approccio più efficiente è definire le regole nel global stylesheet e lasciarle ereditare. Se invece vuoi utilità granulari, puoi definire classi come .text-balance e .text-pretty nel tuo design system. Con le CSS Custom Properties per temi adattivi, queste property si integrano senza attrito nel sistema di variabili globali.
Performance: Quando Fare Attenzione
Il calcolo di text-wrap: balance richiede che il browser esegua più passaggi di layout per trovare la distribuzione ottimale. In pratica l’impatto è trascurabile per heading e testi brevi, ma diventa rilevante in scenari specifici:
- Liste lunghe di card (100+ card con heading): il costo si accumula. Misura con DevTools prima di applicare a tutti gli elementi.
- Text che cambia dinamicamente (React re-render frequenti): ogni cambio di testo richiede ricalcolo. Valuta se il beneficio visivo vale il costo.
- Animazioni su blocchi con
balance: evita di animarewidthofont-sizesu elementi conbalance— ogni frame dell’animazione richiede un ricalcolo. text-wrap: prettysu paragrafi: ha un costo minore rispetto abalancee è sicuro per testi lunghi. Chrome lo ottimizza bene.
Per misurare l’impatto reale, usa il pannello Performance di Chrome DevTools: filtra per “Layout” e confronta i tempi prima e dopo. In quasi tutti i casi reali, l’impatto sarà sotto 1ms per azione utente e completamente trascurabile. L’ottimizzazione delle performance frontend è un tema caro a questo blog: se vuoi approfondire, leggi la guida su INP e FID per siti più responsivi.
FAQ e Domande Frequenti
Qual è la differenza tra text-wrap: balance e text-wrap: pretty?
balance è ottimizzato per testi brevi come titoli e heading: bilancia visivamente la larghezza di ogni riga per ottenere un risultato simmetrico. Ha un limite di circa 6-10 righe e un costo computazionale maggiore. pretty invece lavora su paragrafi lunghi con un approccio più simile a TeX: ottimizza il wrapping globale del paragrafo per evitare orfane tipografiche, con un impatto visivo più sottile ma su testi di qualsiasi lunghezza. In sintesi: usa balance per heading, pretty per paragrafi.
Posso usare text-wrap: balance su tutti i tag senza problemi?
Puoi applicarlo globalmente a tutti gli heading senza problemi: su testo a singola riga non produce nessun effetto visivo (non c’è nulla da bilanciare) e il costo computazionale è zero. Evita di applicarlo a paragrafi lunghi: oltre le 6-10 righe il browser interrompe il calcolo (o lo applica parzialmente), e il risultato estetico — righe tutte più corte del necessario — può peggiorare la leggibilità. Per i paragrafi usa text-wrap: pretty che è progettato esattamente per quel caso d’uso.
Cosa succede nei browser che non supportano text-wrap?
Assolutamente nulla di problematico: i browser che non riconoscono la proprietà la ignorano silenziosamente e usano il comportamento di wrapping standard. Questa è la definizione di progressive enhancement: il testo funziona correttamente in tutti i browser, semplicemente senza il miglioramento tipografico nei browser più vecchi. Non servono fallback, @supports queries o polyfill JavaScript. Nel 2026, con oltre il 90% dei browser che supportano entrambi i valori, il rischio di regressione visiva è praticamente inesistente.
text-wrap: balance funziona con testo dinamico in React/Vue?
Sì, funziona. Il ricalcolo avviene ad ogni re-render del componente che contiene il testo, il che nella maggior parte dei casi è ininfluente sulle performance. L’unico scenario da monitorare è una lista con molti elementi (100+) che si aggiornano frequentemente: in quel caso il costo aggregato potrebbe diventare misurabile. Per i casi comuni — un hero title che cambia al cambio lingua, o una card list che si aggiorna su filtro — text-wrap: balance non impatta le performance in modo percettibile. Verifica sempre con DevTools se hai dubbi su un caso specifico.
Conclusione
text-wrap: balance e text-wrap: pretty sono due delle aggiunte CSS più pratiche degli ultimi anni: risolvono un problema reale — la tipografia sgraziata — con una singola linea di codice, senza JavaScript, senza librerie, senza side effects. La ricetta è semplice: applica balance a tutti i tuoi heading nel CSS globale, aggiungi pretty ai tuoi paragrafi, e dimentica per sempre le orfane tipografiche. Il 90%+ di copertura browser nel 2026 rende queste proprietà sicure per la produzione. Sono un esempio perfetto di come la piattaforma web evolva per risolvere problemi che gli sviluppatori gestivano con hack e workaround: abbraccia queste API native e tieni il tuo CSS pulito e semantico.
Suggerimenti e Risorse
🔧 Strumento: Usa Chrome DevTools per ispezionare il layout delle righe prima e dopo aver applicato
text-wrap. La tab “Rendering” con “Layout Shift Regions” può rivelare eventuali impatti visivi indesiderati.
💡 Pro tip: Abbina
text-wrap: balanceagli heading conmax-width: fit-contentnei callout box e nei badge: la combinazione garantisce che il testo non si allarghi oltre il necessario E sia ben bilanciato internamente.
🎯 Pattern pronto: Aggiungi questo snippet al tuo CSS reset e dimenticatelo:
:is(h1,h2,h3,h4,h5,h6) { text-wrap: balance; } p { text-wrap: pretty; }— è il miglioramento tipografico più cost-effective che puoi fare oggi al tuo progetto.
