10 regole di tipografia web che ogni designer dovrebbe conoscere
Puoi incorporare molti elementi nel tuo web design che creeranno coinvolgimento e attireranno 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 queste informazioni più facili da leggere, visivamente interessanti e che quel testo si aggiunga al design generale di un sito web, devi capire la tipografia. Questa è l’arte e l’abilità di rendere la parola scritta sia funzionale che 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 Interrompere l’utilizzo di LoremIpsum dopo il processo di progettazione iniziale
Se il contenuto è re, perché non viene preso in seria considerazione nel processo di web design? Utilizzando contenuti falsi come segnaposto, i web designer relegano il contenuto a un ruolo secondario. Questa è una grande indicazione 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 il contenuto web effettivo durante la creazione del progetto finale. Ciò garantisce che ciò che viene detto su una particolare pagina web abbia la stessa importanza del layout e degli elementi visivi.
Inoltre, avere un testo reale è 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 effettivo. Questo è il motivo per cui è estremamente importante ottenere il testo effettivo dal tuo cliente dello scrittore di contenuti il prima possibile.
2 Crea testo Sans Serif
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 visualizzare contenuti più piccoli come blocchi di testo. I serif che hanno un bell’aspetto con una dimensione maggiore, rendono il testo difficile da leggere quando il carattere diventa più piccolo. Per questo motivo, è consigliabile salvare serif per il testo grande e fare affidamento su sans quando la leggibilità potrebbe essere un problema. Meglio ancora, abbraccia l’aspetto pulito, elegante e moderno dei sans font e salva i serif per la stampa. In questo modo non dovrai mai affrontare il degrado della leggibilità a favore dell’utilizzo di un carattere che sembra carino.
3 Pensa alle citazioni intelligenti e ad altri simboli all’inizio del processo di progettazione
È probabile che tu abbia visitato un sito Web in cui alcuni simboli non vengono visualizzati correttamente. A volte vengono sostituiti con una domanda o una stringa di caratteri dall’aspetto strano. Altre volte, semplicemente non ci sono. Ciò accade spesso con virgolette intelligenti o "curve". 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. È comune anche per l’Euro simbolo, 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 il tuo contenuto per sbarazzarti di 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 piuttosto che affidarti solo al copia e incolla. Qualunque cosa tu decida, assicurati di testare la pagina web in tutti i 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 competenze CSS avanzate sono estremamente importanti
Se hai sviluppato buone capacità CSS, i tuoi visitatori dovrebbero essere in grado di navigare tra le pagine del tuo sito web in modo assolutamente fluido. Se crei correttamente i tuoi fogli di stile, puoi persino avere più versioni della stessa pagina pur mantenendo una grande continuità quando si tratta di tipografia. Certo, non è necessario usare molti trucchi. Un buon CSS può aiutarti a evitare problemi piccoli ma comuni come la modifica dei caratteri tipografici e della dimensione del carattere 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 è necessario pensare alla tipografia mentre si progetta ogni pagina. Invece, devi solo usare il foglio di stile appropriato. Se decidi, su una particolare pagina, di infrangere la norma e fare qualcosa di diverso con la tipografia per creare un effetto o per attirare l’attenzione su qualcosa, risalterà maggiormente grazie al tuo uso dei CSS.
5 Sia la tipografia micro che quella macro sono importanti
La micro-tipografia si riferisce ai dettagli della tipografia che sono legati alla leggibilità. Ad esempio, la spaziatura è una preoccupazione legata alla micro-tipografia, 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 correlate alla micro-tipografia.
La macro-tipografia si riferisce al modo in cui le tue scelte riguardanti la 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 ordinato che era anche quasi impossibile da leggere? Ecco cosa succede quando si presta attenzione alla macrotipografia, ma non alla microtipografia.
6 Conoscere il contenuto così come il design
Come sai, un buon sito web ha 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 possa sostituire quello reale quando si tratta delle fasi successive del design. Non abbiamo ancora finito. Il contenuto è davvero re. Una volta che il design finale, incluso il contenuto, è a posto, devi leggere la pagina web.
Quando leggi il contenuto dopo che il tuo progetto è finito, puoi determinare se ci sono o meno problemi di spaziatura o interruzione di riga. Questi possono rendere il contenuto confuso o persino cambiare 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 Comprendi 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 desideri che gli utenti seguano. In effetti, se hai una pagina che non sta convertendo, potresti voler giocare con la tipografia per vedere se eventuali 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à dovuti a problemi con il colore del carattere e il colore di sfondo è utilizzare i colori con il contrasto più elevato possibile, bianco e nero. Sfortunatamente, questo 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, semplicemente schiarire o scurire di una o due tonalità è tutto ciò che devi fare. Quindi, la tua tipografia passa da illeggibile a perfettamente distinguibile e dall’aspetto davvero accattivante.
9 Testo centrato sul fossato
I problemi con il testo centrato sono numerosi. Prima di tutto può rendere le tue pagine web simili a volantini mal progettati. Oltre a questo, ti ritrovi quasi sempre con strani margini e un testo che sembra destinato a essere una poesia o le 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. Mantieni il 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 usino il pollice e l’indice o che 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é è difficile per loro leggere il tuo testo a dimensioni normali.
Sarebbe fantastico se tutti fossero in grado di visualizzare il tuo testo come previsto, ma con i boomer che spesso hanno bisogno di un aiuto extra per vedere il testo, semplicemente non è possibile. Fai attenzione a non utilizzare un carattere tipografico che si degrada 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 carattere disponibile in commercio che vedi su qualsiasi sito web.
- TypePlate: questo è un framework tipografico completo perfetto per i web designer. TypePlate è in grado di gestire capolettera, virgolette in blocco, 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 titoli e delle intestazioni e il carattere selezionato per il testo.
- TIFF: questo strumento ti consente di richiamare due caratteri 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: utilizza 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.
- Why Fonts Matter, 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 convincere dell’importanza di scegliere il giusto tipo di lavoro.
Conclusione
Si spera che questo articolo influenzi i web designer a riflettere un po’ di più sulla tipografia e anche a trovare modi per utilizzare il testo in modo più efficace e creativo nei loro progetti.