La stragrande maggioranza degli articoli che trattano di Responsive Web Design, sono focalizzati su due aree principali: layout e griglie fluide, immagini e video adattabili al loro contenitore. Un argomento poco trattato è quello della tipografia responsive. Per la maggior parte dei siti, se non tutti, il testo, inteso come il "contenuto", rappresenta l'elemento più importante.

La buona notizia è che la tipografia responsive non è particolarmente difficile da apprendere. Serve solo un po' di tempo per pensare a come il testo dovrebbe rispondere al variare delle dimensioni del tipo di media, e quindi implementare tali modifiche.

Princìpi della tipografia responsive

Ci sono due princìpi fondamentali per creare una effettiva tipografia responsive:

• Il primo è l'implementazione di un font ridimensionabile. Ciò significa che non deve solo adattarsi in base alle dimensioni dello schermo, ma che sia ridimensionabile da parte dell'utente.
• Il secondo è l'ottimizzazione della lunghezza delle righe di testo, per garantire un'ottima leggibilità. In alcuni devices, come gli smartphones, avendo l'area dei contenuti più ridotta, il testo automaticamente si adatterà al display ottenendo come risultato un "naturale" allungamento della pagina.

Utilizzo della tipografia ridimensionabile con "rem"

La maggior parte dei webmaster utilizza i pixel o gli "em" per le dimensioni del testo. Usare gli "em" è la scelta migliore, in quanto permettono agli utenti di ridimensionare il font nel browser. Però gli "em" sono "relativi", cioè dipendono, dall'elemento contenitore e questo vuol dire che è un po' più complicato rispetto all'uso dei pixel, perchè si dovrebbero fare dei calcoli per avere dimensione di font omogenee, quando nello stesso sito sono presenti diversi elementi di cui tenere traccia.

I "rem" offrono una valida alternativa agli "em". Essi si comportano alla stessa maniera degli "em", ad eccezione di una differenza fondamentale: i "rem" sono relativi all'elemento html piuttosto che ad ogni loro elemento contenitore. Questa differenza sostanziale agevola non di poco il corretto ridimensionamento del font.

I "rem" sono supportati nella maggior parte dei browser moderni, incluso Opera, sin dalla versione 11, oltre ad Internet Explorer 9.

Dal momento che verranno utilizzati i "rem" quale unità di misura per i font, è importante applicare una dichiarazione CSS all'elemento html, e non al body del documento. La regola dovrebbe essere la seguente:

html { font-size:100%; }

In questo modo le unità di misura "rem" verranno applicate alla dimensione di default del dispositivo. Dopodiché è necessario specificare la dimensione del font per ciascuna dimensione del device.

Sarebbe opportuno provare diverse dimensioni di font su dispositivi reali, al fine di ottenere una perfetta leggibilità, oltre al fatto che il tutto dipende anche dal tipo di font scelto.

In questo caso possiamo introdurre le media queries per scrivere diverse dichiarazioni CSS, come le seguenti:

@media (max-width: 640px) { 
body {font-size:1.3rem;} 
} 
@media (min-width: 641px) { 
body {font-size:1.2rem;}
} 
@media (min-width:960px) { 
body {font-size:1.4rem;} 
} 
@media (min-width:1100px) { 
body {font-size:1.6rem;}
} 

Ovviamente è un codice semplificato per l'articolo in oggetto, ma potrebbe essere preso come spunto in un progetto di lavoro reale. Come si può notare, per gli schermi più piccoli è stata assegnata una dimensione di carattere leggermente più grande. Questo perchè caratteri più grandi sono facilmente leggibili su media più piccoli.

Inserire un font reattivo con i CSS Media Queries

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.

Adattamento Testo con l’unità em

Come nei titoli definite per un paragrafo (p) la dimensione del carattere su 100%. Anche qui il corpo del carattere viene definito con l’unità em. Di seguito un esempio dell'attuazione delle diverse dimensioni dei caratteri che si orientano alle quattro larghezze della finestra, precedentemente indicate:

body {font-size: 100%}
p {font-size: 1.5em;}

@media screen and (max-width: 64em) {
 body {
      font-size: 90%;
   }
}
@media screen and (max-width: 50em) {
 body {
       font-size: 75%;
   }
}
@media screen and (max-width: 30em) {
   body {
        font-size: 50%;
  }
}

