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 mediaqueries 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.
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 guardare 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.
Dedicare tempo alla tipografia, in fase di progettazione di un sito, è molto importante, alla pari di tutti gli altri elementi. Mantenere la leggibilità dei contenuti è una componente vitale per la fidelizzazione dell'utente e per i nuovi visitatori.