10 regole di tipografia Web che ogni designer dovrebbe conoscere

Puoi incorporare molti elementi nel tuo web design che creeranno coinvolgimento e manterranno l'attenzione dei tuoi visitatori. Questi includono immagini, video e persino suoni. Tuttavia, la parte più importante di quasi tutti i siti Web è il contenuto che i visitatori leggono per ottenere le informazioni che leggono.

Se vuoi rendere quelle informazioni più facili da leggere, visivamente interessanti e per aggiungere quel testo al design generale di un sito web, devi capire la tipografia. Questa è l'arte e l'abilità di rendere la parola scritta funzionale ed esteticamente gradevole.

Se vuoi imparare a usare la tipografia a tuo vantaggio, dai un'occhiata a queste 10 regole che ogni designer dovrebbe tenere a mente.

1. Smetti di usare LoremIpsum dopo il processo di progettazione iniziale

Se il contenuto è il re, perché non viene preso in seria considerazione nel processo di progettazione web? Utilizzando i contenuti falsi come segnaposto, i web designer relegano i contenuti a un ruolo secondario. Questa è una grande indicazione del fatto che le priorità di progettazione sono tutte fuori controllo. Non è così problematico nelle prime fasi, ad esempio, quando stai prendendo in giro una varietà di layout di pagina. Tuttavia, una volta che hai ristretto le cose, è importante lavorare con i contenuti Web effettivi durante la creazione del design finale. Ciò garantisce che a ciò che viene detto su una particolare pagina Web sia data la stessa importanza del layout e degli elementi visivi.

Oltre a questo, avere un testo effettivo è importante in termini di design e layout. Non vuoi essere nella posizione di aver progettato completamente una pagina web, solo per scoprire che non funziona con il contenuto reale. Questo è il motivo per cui è estremamente importante ottenere il testo effettivo dal tuo cliente dello scrittore di contenuti il ​​prima possibile.

2. Crea testo senza grazie

Il testo Serif è assolutamente bellissimo. Questi sono ottimi caratteri da utilizzare per la stampa e per applicazioni di stampa più grandi come intestazioni, titoli e sottotitoli. Sfortunatamente, sullo schermo, i serif non si adattano bene quando si tratta di visualizzazioni di contenuto più piccole come blocchi di testo. I serif che sembrano belli a una dimensione maggiore, rendono il testo difficile da leggere quando il carattere diventa più piccolo. Per questo motivo, è consigliabile salvare i serif per il testo di grandi dimensioni e fare affidamento su sans quando la leggibilità potrebbe essere un problema. Meglio ancora, abbraccia l'aspetto pulito, elegante e moderno dei caratteri sans e salva i grazie per la macchina da stampa. In questo modo non dovrai mai affrontare il degrado della leggibilità a favore dell'utilizzo di un carattere che sembra carino.

3. Pensa a citazioni intelligenti e altri simboli all'inizio del processo di progettazione

È probabile che tu abbia visitato un sito Web in cui alcuni simboli non sarebbero stati visualizzati correttamente. A volte vengono sostituiti da una domanda o da una stringa di caratteri strani. Altre volte, semplicemente non ci sono. Questo accade spesso con virgolette intelligenti o "ricci". Questo è spesso il risultato della creazione di testo in MS Word o in un altro pacchetto e quindi trasferito su una pagina Web. Le cose semplicemente non si traducono come desiderato. È anche comune per il simbolo dell'euro, i caratteri a doppio byte e altri simboli presi da contenuti estranei.

Per evitare questo problema nel tuo progetto finale, hai un paio di opzioni. Innanzitutto, puoi modificare i tuoi contenuti per eliminare questi simboli. Funziona se sei disposto a cambiare i simboli in linguaggio naturale. Puoi anche utilizzare l'HTML per assicurarti che i simboli vengano visualizzati correttamente invece di fare solo affidamento sul copia e incolla. Qualunque cosa tu decida, assicurati di testare la pagina web in ogni browser che puoi. Ciò che potrebbe risolvere un problema con i simboli in un browser potrebbe non essere affatto efficace in un altro.

4. Le abilità CSS avanzate sono estremamente importanti

Se hai sviluppato buone abilità CSS, i tuoi visitatori dovrebbero essere in grado di navigare attraverso le pagine del tuo sito web in modo assolutamente fluido. Se crei i tuoi fogli di stile correttamente, puoi persino avere più versioni della stessa pagina mantenendo comunque una grande continuità quando si tratta di tipografia. Naturalmente, non è necessario utilizzare molti trucchi. Un buon CSS può aiutarti a evitare problemi piccoli ma comuni come la modifica dei caratteri tipografici e delle dimensioni dei caratteri da una pagina all'altra.

Perché la tipografia coerente è una tale necessità? L'uso dei CSS per mantenere una tipografia coerente conferisce al tuo sito Web un aspetto professionale e nitido. Significa anche che non devi pensare alla tipografia mentre progetti ogni pagina. Invece, usi semplicemente il foglio di stile appropriato. Se decidi, su una pagina particolare, di infrangere la norma e fare qualcosa di diverso con la tipografia per creare un effetto o attirare l'attenzione su qualcosa, risalterà di più grazie al tuo uso dei CSS.

5. Sia la tipografia micro che quella macro sono importanti

La microtipografia si riferisce ai dettagli della tipografia relativi alla leggibilità. Ad esempio, la spaziatura è un problema legato alla microtipografia, così come il ridimensionamento e il contrasto. Le modifiche apportate per garantire che un blocco di testo sia leggibile su qualsiasi dispositivo o browser sono tutte relative alla micro-tipografia.

La macro-tipografia si riferisce al modo in cui le tue scelte riguardo alla tipografia si collegano al tuo design generale. Riguarda l'estetica.

