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.
Registrazione dominio
Più di un semplice nome.
Registra il tuo dominio con IONOS e approfitta di tutte le nostre funzionalità.
E-MailSSL WildcardSupporto 24/7Grazie 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.
Affinché il testo della vostra pagina venga visualizzato sullo schermo in modo ottimale, utilizzate un carattereresponsive 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.
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 comandiCSS:
I seguenti paragrafi vi mostrano come utilizzare questi comandi CSS.
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:
È 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.
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;}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à remsi 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 supportomancante 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;
}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.
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.
Il website builder di IONOS
MyWebsite è la soluzione perfetta per la tua presenza online professionale e include un consulente personale!
Certificato SSLDominio gratisSupporto 24/7Ormai 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.
Su internet si trovano numerosi testi con diversi caratteri. La diffusione del responsive web design si riflette anche sulla tipografia nei siti web e la visualizzazione dei caratteri dovrebbe adattarsi sempre alla schermata del dispositivo utilizzato. La tipografia reattiva deve avere una visualizzazione flessibile e utilizzare font adatti. In questo primo articolo vi offriamo una panoramica dei...
Per font web-safe si intendono quei caratteri che possono essere utilizzati sul web senza problemi. Il fattore chiave qui è se i rispettivi font possono essere visualizzati correttamente dal maggior numero possibile di browser. Scopriamo perché il numero di caratteri sicuri per il web è in costante crescita e perché i font per il web giocano un ruolo così importante per il successo delle aziende...
Utilizzate un icon font per inserire una funzionale icona vettoriale sul vostro sito web. Al contrario delle immagini pixel classiche, quelle vettoriali hanno il vantaggio di lasciarsi scalare a piacere senza alcuna perdita di qualità. Inoltre l’inserimento su CSS (Cascading Style Sheets) offre ulteriori possibilità di agire direttamente sul codice. Molti progetti open source mettono a...
In quest’ultimo articolo della serie dedicata alla tipografia nel responsive web design, vi mostriamo come la scelta di caratteri sia cresciuta esponenzialmente con l’introduzione dei font. Molti di questi sono scaricabili gratuitamente e grazie alla loro adattabilità sono perfetti per un responsive web design; il font delle vostre pagine web si adatta alle caratteristiche del dispositivo mobile....
Di regola le icone vengono inserite tramite attributo “class” nel documento HTML. Questo principio vale anche per Font Awesome, uno degli icon font più usati, che comprende più di 600 icone vettoriali, ed è caratterizzato dalla semplicità di utilizzo ed è aggiornato regolarmente. Inoltre, il pacchetto di installazione contiene un file CSS quasi interamente configurato che semplifica...
Offri ai tuoi clienti servizi professionali e affidabili con l'hosting di IONOS.
Scopri i pacchetti
Dominio omaggio per un anno