Poiché il valore body corrisponde al 100% della visualizzazione della maggior parte dei browser da 16 pixel, la dimensione base del carattere del testo (font-size: 1.5em) nel nostro esempio è pari a 24 pixel (1,5 x 16 = 24); sulla base delle indicazioni font-size (90%, 75%, 50%) relative al body, la dimensione del carattere si adatta alla larghezza della finestra. Grazie a queste piccole misure il vostro font diventa reattivo.

Quando impostate in modo responsive il vostro sito, dovete adeguarlo non solo alla grandezza del carattere, ma anche sempre all’interlinea. Secondo una regola tipografica dovreste aumentare l’interlinea in base allo spazio tra le righe del testo. Un’altra regola dice che l’interlinea nel corpo del testo dovrebbe essere circa tra il 120 e il 140% della dimensione del carattere (1.2em fino a 1.4em): il valore dipende però sempre dal tipo di carattere utilizzato.

Con l’uso di unità em potete adeguare l’interlinea alla dimensione del carattere attraverso il tag line-height (altezza del carattere).

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

body {font-size: 100%}

p {
   font-size: 1.5em;
   line-hight: 1.3 em;
}
h1, h2, h3 {line-height: 1.2em;}

Adattamento Testo con l’unità rem

Anche l’utilizzo della relativa unità di misura rem (“root em”), anziché della em, è adatta a un corpo del testo reattivo, in quanto l’unità rem si orienta all’elemento radice HTML (e non al rispettivo elemento contenitore relativo come l’unità em).

Questo ha come conseguenza il fatto che le dimensioni del carattere si uniformano relazionandosi a tutti i contenuti dell’elemento radice, cosa che rappresenta un vantaggio, rispetto all’uso degli em, soprattutto con concatenazioni complesse di elementi.

html {font-size: 100%;}
p {font-size: 1.5rem;}
h1 {font-size: 3rem;}
h2 {font-size: 2.5 rem;}
h3 {font-size: 2rem;}

Tuttavia l’unità rem non viene supportata da tutte le versioni precedenti di browser. Con browser come Firefox, Chrome, Safari, Edge o Opera non è più un problema, in quanto le loro versioni più vecchie, da molto tempo superate, non vengono più utilizzate da nessuno.

Ma soprattutto il supporto mancante nelle versioni precedenti di Internet Explorer di Microsoft può dare problemi.

Soltanto a partire dalla versione 9 di Internet Explorer c’è un supporto di unità rem.

Se volete presentare un design accattivante anche agli utenti di versioni più vecchie, dovreste installare un’opzione fallback utilizzando i pixel. Questa soluzione alternativa per il browser senza rem si presenta in questo modo:

html {font-size: 100%}

p{
  font-size: 24px;
  font-size: 1.5rem;
}
h1 {
    font-size: 48px;
    font-size: 3rem;
}
h2 {
    font-size: 40px;
    font-size: 2.5rem;
}
h3 {
    font-size: 32px;
    font-size: 2rem;
}

La corretta lunghezza delle righe di testo

Se da una parte il concetto di ridimensionamento del font potrebbe essere abbastanza semplice, un altro elemento da non trascurare è la corretta lunghezza delle righe di testo. Leggendo in giro i diversi siti che affrontano l'argomento, pare che le linee guida vertano tra i 50 ed i 75 caratteri per rigo.

Si consiglierebbe, inoltre, di utilizzare un elemento contenitore a larghezza fissa per testi, immagini ecc, ma questo principio va contro il concetto del responsive design, quindi le cose vanno affrontate in maniera diversa se si vuole mantenere, allo stesso tempo, adattabilità e lunghezza delle righe di testo ottimizzate.

In primo luogo testare la pagina su diversi tipi di media per capire quale dimensione di font scegliere per avere circa 50 caratteri per rigo. Per schermi molto piccoli, potrebbe essere necessario scendere al di sotto dei 50 caratteri, al fine di mantenere una buona leggibilità, ma il numero 50 dovrebbe essere l'obiettivo corretto.

Allo stesso modo, sarebbe giusto impostare anche la larghezza massima (attraverso i break points) per dimensioni di schermo più grandi al fine di ottenere 75 caratteri, circa, per rigo.

Conclusioni

Se in tema di Responsive Web Design ci si concentra maggiormente sui layout, sulle immagini o sui video, la tipografia non è argomento da sottovalutare o trascurare. Di certo c'è che non è particolarmente difficile, come si è potuto evincere dall'articolo, da ottimizzare per siti responsive.