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.
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.
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 dimensionidel font, dalla lunghezza e dalla distanzatra lerighe (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).
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 webdesign è 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:
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 displaypiccoli 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 muovonosu 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.
Per i web designer la tipografia è un argomento piuttosto interessante da molto tempo. Oggi però, grazie a tecnologie avanzate, le cose stanno un po’ diversamente: con font creativi date un tocco particolare al vostro sito senza che l’utente abbia installato i rispettivi caratteri sul suo apparecchio. Nella ricerca di font adatti è necessario tuttavia prestare attenzione ad alcune cose.
Nel responsive web design la tipografia è un campo trascurato, nonostante la realizzazione di un carattere reattivo non sia più un segreto per pochi. Ma come si fa a realizzarlo? E quali font sono adatti a una scrittura responsive? Vi offriamo una panoramica su come realizzare una tipografia reattiva e come inserirla sul vostro sito tramite i CSS.
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....
Lo sviluppo di nuovi prodotti digitali può essere un investimento costoso. Come stimare in anticipo se il gioco vale la candela? Semplice: coinvolgendo gli utenti nello sviluppo del prodotto. Il nome di questo approccio, che avvantaggia sia le aziende che i clienti, è User-Centered Design.
Offri ai tuoi clienti servizi professionali e affidabili con l'hosting di IONOS.
Dominio gratis Certificato SSL Wildcard incluso Assistenza clienti 24/7