Tipografia nel responsive web design: nozioni base

La tipografia web si è già sviluppata enormemente, tuttavia il responsive design e il design reattivo di siti web pongono i web designer di fronte a nuove sfide. Il responsive web design è oggi una tecnica diffusa, nella quale la visualizzazione di un sito web si adatta all’apparecchio utilizzato e alle dimensioni dello schermo. Sul display di uno smartphone una homepage viene visualizzata in modo diverso rispetto a un tablet, a un laptop o al desktop di un computer. L’adattamento di tutti i contenuti di una pagina alle rispettive dimensioni dello schermo riguarda inoltre naturalmente anche il carattere; anche questo infatti dovrebbe essere inserito nella schermata in modo appropriato. Questo significa che anche il tipo di carattere dev’essere adattabile. Le dimensioni del carattere e l’interruzione di riga del testo si adattano, in condizioni ottimali, a qualsiasi paragrafo e ci sono anche alcuni fattori da osservare nella tipografia web:

• Le dimensioni del carattere non devono adattarsi alla grandezza del display, ma vanno definite anche in base alla distanza media dal display. Negli smartphone la distanza dallo schermo dell’utente è per esempio inferiore rispetto ai monitor di un computer desktop. 

• La dimensione del carattere dipende dalla risoluzione dello schermo.

• L’interlinea dovrebbe essere adattata alla schermata: l’interlinea necessaria per una buona lettura è legata alla lunghezza della riga.

• Il layout della pagina necessita di una sufficiente libertà tipografica (superfici bianche dello sfondo). Questo giova alla leggibilità di un testo.

Inoltre, nella visualizzazione su piccoli schermi, 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 dispositivi mobili vengono utilizzati non solo all’interno di spazi chiusi, ma anche quando si è in giro dove quindi le condizioni di luce sono a malapena influenzabili. Il carattere su display piccoli dovrebbe essere leggibile anche in casi di massima o scarsa luminosità e anche in caso di riflessi, effetto ottenibile tramite una scrittura più piena.

Per illustrare al meglio il carattere su tutti i dispositivi mobili nel responsive web design, vengono usati i font vettoriali. I font vettoriali sono scalabili a piacere e non perdono di qualità anche in caso di ingrandimento del carattere. Questo li differenzia dai font bitmap, che vengono visualizzati unicamente sulla base di punti (pixel).

Tuttavia, i caratteri vettoriali (esattamente come anche gli altri grafici vettoriali) non possono essere visualizzati sugli schermi del computer senza una trasformazione del formato, in quanto questi sono adatti solo a grafici a raster. Pertanto i vettori si muovono su uno sfondo retinato, attraverso il quale i font vettoriali giungono, infine, anche come griglia o grafica a pixel sullo schermo.

Grazie ai font vettoriali potete sempre garantire la leggibilità di un carattere anche nel responsive web design. Per personalizzare la scrittura e non dipendere più dai pochi font che sono preinstallati sulla maggior parte dei dispositivi, potete incorporarli in una pagina tramite CSS. Quali sono i font più adatti già esistenti e come collegare questi web font reattivi sulla vostra pagina web, ve lo mostriamo nella parte due e tre della nostra serie sulla tipografia nel responsive web design.