Ti­po­gra­fia nel web design re­spon­si­ve: nozioni di base

L’uso corretto dei caratteri ha un ruolo fon­da­men­ta­le nel web design: questo vale anche per il web design re­spon­si­ve, nel quale il font ha un ruolo im­por­tan­te nella per­ce­zio­ne di un sito web.

Cosa bisogna sapere sulla ti­po­gra­fia

In origine con il termine ti­po­gra­fia si iden­ti­fi­ca­va l’arte della stampa di testi con l’uso di lettere mobili, il co­sid­det­to “tipo”. Da un punto di vista storico, questa nozione è stret­ta­men­te legata allo sviluppo della scrittura e della sua tecnica di ri­pro­du­ci­bi­li­tà grazie al torchio. Col tempo questa de­fi­ni­zio­ne ha assunto un si­gni­fi­ca­to molto più ampio: per ti­po­gra­fia si intende il design di caratteri e il loro utilizzo nel senso più ampio, ma anche la scrittura digitale come viene uti­liz­za­ta su siti web o in programmi per computer.

Si dif­fe­ren­zia tra micro-ti­po­gra­fia e macro-ti­po­gra­fia:

• Micro-ti­po­gra­fia: de­fi­ni­zio­ne del carattere ti­po­gra­fi­co in quanto tale, nonché degli spazi tra i caratteri e tra le parole.
• Macro-ti­po­gra­fia: tutte le ca­rat­te­ri­sti­che della pro­get­ta­zio­ne di una pagina di testo stampata o digitale, incluso il formato della pagina, l’area di com­po­si­zio­ne, la di­men­sio­ne dei caratteri, l’in­ter­li­nea, il numero e la larghezza delle righe, nonché il po­si­zio­na­men­to di altri elementi grafici (come le immagini).

Ti­po­gra­fia nei media digitali e su internet

Il concetto di font indica un insieme di caratteri digitali, cioè una par­ti­co­la­re tipologia di scrittura del computer. Il design di un font all’interno di un documento di testo e sul web si chiama ti­po­gra­fia web che si orienta fon­da­men­tal­men­te alla ti­po­gra­fia classica; anche nella ti­po­gra­fia web, però, la leg­gi­bi­li­tà dipende, tra le altre cose, dalle di­men­sio­ni del font, dalla lunghezza e dalla distanza tra le righe (in­ter­li­nea). Inoltre, nella scrittura su internet è im­por­tan­te con­si­de­ra­re i formati dei file e la loro tecnica di vi­sua­liz­za­zio­ne dei font.

L’utilizzo di diversi caratteri sul web è for­te­men­te cambiato col passare del tempo. In passato la vi­sua­liz­za­zio­ne dei caratteri su un browser era si­gni­fi­ca­ti­va­men­te limitata: solo pochi caratteri come Times New Roman o Arial erano com­pa­ti­bi­li uni­ver­sal­men­te, in quanto erano in­stal­la­ti sulla maggior parte dei computer ed era possibile ri­chia­mar­li fa­cil­men­te su ogni pagina web. Intanto oggi vengono uti­liz­za­ti diversi caratteri nella forma di font web. I font web sono caratteri che il computer carica tramite CSS insieme alla pagina web da vi­sua­liz­za­re.

Non ha im­por­tan­za che si tratti di font web o di font in­stal­la­ti in locale: oggi si uti­liz­za­no quasi esclu­si­va­men­te font vet­to­ria­li, che hanno lo stesso aspetto anche vengono ingraditi e vengono vi­sua­liz­za­ti nel browser con una matrice di punti (pixel). I formati più in uso per i font vet­to­ria­li sono di tipo TrueType (TTF), OpenType (OTF) e Web Open Font Format (WOFF2).

Font variabili

Un’ulteriore evo­lu­zio­ne dei font vet­to­ria­li e web sono i font variabili. Si tratta di caratteri ti­po­gra­fi­ci che rac­chiu­do­no in un unico file diversi stili, come spessori di tratto dif­fe­ren­ti (peso), larghezze, in­cli­na­zio­ni o altre ca­rat­te­ri­sti­che ti­po­gra­fi­che. A dif­fe­ren­za dei font classici, in cui ogni stile deve essere caricato come file separato, i font variabili possono essere regolati in modo continuo e fles­si­bi­le.

Questa tecnica permette di adattare il testo in modo fles­si­bi­le a diverse di­men­sio­ni dello schermo, ri­so­lu­zio­ni o requisiti di layout, senza dover passare a varianti di font fisse. Offre vantaggi so­prat­tut­to nel web design re­spon­si­ve: le di­men­sio­ni e gli spessori dei caratteri possono essere scalati in modo continuo, così che il testo si integri in modo armonioso in vari formati di vi­sua­liz­za­zio­ne. Allo stesso tempo, i siti web be­ne­fi­cia­no di un numero ridotto di file di font, con effetti positivi sui tempi di ca­ri­ca­men­to e sulle pre­sta­zio­ni.

Cosa ca­rat­te­riz­za un font nel web design re­spon­si­ve?

