Nella prima parte della nostra serie sulla ti­po­gra­fia nel re­spon­si­ve web design vi abbiamo spiegato il motivo per cui i caratteri reattivi sono così im­por­tan­ti. Adesso possiamo spostare l’at­ten­zio­ne sugli aspetti più tecnici: dopo una pa­no­ra­mi­ca sulle fun­zio­na­li­tà base del re­spon­si­ve design nonché dei caratteri più adatti, vi forniamo alcune in­di­ca­zio­ni su come im­ple­men­ta­re i font re­spon­si­ve tramite i comandi CSS.

Registra il tuo dominio
  • Domain Connect gratuito per una con­fi­gu­ra­zio­ne facile del DNS
  • Cer­ti­fi­ca­to SSL Wildcard gratuito
  • Pro­te­zio­ne privacy inclusa

Nozioni base di re­spon­si­ve web design

Grazie al re­spon­si­ve web design la vi­sua­liz­za­zio­ne di una pagina web si adatta all’ap­pa­rec­chio uti­liz­za­to. Sul display di uno smart­pho­ne una pagina viene vi­sua­liz­za­ta di­ver­sa­men­te rispetto al monitor di un computer. So­prat­tut­to per quanto riguarda le di­men­sio­ni e la di­spo­si­zio­ne di par­ti­co­la­ri com­po­nen­ti di un sito vale la regola che colonne della pagina, elementi di na­vi­ga­zio­ne, grafica e caratteri do­vreb­be­ro essere adattati sempre al formato e alla ri­so­lu­zio­ne dello schermo del di­spo­si­ti­vo in uso nonché all’in­qua­dra­tu­ra uti­liz­za­ta. Grazie a un re­spon­si­ve web design, in cui rientrano anche il ri­co­no­sci­men­to dei di­spo­si­ti­vi d’im­mis­sio­ne (mouse e tastiera, tou­ch­screen ecc.) e il relativo al­li­nea­men­to degli elementi di na­vi­ga­zio­ne, tutto questo è possibile.

Un metodo comune è l’impiego di griglie fles­si­bi­li (chiamate anche Grid) grazie alle quali avviene la ri­di­stri­bu­zio­ne dei singoli elementi HTML di un sito. Le righe e le colonne di una griglia elastica vengono adattate a diverse ri­so­lu­zio­ni e, se ne­ces­sa­rio, rial­li­nea­te o po­si­zio­na­te. Anche quando cambiano le di­men­sio­ni della finestra del browser, i contenuti di un sito vengono ri­di­stri­bui­ti adat­tan­do­si alle ri­spet­ti­ve in­qua­dra­tu­re (Viewport). L’HTML5, il CSS3 (so­prat­tut­to at­tra­ver­so l’utilizzo di Media Queries) e Ja­va­Script co­sti­tui­sco­no il fon­da­men­to tecnico del re­spon­si­ve web design ed è sulla base di questi linguaggi che è possibile rendere il testo di una pagina reattivo.

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

Affinché il testo della vostra pagina venga vi­sua­liz­za­to sullo schermo in modo ottimale, uti­liz­za­te un carattere re­spon­si­ve 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 è im­por­tan­te che sia leggibile e che cor­ri­spon­da all’effetto che intendete 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 vostro sito. Non dovrebbe essere troppo spento, al­tri­men­ti la leg­gi­bi­li­tà 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 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 un font reattivo con i CSS Media Queries

Con l’in­tro­du­zio­ne di Media Queries nel CSS3 avete una nuova utile opzione per rea­liz­za­re caratteri che si adattano ai diversi tipi di vi­sua­liz­za­zio­ne. Le media queries ri­co­no­sco­no ca­rat­te­ri­sti­che par­ti­co­la­ri di un ap­pa­rec­chio come la ri­so­lu­zio­ne dello schermo, la larghezza e l’altezza della finestra del browser o se il display viene disposto oriz­zon­tal­men­te o ver­ti­cal­men­te. Queste in­for­ma­zio­ni vengono uti­liz­za­te per adeguare la vi­sua­liz­za­zio­ne dei contenuti ai di­spo­si­ti­vi mobili degli utenti.

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 dovreste definire la grandezza 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­va 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’ap­pa­rec­chio uti­liz­za­to, è ne­ces­sa­ria una media query eseguita tramite @media. Per la vi­sua­liz­za­zio­ne in base al di­spo­si­ti­vo sono inoltre im­por­tan­ti le di­men­sio­ni del browser e della viewport. Se combinate il tag @media con screen e ag­giun­ge­te min-width (larghezza minima) o max-width (larghezza massima), potete fissare il formato del carattere a de­ter­mi­na­te larghezze dello schermo, per esempio @media screen and (min-width: 800px). In questo modo definite la di­men­sio­ne del carattere in base alla grandezza della finestra del browser.
  • Il comando font-size definisce la di­men­sio­ne di vi­sua­liz­za­zio­ne del carattere: in pixel o relative unità di misura come em (misura della larghezza di­pen­den­te dal corpo del carattere). L’unità em si adatta alla di­men­sio­ne pre­ce­den­te­men­te definita dell’elemento vi­sua­liz­za­to 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 uti­liz­za­re questi comandi CSS.

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

Nei CSS i titoli vengono indicati con le ab­bre­via­zio­ni h1, h2, h3 ecc. A un titolo potete 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 grandezze 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-sitze: 1.5em;
    }
}

