Ti­po­gra­fia nel web design re­spon­si­ve con CSS

I caratteri re­spon­si­ve ga­ran­ti­sco­no che i testi rimangano ben leggibili su qualsiasi di­spo­si­ti­vo. Invece di usare valori fissi di pixel, la ti­po­gra­fia si adatta di­na­mi­ca­men­te alla larghezza dello schermo. L’im­ple­men­ta­zio­ne tecnica con CSS avviene fa­cil­men­te con unità fles­si­bi­li o funzioni moderne.

Quale carattere è adatto a un web design re­spon­si­ve?

Per vi­sua­liz­za­re il testo della tua pagina sullo schermo in modo ottimale, devi occuparti della ti­po­gra­fia nel web design re­spon­si­ve: utilizzi, pertanto, un carattere basato su vettori. Puoi ricorrere, ad esempio, a font web già pronti. Quando scegli il carattere è im­por­tan­te che sia leggibile e che cor­ri­spon­da all’effetto che intendi dare. Nei titoli è permesso uti­liz­za­re un tipo di carattere più de­co­ra­ti­vo, nel testo prin­ci­pa­le dovrebbe però essere evitato, in quanto a lungo andare ap­pe­san­ti­sce la lettura.

Il colore del carattere dovrebbe essere in contrasto con lo sfondo del tuo sito. Non dovrebbe essere troppo spento, al­tri­men­ti la leg­gi­bi­li­tà ne risente. Nel caso in cui tu abbia dubbi sulla scelta del contrasto, con l’aiuto di strumenti del browser come Colour Contrast Check o Contrast Checker di WebAIM puoi vi­sua­liz­za­re l’in­te­ra­zio­ne di un font con un colore di sfondo e spe­ri­men­ta­re con tonalità diverse.

Inserire font reattivi tramite media query

Dall’in­tro­du­zio­ne delle media query CSS nel CSS3 hai a di­spo­si­zio­ne un’opzione utile per rea­liz­za­re caratteri che si adattano ai diversi tipi di vi­sua­liz­za­zio­ne. Le media query rilevano de­ter­mi­na­te ca­rat­te­ri­sti­che di un di­spo­si­ti­vo, che vengono uti­liz­za­te per adattare la vi­sua­liz­za­zio­ne dei testi del tuo sito web ai di­spo­si­ti­vi finali degli utenti. Tra queste ca­rat­te­ri­sti­che rientrano:

• Ri­so­lu­zio­ne dello schermo
• Larghezza e altezza della finestra del browser

Una ti­po­gra­fia re­spon­si­ve ottimale nei CSS non è ot­te­ni­bi­le grazie all’in­se­ri­men­to di valori di pixel, in quanto i pixel sono dotati di di­men­sio­ni statiche. Soltanto l’utilizzo di unità di misura fles­si­bi­li produce un carattere il più possibile reattivo. Per questo dovresti definire le di­men­sio­ni di un font tramite unità relative come em, rem o dati per­cen­tua­li.

L’in­se­ri­men­to e l’al­li­nea­men­to di una ti­po­gra­fia re­spon­si­ve tramite le media query avviene grazie a questi comandi CSS:

• Con @font-face applichi prima di tutto un font sulla tua pagina.
• Tramite le query @media puoi creare un font re­spon­si­ve che si adatta a diverse larghezze dello schermo, ad esempio @media screen and (min-width: 800px).
• Il comando font-size definisce la di­men­sio­ne di vi­sua­liz­za­zio­ne del carattere: in pixel o unità di misura relative come em.

Creare titoli re­spon­si­ve con media query

Nei CSS i titoli vengono indicati con le ab­bre­via­zio­ni h1, h2, h3, ecc. A un titolo puoi assegnare diverse di­men­sio­ni relative di vi­sua­liz­za­zio­ne per mezzo di unità em. L’esempio seguente mostra, come vi­sua­liz­za­re il primo titolo (h1) nelle diverse di­men­sio­ni relative partendo da una di­men­sio­ne del carattere in scala per­cen­tua­le (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-size: 1.5em;
}
}

Con questo esempio vengono pre­fis­sa­te con il tag h1 quattro diversi tipi di vi­sua­liz­za­zio­ne. La larghezza della finestra del browser uti­liz­za­to sta­bi­li­sce quando viene usato uno di questi quattro caratteri, definiti con­si­de­ran­do la di­men­sio­ne massima dello schermo (max width).