La ti­po­gra­fia web si è già svi­lup­pa­ta enor­me­men­te; tuttavia, il design re­spon­si­ve e reattivo di siti web pongono i web designer di fronte a nuove sfide. Il web design re­spon­si­ve è oggi una tecnica diffusa, nella quale la vi­sua­liz­za­zio­ne di un sito web si adatta al di­spo­si­ti­vo uti­liz­za­to e alle di­men­sio­ni dello schermo. L’adat­ta­men­to di tutti i contenuti di una pagina alle ri­spet­ti­ve di­men­sio­ni dello schermo riguarda inoltre na­tu­ral­men­te anche il carattere; anche questo, infatti, dovrebbe essere inserito nella schermata in modo ap­pro­pria­to. Questo significa che anche il tipo di carattere dev’essere adat­ta­bi­le.

Le di­men­sio­ni del carattere e l’in­ter­ru­zio­ne di riga del testo si adattano, in con­di­zio­ni ottimali, a qualsiasi paragrafo. Le funzioni CSS con­sen­to­no inoltre la ti­po­gra­fia fluida, in cui le di­men­sio­ni dei caratteri si adattano in modo continuo alla di­men­sio­ne del viewport. Con funzioni come clamp() è possibile definire un valore minimo, ottimale e massimo per la di­men­sio­ne del testo, in modo che i contenuti non risultino né troppo piccoli né ec­ces­si­va­men­te grandi. Oltre alla di­men­sio­ne fles­si­bi­le ci sono anche altri fattori da con­si­de­ra­re nella ti­po­gra­fia web:

• Le di­men­sio­ni del carattere non devono adattarsi alla grandezza del display, ma vanno definite anche in base alla distanza media dal display. Negli smart­pho­ne la distanza dallo schermo dell’utente è per esempio inferiore rispetto ai monitor di un computer desktop.
• La di­men­sio­ne del carattere dipende dalla ri­so­lu­zio­ne dello schermo.
• L’in­ter­li­nea dovrebbe essere adattata alla schermata: l’in­ter­li­nea ne­ces­sa­ria per una buona lettura è legata alla lunghezza della riga.
• Il layout della pagina necessita di una suf­fi­cien­te libertà ti­po­gra­fi­ca (superfici bianche dello sfondo). Questo giova alla leg­gi­bi­li­tà di un testo.

Inoltre, nella vi­sua­liz­za­zio­ne su schermi più piccoli, il colore del carattere dovrebbe essere un po’ più vivo e il contrasto un po’ più forte rispetto al monitor di un PC. Al contrario dei grandi display, gli schermi più compatti di di­spo­si­ti­vi mobili vengono uti­liz­za­ti non solo all’interno di spazi chiusi, ma anche quando si è in giro, quando le con­di­zio­ni di luce sono a malapena in­fluen­za­bi­li. Il carattere su display piccoli dovrebbe essere leggibile anche in casi di massima o scarsa lu­mi­no­si­tà e anche in caso di riflessi, effetto ot­te­ni­bi­le tramite una scrittura più piena.

Questi aspetti svolgono un ruolo centrale anche nel contesto dell’ac­ces­si­bi­li­tà web. Di­men­sio­ni dei caratteri fa­cil­men­te leggibili, contrasti suf­fi­cien­ti e caratteri scalabili sono pre­sup­po­sti im­por­tan­ti per rendere i contenuti ac­ces­si­bi­li al maggior numero possibile di utenti.

Gestire il web design re­spon­si­ve e adattare il carattere

Per ri­pro­dur­re al meglio il carattere su tutti i di­spo­si­ti­vi mobili nel web design re­spon­si­ve, vengono usati i font vet­to­ria­li. I font vet­to­ria­li sono scalabili a piacere e non perdono di qualità anche in caso di in­gran­di­men­to del carattere. Questo li dif­fe­ren­zia dai font bitmap, che vengono vi­sua­liz­za­ti uni­ca­men­te sulla base di punti (pixel).

Tuttavia, i caratteri vet­to­ria­li (esat­ta­men­te come anche gli altri grafici vet­to­ria­li) non possono essere vi­sua­liz­za­ti sugli schermi del computer senza una tra­sfor­ma­zio­ne del formato, in quanto questi sono adatti solo a grafici a raster. Pertanto i vettori si muovono su uno sfondo retinato, at­tra­ver­so il quale i font vet­to­ria­li giungono, infine, anche come griglia o grafica a pixel sullo schermo.

Per una vi­sua­liz­za­zio­ne fles­si­bi­le dei caratteri nel web design re­spon­si­ve si uti­liz­za­no spesso unità di misura relative come le seguenti:

• em: si orienta in base alla di­men­sio­ne del carattere dell’elemento padre
• rem: è basato sulla di­men­sio­ne del carattere di base del documento
• unità basate sul viewport: si adattano alle di­men­sio­ni correnti dello schermo

Grazie ai font vet­to­ria­li puoi sempre garantire la leg­gi­bi­li­tà di un carattere anche nel web design re­spon­si­ve. Per per­so­na­liz­za­re la scrittura e non dipendere più dai pochi font che sono pre­in­stal­la­ti sulla maggior parte dei di­spo­si­ti­vi, puoi in­cor­po­rar­li in una pagina tramite CSS.