Tipografia nel responsive web design: formattazioni CSS

Nella prima parte della nostra serie sulla tipografia nel responsive web design vi abbiamo spiegato il motivo per cui i caratteri reattivi sono così importanti. Adesso possiamo spostare l’attenzione sugli aspetti più tecnici: dopo una panoramica sulle funzionalità base del responsive design nonché dei caratteri più adatti, vi forniamo alcune indicazioni su come implementare i font responsive tramite i comandi CSS.

Grazie al responsive web design la visualizzazione di una pagina web si adatta all’apparecchio utilizzato. Sul display di uno smartphone una pagina viene visualizzata diversamente rispetto al monitor di un computer. Soprattutto per quanto riguarda le dimensioni e la disposizione di particolari componenti di un sito vale la regola che colonne della pagina, elementi di navigazione, grafica e caratteri dovrebbero essere adattati sempre al formato e alla risoluzione dello schermo del dispositivo in uso nonché all’inquadratura utilizzata. Grazie a un responsive web design, in cui rientrano anche il riconoscimento dei dispositivi d’immissione (mouse e tastiera, touchscreen ecc.) e il relativo allineamento degli elementi di navigazione, tutto questo è possibile.

Un metodo comune è l’impiego di griglie flessibili (chiamate anche Grid) grazie alle quali avviene la ridistribuzione dei singoli elementi HTML di un sito. Le righe e le colonne di una griglia elastica vengono adattate a diverse risoluzioni e, se necessario, riallineate o posizionate. Anche quando cambiano le dimensioni della finestra del browser, i contenuti di un sito vengono ridistribuiti adattandosi alle rispettive inquadrature (Viewport). L’HTML5, il CSS3 (soprattutto attraverso l’utilizzo di Media Queries) e JavaScript costituiscono il fondamento tecnico del responsive web design ed è sulla base di questi linguaggi che è possibile rendere il testo di una pagina reattivo.

Con l’introduzione di Media Queries nel CSS3 avete una nuova utile opzione per realizzare caratteri che si adattano ai diversi tipi di visualizzazione. Le media queries riconoscono caratteristiche particolari di un apparecchio come la risoluzione dello schermo, la larghezza e l’altezza della finestra del browser o se il display viene disposto orizzontalmente o verticalmente. Queste informazioni vengono utilizzate per adeguare la visualizzazione dei contenuti ai dispositivi mobili degli utenti.

Una tipografia responsive ottimale nei CSS non è ottenibile grazie all’inserimento di valori di pixel, in quanto i pixel sono dotati di dimensioni statiche. Soltanto l’utilizzo di unità di misura flessibili produce un carattere il più possibile reattivo. Per questo dovreste definire la grandezza di un font tramite unità relative come em, rem o dati percentuali. 

L’inserimento e l’allineamento di una tipografia responsiva tramite le media queries avviene grazie a questi comandi CSS:

• Con @font-face applicate prima di tutto un font sulla vostra pagina

• Per adattare il font all’apparecchio utilizzato, è necessaria una media query eseguita tramite @media. Per la visualizzazione in base al dispositivo sono inoltre importanti le dimensioni del browser e della viewport. Se combinate il tag @media con screen e aggiungete min-width (larghezza minima) o max-width (larghezza massima), potete fissare il formato del carattere a determinate larghezze dello schermo, per esempio @media screen and (min-width: 800px). In questo modo definite la dimensione del carattere in base alla grandezza della finestra del browser. 

• Il comando font-size definisce la dimensione di visualizzazione del carattere: in pixel o relative unità di misura come em (misura della larghezza dipendente dal corpo del carattere). L’unità em si adatta alla dimensione precedentemente definita dell’elemento visualizzato con un valore em. Nel caso in cui la grandezza del carattere venga definita soltanto con il valore em, questo si adatta al corpo del carattere dell’elemento genitore.

I seguenti paragrafi vi mostrano come utilizzare questi comandi CSS.

In questo esempio l’interlinea del corpo del testo è il 130% (1.3em) della dimensione del carattere e il 120% (1.2em) nei titoli.

Inserire un font reattivo utilizzando unità CSS viewport

Un’altra opzione per realizzare una tipografia responsive è l’utilizzo di unità CSS viewport. Il metatag viewport si utilizza per adattare le dimensioni del browser. Anche con i CSS viewport potete fare in modo che i contenuti di una pagina si adattino all’attuale larghezza della finestra e che vengano scalati in base alle relative dimensioni. Il vantaggio rispetto all’uso delle media queries è il fatto che il processo di adeguamento ad una nuova schermata avviene velocemente in base ai movimenti della mano.

Con le unità CSS viewport vw (“viewport width”) e vh (“viewport height”) definite la larghezza e l’altezza in base alle dimensioni del browser. Con i tag vmax („viewport maximum“) e vmin („viewport minimum“) ci sono due unità a disposizione che definiscono le dimensioni in relazione all’altezza o alla larghezza della finestra. Quale misura viene utilizzata come base di adattamento dipende dalla relativa unità utilizzata: con vmin si definisce il valore più basso e con vmax quello più alto, entrambi determinanti per viewport. Tutte e quattro le unità viewport sono caratterizzate da dati percentuali (per esempio 10vw = 10% della larghezza del browser). Ad una viewport di 640 x 480 pixel corrisponderebbe un tag vmax di 640 pixel (il più alto dei due valori), mentre a una finestra del browser di queste dimensioni corrisponde il valore 10vmax = 64px (640 : 10).

Similmente alle misure rem anche le unità viewport non sono supportate da tutte le versioni del browser, in questo caso sono anche di più. Qui potete trovare una panoramica delle unità di misura della viewport.

Ormai l’utilizzo di comandi CSS crea un design responsive dei vostri font. Dopo la loro messa in atto dovreste tuttavia ancora verificare il risultato su più dispositivi possibili (o provare diversi emulatori) ed, eventualmente, effettuare dei miglioramenti prima di pubblicare la pagina.

Utilizzare media queries o unità CSS viewport, è una scelta che dipende sia dai vostri gusti sia dalla situazione. Rispetto alle unità viewport le media queries sono più lente nella riproduzione in scala del carattere, vengono però supportate da browser più vecchi. Inoltre ci sono altre possibilità per generare tipografie web reattive, cioè tramite element queries o l’uso di un jQuery plug-in. Tutti questi metodi soddisfano i requisiti di una tipografia web responsive: nel responsive web design il font deve adattarsi sempre alla dimensione dello schermo, anche se dipende dal relativo adattamento della dimensione del carattere e dell’interlinea nonché dall’utilizzo di font vettoriali. Nella seconda parte di questa serie ci siamo dedicati alla tipografia nel responsive web design, indicandovi alcuni siti dove ottenere font responsive gratuiti e spiegandovi come inserirli nel vostro sito.