Far apparire bene il testo su ogni schermo non è così 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.
A partire da WordPress 6.1 (rilasciato nel novembre 2022), esiste un modo migliore: la tipografia fluida. Questo sistema regola automaticamente le dimensioni dei caratteri definite nel file theme.json in modo che si ridimensionino senza problemi, indipendentemente dalla larghezza o dall’altezza dello schermo.
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ù coerente, leggibile e accessibile su ogni dispositivo.
Questo articolo spiega come funziona la tipografia fluida, le sue differenze rispetto ai breakpoint tradizionali e come implementarla in WordPress utilizzando theme.json e CSS.
Ma prima di tutto, analizziamo il modo in cui eravamo soliti gestire la tipografia e perché la tipografia fluida rappresenta un grande miglioramento.
Tipografia breakpoint vs. tipografia fluida
Un buon modo per capire la tipografia fluida è 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.
Tipografia breakpoint
In genere, i breakpoint sono intervalli specifici di larghezza del viewport, solitamente definiti in pixel. Un approccio comune è quello di impostare tre breakpoint principali per gli schermi di cellulari, laptop e desktop.
Ecco le impostazioni tipiche dei breakpoint per i laptop in un file CSS:
@media (min-width: 48em) and (max-width: 74.9375em) {
body {
font-size: 1.125rem;
line-height: 1.6;
}
h1 {
font-size: 2rem;
}
}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.
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 è l’ideale per una tipografia fluida e coerente.
Tipografia fluida
Con l’introduzione della proprietà CSS clamp() nel 2019, insieme alle unità viewport (vw e vh), è diventato possibile un ridimensionamento automatico e senza soluzione di continuità.
Queste permettono di definire le dimensioni dei font che scalano dinamicamente in base alle dimensioni della finestra di visualizzazione, eliminando la necessità di più punti di interruzione.
Ecco un esempio di dimensione media del carattere con clamp():
.has-medium-font-size {
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
}Vedremo più avanti come funziona clamp(), 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.
In questa GIF, quando la finestra si restringe, il testo si adatta in modo fluido. Non ci sono salti o cambiamenti improvvisi di dimensioni.
Questo comportamento fluido è ciò che rende la tipografia fluida un salto di qualità 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.
Ma il ridimensionamento fluido è solo l’inizio. La tipografia fluida offre molti altri vantaggi che rendono più facile la realizzazione di progetti flessibili, coerenti e accessibili.
I vantaggi della tipografia fluida
Lavorando con la tipografia fluida, i seguenti vantaggi diventeranno evidenti.
Responsive per impostazione predefinita
Il testo si ridimensiona automaticamente con il viewport, eliminando la necessità 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.
Più facile da mantenere
Senza la necessità 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.
Design coerente
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à senza problemi in tutti i blocchi, pattern e template.
Migliore accessibilità e leggibilità
Poiché la tipografia fluida si ridimensiona in modo uniforme, il testo appare sempre in una dimensione leggibile per ogni dispositivo. Questo rende i contenuti più accessibili, soprattutto per gli utenti con preferenze visive o livelli di zoom personalizzati del browser.
Design a prova di futuro
Poiché le dimensioni del testo non sono più legate a punti di interruzione artificiali, la scala tipografica è garantita per qualsiasi dimensione di schermo e viewport futuri.
Controllo della velocità di scalatura
La possibilità di controllare la velocità con cui il testo cresce o si riduce è stabilita da un valore preferenziale che cambia in base alla larghezza del viewport.
Supporto del browser
La funzione clamp() è ben supportata da tutti i browser moderni, comprese le versioni attuali di Chrome, Edge, Firefox e Safari.
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.
Ecco come fare:
/* Fallback (for IE11 and other old browsers) */
li {
font-size: 1.25rem;
}
/* Preferred (modern browsers) */
li {
font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
}Come funziona la tipografia fluida
Il cuore della tipografia fluida è costituito da tre impostazioni: dimensione minima, dimensione massima e dimensione preferita, che è una scala scorrevole tra i valori minimi e massimi, determinata dalla larghezza del viewport.
La funzione clamp() utilizza questi tre valori in un’unica dichiarazione:
font-size: clamp(min, preferred, max);In questo modo il testo non diventa mai troppo piccolo sugli schermi piccoli o troppo grande su quelli larghi. Ad esempio:
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);In questo esempio, la dimensione del carattere inizia a 1rem, cresce in modo uniforme man mano che il viewport si espande e smette di aumentare a 1,25rem.
Come se la cava WordPress
WordPress fa il lavoro pesante al posto tuo. Invece di calcolare manualmente questi valori, puoi definire le dimensioni dei font direttamente in theme.json.
Ecco un esempio semplificato di come WordPress rappresenta le dimensioni dei caratteri in JSON:
{
"fluid": {
"min": "1rem",
"max": "1.25rem"
},
"name": "Medium",
"size": "1.125rem",
"slug": "medium"
}Da qui, WordPress genera automaticamente il CSS:
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);In questo modo l’implementazione di una tipografia fluida è veloce, coerente e priva di errori. Basta definire i valori una volta in theme.json e WordPress si occuperà dei calcoli.
Termini comuni
Prima di andare avanti, rivediamo alcune unità di misura chiave utilizzate nella tipografia fluida. Ognuna di esse ha una scala relativa ad un’altra.
| Unità | Definizione | Note |
| em | Relativo alla dimensione del carattere del suo elemento parent. | Le dimensioni sono composte attraverso la nidificazione. |
| rem | Relativo alla dimensione del carattere dell’elemento root (html). | Le dimensioni sono coerenti in tutto il sito. |
| vw | 1% della larghezza del viewport. | Utilizzato per il ridimensionamento basato sulla larghezza. |
| vh | 1% dell’altezza del viewport. | Utilizzato per il ridimensionamento in altezza. |
Qualche parola su theme.json
theme.json è guidato dai dati, quindi genera CSS automaticamente invece di richiedere una scrittura manuale.
Come ci si può aspettare, il core di WordPress include un file theme.json che imposta le proprietà di base utilizzate dal file theme.json di un tema a blocchi. Questo è il caso di come WordPress implementa la tipografia fluida.
Come per quasi tutte le proprietà di stile, queste possono essere modificate globalmente o per blocco utilizzando un tema child, che consigliamo per tutte le personalizzazioni.
Se non hai familiarità con il file theme.json, ti invitiamo a leggere il nostro articolo “Lavorare con le proprietà e le coppie chiave-valore in theme.json”
Come WordPress utilizza la tipografia fluida in TT5 (Twenty Twenty Five)
Quando il file theme.json di un tema a blocchi include l’impostazione "fluid": true, WordPress genera automaticamente delle regole di tipografia fluida utilizzando la funzione CSS clamp(). Questa funzione è gestita da un algoritmo integrato che calcola la scalatura fluida per ogni dimensione di carattere.
{
"settings": {
"typography": {
"fluid": true
}
}
}Se "fluid" viene omesso, WordPress utilizza per default la funzione false, il che significa che le dimensioni del testo rimangono fisse e non vengono scalate in modo fluido.
Con la tipografia fluida abilitata, TT5 definisce cinque dimensioni di carattere preimpostate. Ognuna di esse include valori minimi e massimi che WordPress utilizza per generare il CSS finale utilizzando la funzione clamp().
| Nome dimensione | Valori Theme.json | Valori clamp CSS generato |
| piccolo | dimensione:0.875rem | clamp(0.875rem, 0.8125rem + 0.2vw, 1rem) |
| medio | min:1rem massima: 1,125rem |
clamp(1rem, 0,9375rem + 0,25vw, 1,125rem) |
| grande | min:1,125rem max: 1,375rem |
clamp(1,25rem, 1,125rem + 0,5vw, 1,5rem) |
| x-grande | min:1,75rem max: 2rem |
clamp(2,25rem, 1,75rem + 1,5vw, 3rem) |
| xx-grande | min:2,15rem max: 3rem |
clamp(3rem, 2,25rem + 2vw, 4rem) |
Esempi pratici
Ora che sappiamo come TT5 gestisce il tipo di fluido per impostazione predefinita, vediamo alcuni scenari reali in cui potresti volerlo personalizzare o estendere.
Per questi esempi, utilizzeremo un tema child di TT5 e, come sempre, assicurati che i tuoi script siano correttamente inseriti.
Aumenta le dimensioni dei caratteri del 25%
Se il tuo pubblico preferisce un testo più grande (ad esempio, nei siti dedicati all’accessibilità o agli anziani), potresti voler aumentare tutte le dimensioni dei caratteri a livello globale.
Opzione 1 – Utilizzo del file theme.json
Sebbene non esista un’unica opzione per scalare tutti i font, puoi aumentare manualmente la dimensione di ogni font del 25%. Ecco un esempio di configurazione:
"typography": {
"fontSizes": [
{
"fluid": false,
"name": "Small",
"size": "1.09375rem",
"slug": "small"
},
{
"fluid": { "max": "1.40625rem", "min": "1.25rem" },
"name": "Medium",
"size": "1.25rem",
"slug": "medium"
},
{
"fluid": { "max": "1.71875rem", "min": "1.40625rem" },
"name": "Large",
"size": "1.725rem",
"slug": "large"
},
{
"fluid": { "max": "2.5rem", "min": "2.1875rem" },
"name": "Extra Large",
"size": "2.1875rem",
"slug": "x-large"
},
{
"fluid": { "max": "3.75rem", "min": "2.6875rem" },
"name": "Extra Extra Large",
"size": "2.6875rem",
"slug": "xx-large"
}
]
}Segue lo schema di TT5: la dimensione piccola rimane fissa, mentre le altre dimensioni scalano in modo uniforme.
Dietro le quinte, WordPress calcola comunque il valore preferito (fluido) tra ogni dimensione minima e massima.
Opzione 2 – Utilizzo di style.css
In alternativa, puoi scalare tutto a livello globale con una sola riga nel tuo foglio di stile:
:root {
font-size: 125%;
}Questo aumenta la dimensione del carattere principale del 25%, scalando di fatto tutti gli elementi che utilizzano le unità di rem.
Carattere fluido personalizzato per un singolo blocco
Puoi anche applicare il dimensionamento fluido in modo selettivo.
Ad esempio, per fare in modo che tutti gli elementi dell’elenco (core/list) utilizzino la dimensione media invece di quella grande predefinita, aggiungi quanto segue al tuo theme.json:
"styles": {
"blocks": {
"core/list": {
"typography": {
"fontSize": "var:preset|font-size|medium"
}
}
}
}Il risultato è una gerarchia più pulita, in cui le voci degli elenchi visualizzano un testo leggermente più piccolo rispetto ai paragrafi.
Impostazione della tipografia fluida in style.css
Se stai lavorando con un tema classico, potrai definire i valori di clamp() direttamente in style.css.
Ad esempio, ecco come puoi aumentare le voci dell’elenco del 125% della dimensione del carattere grande:
li {
font-size: clamp(1.725rem, 1.725rem + 0.17vw, 1.71875rem) !important;
}
In questo modo viene visualizzata una dimensione del carattere più grande per gli elementi dell’elenco impostati nel file CSS. Come è ovvio, se stai lavorando con un tema classico, dovrai utilizzare la proprietà clamp() nel tuo file styles.css.
Spaziatura fluida
Il carattere è solo uno dei fattori da considerare quando si utilizza la tipografia fluida.
Anche le dimensioni di padding, margini e spazi vuoti dei blocchi (lo spazio all’interno di un gruppo di blocchi) possono scalare in modo fluido utilizzando gli stessi concetti esposti per il carattere fluido.
TT5 utilizza queste impostazioni per stabilire le dimensioni dello spazio.
"spacing": {
"defaultSpacingSizes": false,
"spacingSizes": [
{ "name": "Tiny", "size": "10px", "slug": "20" },
{ "name": "X-Small", "size": "20px", "slug": "30" },
{ "name": "Small", "size": "30px", "slug": "40" },
{ "name": "Regular", "size": "clamp(30px, 5vw, 50px)", "slug": "50" },
{ "name": "Large", "size": "clamp(30px, 7vw, 70px)", "slug": "60" },
{ "name": "X-Large", "size": "clamp(50px, 7vw, 90px)", "slug": "70" },
{ "name": "XX-Large", "size": "clamp(70px, 10vw, 140px)", "slug": "80" }
]
}Le prime tre dimensioni (tiny, x-small, small) sono fisse, mentre quelle più grandi si scalano in modo fluido utilizzando clamp().
In questo modo non solo il testo ma anche la spaziatura del layout si adatta in modo elegante alle diverse dimensioni dello schermo.
Riepilogo
I breakpoint e la tipografia fluida hanno scopi diversi. Se utilizzate insieme, creano layout compatibili con il futuro che si adattano in modo fluido agli schermi, offrendo un’esperienza coerente e leggibile a tutti.
Se preferisci non fare i conti a mano, diversi strumenti gratuiti possono aiutarti a perfezionare e visualizzare i tuoi valori:
Questi strumenti consentono di generare in modo semplice i valori di clamp() in linea con la scala del tuo design, particolarmente utili per lo sviluppo di temi classici.
Vuoi vederlo in produzione? Ospita il tuo sito WordPress su Kinsta per avere un TTFB veloce, un CDN integrato e una cache edge, così i tuoi caratteri fluidi appariranno (e si caricheranno) alla grande ovunque. Inizia gratis per il primo mese.
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
