{"id":82649,"date":"2025-12-01T10:29:33","date_gmt":"2025-12-01T09:29:33","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=82649&preview=true&preview_id=82649"},"modified":"2025-12-03T16:34:41","modified_gmt":"2025-12-03T15:34:41","slug":"tipografia-fluida","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/tipografia-fluida\/","title":{"rendered":"Scalare i caratteri con eleganza con la tipografia fluida"},"content":{"rendered":"

Far apparire bene il testo su ogni schermo non \u00e8 cos\u00ec semplice come sembra. Per molto tempo i web designer hanno utilizzato i breakpoint delle media query per ridimensionare i font, ma questo approccio diventa rapidamente disordinato con l’aumentare dei dispositivi e delle dimensioni dello schermo.<\/p>\n

A partire da WordPress 6.1<\/a> (rilasciato nel novembre 2022), esiste un modo migliore: la tipografia fluida. Questo sistema regola automaticamente le dimensioni dei caratteri definite nel file theme.json<\/code> in modo che si ridimensionino senza problemi, indipendentemente dalla larghezza o dall’altezza dello schermo.<\/p>\n

Questa funzione non si limita a modificare le dimensioni dei caratteri, ma regola anche l’altezza delle linee, la spaziatura delle parole e persino lo spazio bianco, rendendo il tuo design pi\u00f9 coerente, leggibile e accessibile su ogni dispositivo.<\/p>\n

Questo articolo spiega come funziona la tipografia fluida, le sue differenze rispetto ai breakpoint tradizionali e come implementarla in WordPress utilizzando theme.json<\/code> e CSS.<\/p>\n

Ma prima di tutto, analizziamo il modo in cui eravamo soliti gestire la tipografia e perch\u00e9 la tipografia fluida rappresenta un grande miglioramento.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Tipografia breakpoint vs. tipografia fluida<\/h2>\n

Un buon modo per capire la tipografia fluida \u00e8 quello di confrontarla con il suo predecessore, la tipografia breakpoint, che utilizza media queries che mirano a specifiche larghezze di dispositivi per il dimensionamento dei caratteri.<\/p>\n

Tipografia breakpoint<\/h3>\n

In genere, i breakpoint sono intervalli specifici di larghezza del viewport, solitamente definiti in pixel. Un approccio comune \u00e8 quello di impostare tre breakpoint principali per gli schermi di cellulari, laptop e desktop.<\/p>\n

Ecco le impostazioni tipiche dei breakpoint per i laptop in un file CSS<\/a>:<\/p>\n

@media (min-width: 48em) and (max-width: 74.9375em) {\n  body {\n    font-size: 1.125rem;\n    line-height: 1.6;\n  }\n  h1 {\n    font-size: 2rem;\n  }\n}<\/code><\/pre>\n
Pur funzionando, questa soluzione presenta un grosso inconveniente: con la comparsa di nuovi dispositivi e dimensioni dello schermo, la gestione di tutti questi breakpoint diventa rapidamente insostenibile.<\/p>\n
\"Illustrazione
Illustrazione di come la tipografia si adatta in modo uniforme ai vari punti di interruzione.<\/figcaption><\/figure>\n
Nella GIF di esempio qui sopra, quando il viewport si riduce, il testo si ridimensiona con salti irregolari. Questo comportamento “a gradini” spesso porta a una scalatura scomoda o imprevedibile, che non \u00e8 l’ideale per una tipografia fluida e coerente.<\/p>\n
Tipografia fluida<\/h3>\n
Con l’introduzione della propriet\u00e0 CSS clamp()<\/a><\/code> nel 2019, insieme alle unit\u00e0 viewport (vw<\/code> e vh<\/code>), \u00e8 diventato possibile un ridimensionamento automatico e senza soluzione di continuit\u00e0.<\/p>\n
Queste permettono di definire le dimensioni dei font che scalano dinamicamente in base alle dimensioni della finestra di visualizzazione, eliminando la necessit\u00e0 di pi\u00f9 punti di interruzione.<\/p>\n
Ecco un esempio di dimensione media del carattere con clamp()<\/code>:<\/p>\n
.has-medium-font-size {\n  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);\n}<\/code><\/pre>\n
Vedremo pi\u00f9 avanti come funziona clamp()<\/code>, ma per ora consideralo come una formula che imposta le dimensioni minime, preferite e massime dei caratteri, assicurando che il testo venga scalato in modo uniforme su tutti gli schermi.<\/p>\n
\"Dimostrazione
Dimostrazione della tipografia fluida.<\/figcaption><\/figure>\n
In questa GIF, quando la finestra si restringe, il testo si adatta in modo fluido. Non ci sono salti o cambiamenti improvvisi di dimensioni.<\/p>\n
Questo comportamento fluido \u00e8 ci\u00f2 che rende la tipografia fluida un salto di qualit\u00e0 rispetto al design basato sui breakpoint. Invece di regolare il testo a scatti, permette di ottenere una scalatura fluida e naturale su tutti i dispositivi.<\/p>\n
Ma il ridimensionamento fluido \u00e8 solo l’inizio. La tipografia fluida offre molti altri vantaggi che rendono pi\u00f9 facile la realizzazione di progetti flessibili, coerenti e accessibili.<\/p>\n
I vantaggi della tipografia fluida<\/h2>\n
Lavorando con la tipografia fluida, i seguenti vantaggi diventeranno evidenti.<\/p>\n
Responsive per impostazione predefinita<\/h3>\n
Il testo si ridimensiona automaticamente con il viewport, eliminando la necessit\u00e0 di punti di interruzione. Se il tuo sito viene visualizzato su un telefono, un tablet o un monitor ultra-largo, le dimensioni dei caratteri si adattano in modo naturale senza bisogno di CSS aggiuntivi.<\/p>\n
Pi\u00f9 facile da mantenere<\/h3>\n
Senza la necessit\u00e0 di molteplici media queries, il codice rimane semplice e leggibile. Puoi definire le dimensioni dei caratteri utilizzando una semplice scala da “indumenti”, che va da S a XL, e applicarle in modo coerente in tutto il tema.<\/p>\n
Design coerente<\/h3>\n
Assicurati che le dimensioni dei caratteri rimangano coerenti in tutto il sito, sia a livello globale che all’interno dei singoli blocchi, se necessario. Definisci la tua scala una volta sola e questa fluir\u00e0 senza problemi in tutti i blocchi, pattern e template.<\/p>\n
Migliore accessibilit\u00e0 e leggibilit\u00e0<\/h3>\n
Poich\u00e9 la tipografia fluida si ridimensiona in modo uniforme, il testo appare sempre in una dimensione leggibile per ogni dispositivo. Questo rende i contenuti pi\u00f9 accessibili, soprattutto per gli utenti con preferenze visive o livelli di zoom personalizzati del browser.<\/p>\n
Design a prova di futuro<\/h3>\n
Poich\u00e9 le dimensioni del testo non sono pi\u00f9 legate a punti di interruzione artificiali, la scala tipografica \u00e8 garantita per qualsiasi dimensione di schermo e viewport futuri.<\/p>\n
Controllo della velocit\u00e0 di scalatura<\/h3>\n
La possibilit\u00e0 di controllare la velocit\u00e0 con cui il testo cresce o si riduce \u00e8 stabilita da un valore preferenziale che cambia in base alla larghezza del viewport.<\/p>\n
Supporto del browser<\/h2>\n
La funzione clamp()<\/code> \u00e8 ben supportata da tutti i browser<\/a> moderni, comprese le versioni attuali di Chrome, Edge, Firefox e Safari.<\/p>\n
Tuttavia, se hai bisogno di una copertura al 100%, dovrai includere un fallback per i browser precedenti, come Internet Explorer 11 e le versioni precedenti al 2020 di Safari e Chrome.<\/p>\n
Ecco come fare:<\/p>\n
\/* Fallback (for IE11 and other old browsers) *\/\nli {\n  font-size: 1.25rem; \n}\n\n\/* Preferred (modern browsers) *\/\nli {\n  font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);\n}<\/code><\/pre>\n