Tipografia nel responsive web design: formattazioni CSS
La redazione di IONOS
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.
- Certificato SSL Wildcard incluso
- Registrazione di dominio sicura
- Indirizzo e-mail professionale da 2 GB
Nozioni base di responsive web design
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.
Quale carattere è adatto al responsive web design?
Affinché il testo della vostra pagina venga visualizzato sullo schermo in modo ottimale, utilizzate un carattere responsive sulla base di vettori. Potete ricorrere a font già pronti: Google Font e Font Squirrel offrono per esempio un’ampia scelta e sono inoltre gratuiti. Quando scegliete il carattere è importante che sia leggibile e che corrisponda all’effetto che intendete dare. Nei titoli è permesso utilizzare un tipo di carattere più decorativo, nel testo principale dovrebbe però essere evitato, in quanto a lungo andare appesantisce la lettura. Il colore del carattere dovrebbe essere in contrasto con lo sfondo del vostro sito. Non dovrebbe essere troppo spento, altrimenti la leggibilità ne risente. Nel caso in cui abbiate dubbi sulla scelta del contrasto, con l’aiuto di strumenti del browser come Colour Contrast Check o Contrast-A potete visualizzare l’interazione di un font con un colore di sfondo e sperimentare con tonalità diverse.
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.
I seguenti paragrafi vi mostrano come utilizzare questi comandi CSS.
Creare titoli responsive con media queries
Nei CSS i titoli vengono indicati con le abbreviazioni h1, h2, h3 ecc. A un titolo potete assegnare diverse dimensioni relative di visualizzazione per mezzo di unità em. L’esempio seguente mostra, come visualizzare il primo titolo (h1) nelle diverse grandezze relative partendo da una dimensione del carattere in scala percentuale (font-size: 100%).
body {font-size: 100%}
h1 {font-size: 3em;}
@media screen and (max-width: 64em) {
h1 {
font-size: 2.5em;
}
}
@media screen and (max-width: 50em) {
h1 {
font-size: 2em;
}
}
@media screen and (max-width: 30em){
h1 {
font-sitze: 1.5em;
}
}Con questo esempio vengono prefissate con il tag h1 quattro diversi tipi di visualizzazione: i rispettivi font-size del tag h1 (3em; 2,5 em; 2em; 1,5). La larghezza della finestra del browser utilizzato stabilisce quando viene usato uno di questi quattro caratteri, definiti considerando la dimensione massima dello schermo (max width). La larghezza viene configurata per esempio in base all’unità di misura em. Poiché precedentemente non sono state definite alcune dimensioni del testo, il valore em si adatta alle impostazioni standard del browser utilizzato, di regola 16 pixel. Pertanto in questo caso 1em = 16px. In questo modo è possibile quindi calcolare le diverse larghezze, alle quali si vogliono adattare i caratteri: il numero di pixel della larghezza della finestra si divide semplicemente per 16. Nel nostro esempio le dimensioni della visualizzazione si adattano al tag h1 secondo quattro diverse larghezze dello schermo:
- oltre 1024 pixel
- fino a 1024 pixel (1024 : 16 = 64em)
- fino a 800 pixel (800 : 16 = 50em)
- fino a 480 pixel (480 : 16 = 30em)
È possibile inserire tante altre indicazioni per l’organizzazione dei caratteri (o cosiddetti breakpoint). In questo modo è possibile adattare i titoli in una maniera ancora più precisa.
Con un titolo più lungo è possibile che questi presentino un’interruzione di riga su schermi più piccoli. Inoltre dovreste allineare in proporzione anche l’interlinea del titolo. Nel prossimo paragrafo vi mostriamo come realizzare queste misure.
Testo principale responsive 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;}Corpo del testo più reattivo 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 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 Explorer di Microsoft può dare problemi. Soltanto a partire dalla versione 9 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;
}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.
Creare titoli e corpo del testo responsive con unità CSS viewport
Con l’aiuto di unità viewport potete regolare sia i titoli sia il corpo del testo. L’implementazione delle misure viewport avviene in modo simile all’utilizzo delle unità rem con le media queries: entrambe le unità sono relative. Il seguente frammento di codice imposterebbe il design del corpo del testo (p) e i titoli (h1, h2, h3) con unità viewport reattive:
p {font-size: 2vmin;}
h1 {font-size: 5vw;}
h2 {font-size: 4vh;}
h3 {font-size: 3vmin;}Attraverso questi comandi CSS stabilite che i caratteri del corpo del testo (p) occupano continuamente il 2 per cento della larghezza o dell’altezza della finestra del browser (font-size: 2vmin) in base a quale è il valore minore. In questo modo è garantito che il font, anche con schermate più piccole, conservi sempre la stessa scala.
Inoltre la dimensione del primo titolo (h1) è sempre il 5 per cento della larghezza del browser (font-size: 5vw), mentre invece la seconda (h2) sempre il 4 per cento dell’altezza della finestra (font-size: 4vh). Il terzo e ultimo titolo (h3), per mezzo del valore 3vmin è sempre un punto percentuale superiore al testo principale, in quanto questo occupa il valore 2vmin. Grazie a queste quattro indicazioni CSS la scrittura del corpo del testo e le tre diverse grandezze dei titoli sono sempre nello stesso rapporto, non ha importanza quanto grande sia la finestra del browser.
- Editor facile e intuitivo con supporto IA
- Immagini e testi d'effetto in pochi secondi
- Dominio, indirizzo e-mail e certificato SSL inclusi
Riepilogo: nel responsive web design non si può trascurare la tipografia
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.