Una buona tipografia prende in considerazione sia la micro che la macro tipografia. Hai mai visitato un sito Web che utilizzava un carattere personalizzato dall'aspetto davvero curato che era anche quasi impossibile da leggere? È quello che succede quando si presta attenzione alla macro-tipografia, ma non alla micro-tipografia.

6. Conosci il contenuto così come il design

Come sai, un buon sito web ha un flusso. Parte di questo è la leggibilità del contenuto che si trova sulla pagina. Abbiamo già discusso di come questo sia influenzato da cose come i serif e abbiamo discusso di come il testo fittizio non sia un sostituto della cosa reale quando si tratta delle fasi successive della progettazione. Non abbiamo ancora finito. Il contenuto è davvero il re. Una volta che il design finale, compreso il contenuto, è a posto, devi leggere la pagina web.

Quando leggi il contenuto al termine della progettazione, puoi determinare se ci sono o meno problemi di spaziatura o interruzione di riga. Questi possono creare confusione nel contenuto o addirittura modificare involontariamente il significato del contenuto. Risolvere questi problemi utilizzando alcuni trucchi tipografici può garantire che il tuo prodotto finale comunichi esattamente ciò che tu o il tuo cliente intendete.

7. Comprendere l'importanza della gerarchia

La gerarchia è la road map che dai alle persone che visitano il tuo sito web. Puoi usare immagini, video, colori e (ovviamente) tipografia per creare quella gerarchia.

Si tratta semplicemente di guidare il visitatore dalla prima cosa che vuoi che veda a quella successiva, e così via. Con la tipografia, puoi utilizzare le dimensioni, le modifiche al carattere e la spaziatura per definire la gerarchia che vuoi che gli utenti seguano. In effetti, se hai una pagina che non sta convertendo, potresti voler giocare con la tipografia per vedere se le modifiche apportate aiuteranno a guidare i visitatori al pulsante di invito all'azione.

8. Sii creativo ma cauto con il colore

Il modo più semplice per assicurarti di non avere mai problemi di leggibilità a causa di problemi con il colore del carattere e il colore di sfondo è utilizzare i colori a più alto contrasto disponibili, il bianco e nero. Sfortunatamente, ciò può creare un design piuttosto noioso.

Non aver paura di usare i colori. In effetti, non aver paura di usare combinazioni di colori che non sembrano funzionare. A volte, basta usare una o due tonalità più chiare o più scure. Quindi, la tua tipografia passa da illeggibile a perfettamente distinguibile e davvero interessante.

9. Elimina il testo centrato

I problemi con il testo centrato sono numerosi. Innanzitutto può far sembrare le tue pagine web volantini mal progettati. Oltre a questo, ti ritrovi quasi sempre con strani margini e testo che sembra destinato a essere una poesia o note di copertina di un vecchio album rock. Anche se può andare bene usare il testo centrato per i titoli, di solito è meglio evitarlo del tutto. Attenersi al testo regolato a sinistra e i tuoi lettori troveranno i tuoi contenuti molto più facili da leggere.

10. Considera come appare il tuo testo ingrandito

Sia che utilizzino il pollice e l'indice o facciano clic sul pulsante dello zoom, le persone ingrandiranno il tuo testo. A volte, lo fanno per compensare uno schermo più piccolo. Altre volte, lo fanno semplicemente perché è una lotta per loro leggere il tuo testo alle dimensioni normali.

Sarebbe fantastico se tutti fossero in grado di visualizzare il tuo testo come previsto, ma con i boomer che spesso necessitano di ulteriore aiuto per vedere il testo, semplicemente non è possibile. Fare attenzione a non utilizzare un carattere tipografico che si deteriora se viene ingrandito.

Strumenti e risorse utili

Ecco alcuni strumenti e risorse utili per aiutarti a fare di più con la tipografia:

• FontFace Ninja : questa utility ti aiuta a identificare i caratteri che trovi su Internet. Questo è un ottimo strumento da avere quando ti imbatti in un font che attira davvero la tua attenzione. Questo plug-in di Chrome ti aiuterà a identificare, trovare e acquistare qualsiasi font disponibile in commercio che vedi su qualsiasi sito web.
• TypePlate : questo è un framework tipografico completo perfetto per i web designer. TypePlate può gestire capolettera, virgolette, ridimensionamento, colori e una varietà di altre sfide relative alla tipografia.
• Scala modulare : questa è una scala che consente di determinare il carattere e la dimensione del carattere ideali. Ti aiuta anche a creare un equilibrio tra la dimensione del carattere dei tuoi titoli e intestazioni e il carattere che selezioni per il tuo testo.
• TIFF : questo strumento ti consente di visualizzare due tipi di carattere diversi. Quindi, mostra le differenze tra ciascuno dei due caratteri per te. Ti consente persino di confrontare lettere e numeri diversi da un carattere all'altro.
• TypeWolf : Usa questo sito Web per ottenere la correzione di alcuni dei caratteri più interessanti e dell'uso più stimolante della tipografia su Internet. Questa è un'ottima fonte di ispirazione, oltre che di informazioni.
• Perché i caratteri contano, Sarah Hyndman : Questo è un libro eccellente che esplora l'importanza dei caratteri e i modi in cui la tipografia può influenzare lo stato d'animo. È un ottimo libro per le persone appassionate di tipografia, ma anche per le persone che potrebbero aver bisogno di convincersi dell'importanza di scegliere il giusto tipo di lavoro.

Conclusione

Si spera che questo articolo influenzi i web designer a dedicare un po' più di attenzione alla tipografia e anche a trovare modi per utilizzare il tipo in modo più efficace e più creativo nei loro progetti.