Tipografia nel responsive web design: nozioni base
La redazione di IONOS5 mins
L’uso corretto dei caratteri ha un ruolo fondamentale nel web design: questo vale anche per il responsive web design, nel quale il font ha un ruolo fondamentale nella percezione di un sito web. In questi tre articoli vi offriamo una panoramica sulla tipografia responsive nel web e vi spieghiamo come applicarla al vostro sito, citando anche alcune fonti per caratteri web reattivi. Per cominciare tratteremo di tipografia e di scrittura nel responsive web design.
Cosa bisogna sapere sulla tipografia
In origine con il termine tipografia si identificava l’arte della stampa di testi con l’uso di lettere mobili, il cosiddetto “tipo”. Da un punto di vista storico, questa nozione è strettamente legata allo sviluppo della scrittura e della sua tecnica di riproducibilità grazie al torchio. Col tempo questa definizione ha assunto un significato molto più ampio: per tipografia si intende il design di caratteri e il loro utilizzo nel senso più ampio, ma anche la scrittura digitale come viene utilizzata su siti web o in programmi per computer.
Si differenzia tra micro e macrotipografia. Nella microtipografia rientrano il design del carattere come tale, come anche la spaziatura tra caratteri e parole. La macrotipografia, invece, comprende tutte le caratteristiche del design di una pagina di testo stampata o digitale: il formato e la composizione delle pagine, la dimensione del carattere, la distanza, il numero di linee e la larghezza tra le righe nonché la collocazione di altri elementi grafici (per esempio le immagini) sono componenti della macrotipografia.
Tipografia nei media digitali e su internet
Il concetto di font indica un insieme di caratteri digitali, cioè una particolare tipologia di scrittura del computer. Il design di un font all’interno di un documento di testo e sul web si chiama tipografia web che si orienta fondamentalmente alla tipografia classica; anche nella tipografia web, però, la leggibilità dipende, tra le altre cose, dalle dimensioni del font, dalla lunghezza e dalla distanza tra le righe (interlinea). Inoltre, nella scrittura su internet è importante considerare i formati dei file e la loro tecnica di visualizzazione dei font.
L’utilizzo di diversi caratteri sul web è fortemente cambiato col passare del tempo. In passato la visualizzazione dei caratteri su un browser era significativamente limitata: solo pochi caratteri come Times New Roman o Arial erano compatibili universalmente, in quanto erano installati sulla maggior parte dei computer ed era possibile richiamarli facilmente su ogni pagina web. Intanto oggi vengono utilizzati diversi caratteri nella forma di font web. I font web sono caratteri che il computer carica tramite CSS insieme alla pagina web da visualizzare. Non ha importanza che si tratti di font web o di font installati localmente: oggi si utilizzano quasi esclusivamente font vettoriali, che hanno lo stesso aspetto in ogni livello di grandezza e vengono visualizzati nel browser con una matrice di punti (pixel). I formati più in uso per i font vettoriali sono di tipo TrueType (TTF) e OpenType (OTF).
Scrittura nel responsive web design
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.
Gestire il responsive web design e adattare il carattere
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.