Con questo esempio vengono pre­fis­sa­te con il tag h1 quattro diversi tipi di vi­sua­liz­za­zio­ne: i ri­spet­ti­vi font-size del tag h1 (3em; 2,5 em; 2em; 1,5). 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 em si adatta alle im­po­sta­zio­ni standard del browser uti­liz­za­to, 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 sem­pli­ce­men­te per 16. Nel nostro esempio le di­men­sio­ni della vi­sua­liz­za­zio­ne 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 in­di­ca­zio­ni per l’or­ga­niz­za­zio­ne dei caratteri (o co­sid­det­ti brea­k­point). In questo modo è possibile adattare i titoli in una maniera ancora più precisa.

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 dovreste allineare in pro­por­zio­ne anche l’in­ter­li­nea del titolo. Nel prossimo paragrafo vi mostriamo come rea­liz­za­re queste misure.

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

Come nei titoli definite 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 del­l'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); sulla base delle in­di­ca­zio­ni font-size (90%, 75%, 50%) relative al body, la di­men­sio­ne del carattere si adatta alla larghezza della finestra. Grazie a queste piccole misure il vostro font diventa reattivo.  

Quando impostate in modo re­spon­si­ve il vostro sito, dovete adeguarlo non solo alla grandezza del carattere, ma anche sempre all’in­ter­li­nea. Secondo una regola ti­po­gra­fi­ca dovreste 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.

Con l’uso di unità em potete adeguare l’in­ter­li­nea alla di­men­sio­ne del carattere at­tra­ver­so il tag line-height (altezza del carattere).

In questo esempio l’in­ter­li­nea del corpo del testo è il 130% (1.3em) della di­men­sio­ne 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 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, rispetto all’uso degli em, so­prat­tut­to con con­ca­te­na­zio­ni 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 sup­por­ta­ta da tutte le versioni pre­ce­den­ti 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ù uti­liz­za­te da nessuno. Ma so­prat­tut­to il supporto mancante nelle versioni pre­ce­den­ti di Explorer di Microsoft può dare problemi. Soltanto a partire dalla versione 9 c’è un supporto di unità rem. Se volete pre­sen­ta­re un design ac­cat­ti­van­te anche agli utenti di versioni più vecchie, dovreste in­stal­la­re un’opzione fallback uti­liz­zan­do i pixel. Questa soluzione al­ter­na­ti­va 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 uti­liz­zan­do unità CSS viewport

Un’altra opzione per rea­liz­za­re una ti­po­gra­fia re­spon­si­ve è l’utilizzo di unità CSS viewport. Il metatag viewport si utilizza per adattare le di­men­sio­ni 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 di­men­sio­ni. Il vantaggio rispetto all’uso delle media queries è il fatto che il processo di ade­gua­men­to ad una nuova schermata avviene ve­lo­ce­men­te 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 di­men­sio­ni del browser. Con i tag vmax („viewport maximum“) e vmin („viewport minimum“) ci sono due unità a di­spo­si­zio­ne che de­fi­ni­sco­no le di­men­sio­ni in relazione all’altezza o alla larghezza della finestra. Quale misura viene uti­liz­za­ta come base di adat­ta­men­to dipende dalla relativa unità uti­liz­za­ta: con vmin si definisce il valore più basso e con vmax quello più alto, entrambi de­ter­mi­nan­ti per viewport. 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). Ad una 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).

Si­mil­men­te alle misure rem anche le unità viewport non sono sup­por­ta­te da tutte le versioni del browser, in questo caso sono anche di più. Qui potete trovare una pa­no­ra­mi­ca delle unità di misura della viewport.

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

Con l’aiuto di unità viewport potete 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 queries: entrambe le unità sono relative. Il seguente frammento di codice im­po­ste­reb­be 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;}

At­tra­ver­so questi comandi CSS stabilite 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 a quale è il valore minore. In questo modo è garantito che il font, anche con schermate più piccole, conservi sempre la stessa scala.

Inoltre la di­men­sio­ne 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 per­cen­tua­le superiore al testo prin­ci­pa­le, in quanto questo occupa il valore 2vmin. Grazie a queste quattro in­di­ca­zio­ni CSS la scrittura del corpo del testo e le tre diverse grandezze dei titoli sono sempre nello stesso rapporto, non ha im­por­tan­za quanto grande sia la finestra del browser. 

Crea il tuo sito web
Scopri le nuovi funzioni IA di MyWebsite
  • Editor facile e intuitivo con supporto IA
  • Immagini e testi d'effetto in pochi secondi
  • Dominio, indirizzo e-mail e cer­ti­fi­ca­to SSL inclusi

Riepilogo: 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 design re­spon­si­ve dei vostri font. Dopo la loro messa in atto dovreste tuttavia ancora ve­ri­fi­ca­re il risultato su più di­spo­si­ti­vi possibili (o provare diversi emulatori) ed, 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 queries o unità CSS viewport, è una scelta che dipende sia dai vostri gusti sia dalla si­tua­zio­ne. Rispetto alle unità viewport le media queries 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 element queries o l’uso di un jQuery plug-in. Tutti questi metodi sod­di­sfa­no i requisiti di una ti­po­gra­fia web re­spon­si­ve: nel re­spon­si­ve web design 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. Nella seconda parte di questa serie ci siamo dedicati alla ti­po­gra­fia nel re­spon­si­ve web design, in­di­can­do­vi alcuni siti dove ottenere font re­spon­si­ve gratuiti e spie­gan­do­vi come inserirli nel vostro sito.

Vai al menu prin­ci­pa­le