La larghezza viene con­fi­gu­ra­ta per esempio in base all’unità di misura em. Poiché pre­ce­den­te­men­te non sono state definite alcune di­men­sio­ni del testo, il valore si adatta alle im­po­sta­zio­ni standard del browser uti­liz­za­to, di regola 16 pixel. Poiché 1em cor­ri­spon­de esat­ta­men­te a 16px, puoi calcolare fa­cil­men­te le larghezze de­si­de­ra­te dividendo il numero di pixel per 16. Nell’esempio, la di­men­sio­ne del font di h1 reagisce a quattro larghezze della finestra:

• oltre 1024 pixel;
• fino a 1024 pixel (64em);
• fino a 800 pixel (50em) e
• fino a 480 pixel (30em).

Con un titolo più lungo è possibile che questi pre­sen­ti­no un’in­ter­ru­zio­ne di riga su schermi più piccoli. Inoltre, dovresti allineare in pro­por­zio­ne anche l’in­ter­li­nea del titolo. Nel prossimo paragrafo ti mostriamo come rea­liz­za­re queste misure.

Testo prin­ci­pa­le re­spon­si­ve con l’unità em

Come nei titoli definisci per un paragrafo (p) la di­men­sio­ne del carattere su 100%. Anche qui il corpo del carattere viene definito con l’unità em. Di seguito un esempio di CSS dell’at­tua­zio­ne delle diverse di­men­sio­ni dei caratteri che si orientano alle quattro larghezze della finestra, pre­ce­den­te­men­te 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 cor­ri­spon­de al 100% della vi­sua­liz­za­zio­ne della maggior parte dei browser da 16 pixel, la di­men­sio­ne base del carattere del testo (font-size: 1.5em) nel nostro esempio è pari a 24 pixel (1,5 x 16 = 24). Imposti una ti­po­gra­fia re­spon­si­ve sulla base delle in­di­ca­zio­ni font-size; per quanto riguarda il body, la di­men­sio­ne del carattere si adatta alla larghezza della finestra.

Quando imposti in modo re­spon­si­ve il tuo sito, devi adeguarlo non solo alla grandezza del carattere, ma anche sempre all’in­ter­li­nea. Secondo una regola ti­po­gra­fi­ca dovresti aumentare l’in­ter­li­nea in base allo spazio tra le righe del testo. Un’altra regola dice che l’in­ter­li­nea nel corpo del testo dovrebbe essere circa tra il 120 e il 140% della di­men­sio­ne del carattere (1.2em fino a 1.4em): il valore dipende però sempre dal tipo di carattere uti­liz­za­to.

Puoi rea­liz­zar­lo con il tag line-height (altezza del carattere).

body {font-size: 100%}
p {
font-size: 1.5em;
line-height: 1.3em;
}
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é em, è adatta a un corpo del testo reattivo, in quanto l’unità rem si orienta all’elemento radice html (e non al ri­spet­ti­vo elemento come l’unità em). Questo ha come con­se­guen­za il fatto che le di­men­sio­ni del carattere si uni­for­ma­no re­la­zio­nan­do­si a tutti i contenuti dell’elemento radice, cosa che rap­pre­sen­ta un vantaggio, so­prat­tut­to con con­ca­te­na­zio­ni complesse di elementi. Le istru­zio­ni CSS per una ti­po­gra­fia web re­spon­si­ve con l’uso di rem si pre­sen­ta­no, ad esempio, così:

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

Tuttavia, l’unità rem non viene sup­por­ta­ta da tutte le versioni pre­ce­den­ti del browser. Se desideri pre­sen­ta­re un design ac­cat­ti­van­te anche agli utenti di versioni più vecchie, dovresti in­stal­la­re un’opzione di fallback uti­liz­zan­do i pixel. Di seguito un esempio del relativo codice:

html {font-size: 100%}
p{
font-size: 24px;
font-size: 1.5rem;
}

Inserire un font reattivo tramite viewport

Un’altra opzione per rea­liz­za­re una ti­po­gra­fia re­spon­si­ve è l’utilizzo di unità viewport CSS. Il metatag viewport si utilizza per adattare le di­men­sio­ni del browser. Anche con i viewport in CSS puoi fare in modo che i contenuti di una pagina si adattino all’attuale larghezza della finestra e che vengano scalati in base alle relative di­men­sio­ni. Il vantaggio rispetto all’uso delle media query è il fatto che il processo di ade­gua­men­to a una nuova schermata avviene ve­lo­ce­men­te in base ai movimenti della mano.

