Tipografia fluida: capire cos'è, perché e come usarla
Pubblicato: 2022-10-26La tipografia reattiva è diventata sempre più importante con l'aumento della variabilità delle dimensioni dello schermo. Ma le tradizionali tecniche di progettazione reattiva hanno i loro limiti, portando più persone a implementare una tipografia fluida sui loro siti web.
In questo post, esaminiamo la tipografia fluida, come funziona e come viene implementata in WordPress.
Cos'è la tipografia fluida?
La tipografia fluida è una tecnica tipografica reattiva in cui il testo viene ridimensionato automaticamente in base alle dimensioni dello schermo. All'aumentare delle dimensioni dello schermo, i valori tipografici come la dimensione del carattere, l'altezza della riga e la spaziatura delle lettere aumentano. Allo stesso modo, i valori diminuiscono quando le dimensioni dello schermo si riducono.
Tipografia fluida vs. tipografia reattiva tradizionale
Tradizionalmente i designer utilizzano i punti di interruzione per determinare la dimensione del carattere. Ad esempio, un sito Web potrebbe utilizzare tre punti di interruzione: mobile, tablet e desktop. I punti di interruzione non sono determinati dal tipo di dispositivo ma dalla larghezza del browser.
Il problema con questo approccio è che le dimensioni dello schermo variano ampiamente tra i dispositivi. Quindi le dimensioni dello schermo intermedie o vicine ai punti di interruzione possono spesso presentare sfide nella progettazione. Ad esempio, lo schermo di un tablet ampio che è quasi la larghezza del desktop potrebbe finire con una tipografia che sembra troppo piccola.
Per affrontare queste sfide, i progettisti potrebbero implementare più punti di interruzione, ma ciò porta solo a codice più complesso che è difficile da mantenere.
Come funziona la tipografia fluida
La tipografia fluida inizia con un valore minimo e lo aumenta man mano che la larghezza dello schermo aumenta, fino a raggiungere un valore massimo impostato. Pensa ai valori come i limiti di velocità in autostrada. Devi mantenere una velocità minima di 45 mph. Il limite superiore è 65 mph e scegli la tua velocità in base al flusso del traffico.
Funzione di pinzatura CSS
La tipografia fluida utilizza la funzione di pinzatura CSS per ottenere il ridimensionamento automatico. La funzione di pinzatura necessita di tre valori: un minimo, un preferito e un massimo. Il valore preferito è un numero calcolato. La funzione decide quale deve essere il valore preferito rispetto alla dimensione dello schermo mantenendolo tra il minimo e il massimo.
Un'istruzione clamp è simile a questa:
morsetto ( minimo , preferito , massimo );
Diamo un'occhiata a come funziona con la dimensione del carattere:
morsetto (1,5 rem, 2vw + 1 rem, 2,25 rem);
Si noti che stiamo usando i valori rem per i valori minimo e massimo. I valori Rem sono più accessibili. Se qualcuno ingrandisce il browser per aumentare la dimensione del testo, la tipografia fluida dovrebbe adattarsi di conseguenza e meglio che se avessi specificato i valori in pixel.
Il valore preferito è un calcolo. Il "vw" sta per viewport, quindi 2vw è il 2% della larghezza del viewport.
Con una dimensione del carattere principale di 16px e una larghezza del viewport di 800px, la nostra dimensione del testo preferita è di 32 pixel o 2 rem.
800px x .02 = 16 pixel (o 1 rem)
1 rem + 1 rem = 2 rem (o 32 pixel)
Non preoccuparti. Non devi fare i conti. La funzione CSS se ne occupa per te.
Inoltre, non devi sviluppare le tue abilità di algebra quando scrivi i tuoi fogli di stile. Prendi in considerazione l'utilizzo di uno strumento come l' editor di tipografia fluida moderna per creare la dichiarazione del morsetto per te.
Il grafico nello strumento è un ottimo elemento visivo per vedere come cambia il valore preferito tra i valori minimo e massimo.
Considerazioni sull'utilizzo della tipografia fluida
La tipografia fluida non è priva di difetti. Alcuni designer affermano che è più problematico di quanto valga la pena impostare poiché puoi ottenere risultati simili con metodi più tradizionali. Tieni a mente queste considerazioni quando decidi se e come usarlo.
Quando usare la tipografia fluida
La tipografia fluida è eccellente per i titoli e il testo visualizzato. I giganteschi trattamenti del testo che sono tanto un elemento di design quanto una copia, sono il caso d'uso perfetto per la tipografia fluida. Vuoi che le dimensioni e l'impatto visivo del testo corrispondano alle dimensioni dello schermo.
Quando non usare la tipografia fluida
D'altra parte, la tipografia fluida non funziona altrettanto bene se la differenza tra i valori minimo e massimo non è così grande. Gli elementi di testo come il testo del corpo, i tag, i nomi degli autori e le date dei post sono probabilmente piuttosto standard su tutte le dimensioni dello schermo. Puoi gestirli con i CSS tradizionali invece di implementare la funzione clamp.
Impostare sempre un valore di fallback
Ricorda, ogni volta che usi la tipografia fluida, includi sempre un valore di fallback nel caso in cui il browser non supporti la funzione clamp. Tutti i browser moderni supportano la funzione di blocco, ma un valore di fallback offre una sicurezza aggiuntiva nel caso in cui ci sia ancora una resistenza ostinata a Internet Explorer.
Tipografia fluida in WordPress
Il supporto per la tipografia fluida è stato aggiunto in Gutenberg 13.8 e sarà incluso in WordPress 6.1 . La funzione di tipografia fluida consente agli autori di temi di definire dimensioni dei caratteri scalabili nel loro file theme.json.
Poiché la funzionalità è ancora in fase di sviluppo, dovrai scaricare il plug-in Gutenberg per accedere alla versione beta. Puoi leggere di più su come testare e implementare le nuove opzioni di tipografia fluida in questo post del team Make WordPress Themes .
L'implementazione della tipografia fluida su WordPress è più semplice a livello di tema. Se crei il tuo tema, scarica il plug-in Gutenberg e inizia a testare. Se creare il tuo tema o scrivere un foglio di stile tipografico fluido è un po' al di là delle tue capacità tecniche, non preoccuparti. Proprio come più temi stanno abbracciando i blocchi e la modifica completa del sito, puoi aspettarti che una tipografia fluida faccia parte delle nuove versioni dei temi.
Crea e testa nuovi siti e stili tipografici in WordPress
I web designer e gli sviluppatori hanno bisogno di uno spazio per testare nuove idee e design, come la tipografia fluida. A Pressable, capiamo. Ecco perché offriamo a tutti i nostri clienti siti di staging illimitati. Creane quanti ne hai bisogno in modo da poter testare la creazione di un nuovo tema o provare le ultime funzionalità beta di WordPress. Iniziare è semplice. Scegli il tuo piano e avrai un sito in un paio di clic.