Sono di­spo­ni­bi­li i viewport seguenti:

• vw (“viewport width”): la larghezza relativa alla finestra del browser
• vh (“viewport height”): l’altezza in base alle di­men­sio­ni del browser
• vmax (“viewport maximum”): il valore più grande della larghezza o dell’altezza
• vmin (“viewport minimum”): il valore più piccolo della larghezza o dell’altezza

Tutte e quattro le unità viewport sono ca­rat­te­riz­za­te da dati per­cen­tua­li, per esempio 10vw = 10% della larghezza del browser. A un viewport di 640 x 480 pixel cor­ri­spon­de­reb­be un tag vmax di 640 pixel (il più alto dei due valori), mentre a una finestra del browser di queste di­men­sio­ni cor­ri­spon­de il valore 10vmax = *64px* (640 : 10).

Creare titoli e corpo del testo re­spon­si­ve con unità viewport

Con l’aiuto di unità viewport puoi regolare sia i titoli sia il corpo del testo. L’im­ple­men­ta­zio­ne delle misure viewport avviene in modo simile all’utilizzo delle unità rem con le media query: entrambe le unità sono relative.

p {font-size: 2vmin;}
h1 {font-size: 5vw;}
h2 {font-size: 4vh;}
h3 {font-size: 3vmin;}

At­tra­ver­so questi comandi CSS sta­bi­li­sci ad esempio che i caratteri del corpo del testo (p) occupano con­ti­nua­men­te il 2 per cento della larghezza o dell’altezza della finestra del browser (font-size: 2vmin) in base al quale è il valore minore. In questo modo, il web design re­spon­si­ve del font ga­ran­ti­sce sempre la stessa relazione anche con sezioni più piccole della finestra del browser.

Ti­po­gra­fia web re­spon­si­ve con clamp()

Un’altra pos­si­bi­li­tà molto pratica per creare una ti­po­gra­fia re­spon­si­ve in CSS è l’uso della funzione clamp(). Con clamp() puoi impostare una di­men­sio­ne del carattere che cresce o si riduce au­to­ma­ti­ca­men­te in base alla larghezza dello schermo, senza però diventare più piccola o più grande di de­ter­mi­na­ti limiti. La sintassi è font-size: clamp(Minimo, Preferito, Massimo);. Vale quanto segue:

• Minimo (min) è la di­men­sio­ne minima del carattere con­sen­ti­ta.
• Preferito (preferred) è la di­men­sio­ne fles­si­bi­le che si adatta di­na­mi­ca­men­te alla larghezza del viewport.
• Maximum (max) è la di­men­sio­ne massima del carattere che può essere raggiunta.

Un esempio di titolo potrebbe essere il seguente:

h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}

Il vantaggio di clamp() rispetto alle media query è che la di­men­sio­ne del carattere scala in modo fluido, senza che tu debba definire più brea­k­point. Quindi non hai bisogno di query @media separate per di­men­sio­ni dello schermo diverse.

Con­clu­sio­ne: nel re­spon­si­ve web design non si può tra­scu­ra­re la ti­po­gra­fia

Ormai l’utilizzo di comandi CSS crea un web design re­spon­si­ve dei tuoi font. Dopo la loro messa in atto dovresti tuttavia ancora ve­ri­fi­ca­re il risultato su più di­spo­si­ti­vi possibili (o provare diversi emulatori) e, even­tual­men­te, ef­fet­tua­re dei mi­glio­ra­men­ti prima di pub­bli­ca­re la pagina.

Uti­liz­za­re media query o unità viewport CSS è una scelta che dipende sia dai tuoi gusti sia dalla si­tua­zio­ne. Rispetto alle unità viewport, le media query sono più lente nella ri­pro­du­zio­ne in scala del carattere, vengono però sup­por­ta­te da browser più vecchi. Inoltre, ci sono altre pos­si­bi­li­tà per generare ti­po­gra­fie web reattive, cioè tramite container query. Tutti questi metodi sod­di­sfa­no i requisiti di una ti­po­gra­fia web re­spon­si­ve: nel web design re­spon­si­ve il font deve adattarsi sempre alla di­men­sio­ne dello schermo, anche se dipende dal relativo adat­ta­men­to della di­men­sio­ne del carattere e dell’in­ter­li­nea nonché dall’utilizzo di font vet­to­ria­li.