10 regole di tipografia Web che ogni progettista dovrebbe conoscere
Quando qualcuno visita un sito web che hai progettato, le probabilità sono che non si preoccupino molto dei colori, delle immagini o dei suoni, stanno guardando immediatamente il testo.
Indipendentemente dal numero di campane e fischietti che hai inserito in un sito Web, tutti si affidano al testo per realizzare qualsiasi cosa stiano visitando il sito .
Solo questo dovrebbe rendere la tipografia, l'arte di organizzare il tipo, una priorità per qualsiasi web designer.
In questo articolo daremo un'occhiata a 10 semplici regole da tenere a mente quando si progetta il tuo prossimo progetto web.
1. Leggi il testo da solo
Con un design simile JonesingFor un designer senza una grande conoscenza del testo avrebbe faticato a mettere insieme la tipografia che rende questo sito davvero funzionante. Mentre affronti la tua tipografia, probabilmente non devi preoccuparti di scrivere il testo di un sito, ma devi leggerlo!
Alcuni web designer pensano che copiare e incollare semplicemente da un file di testo costituisca il totale dei loro doveri testuali. Ma leggere il testo fornisce almeno un'idea di base su come il testo può essere integrato in un sito Web, evitando la disconnessione tra la scrittura e il design di un sito web.
Puoi dare un calcio alla tua tipografia ancora un'altra tacca, se riesci a leggere il testo una volta inserito nel tuo progetto. Prendi nota speciale dello spazio intorno alle lettere . Avete spazi insolitamente grandi che sembrano strani? Una piccola tipografia attenta può eliminare questi problemi. Puoi anche avere un'idea di linee che potrebbero essere troppo lunghe per leggere facilmente, interruzioni di riga imbarazzanti e problemi simili.
2. Scarta Lorem ipsum il prima possibile
Pensi che potresti aver progettato Sito web di Jesus Rodriguez Velasco senza il testo attuale? Il sito è fortemente dipendente dalla parola scritta e anche da parole molto specifiche. Anche il testo del corpo ha avuto un'attenzione particolare con un capolettera e qualche altro tweaking che non sarebbe stato possibile con Lorem ipsum.
A meno che il testo del tuo sito Web sia effettivamente Lorem ipsum, il testo fittizio non avrà alcuna somiglianza con la realtà . Ciò significa che qualsiasi modifica che potresti apportare al testo - o il disegno che la circonda - dovrà aspettare fino a quando non otterrai la cosa reale. Chiedere (e ottenere) il testo dal tuo cliente il prima possibile nel processo ti darà la possibilità di abbinare il tuo design generale e la tua tipografia.
3. Mostra una gerarchia chiara
Quando arrivi a Rik Cat Industries , sai immediatamente dove dovresti iniziare a leggere. Anche se ci sono alcuni link nella parte superiore della pagina, il benvenuto di Rik attira l'attenzione per primo. È molto più grande, usando la tipografia per stabilire una chiara gerarchia .
Ogni sito ha bisogno di una gerarchia ben sviluppata: indicatori di dove iniziare a leggere e come procedere. La tua tipografia può fornire quella gerarchia - proprio come fa Rik - purché tu conosca il tuo ordine gerarchico prima del tempo. Pensando alle dimensioni e ai caratteri tipografici, puoi evidenziare un testo come titolo in un modo che il posizionamento diverso nel disegno non può fornire.
La gerarchia del tuo design va oltre la semplice tipografia che utilizzi, ovviamente, ma poiché gli utenti iniziano quasi sempre con il testo, è logico che i progettisti facciano lo stesso.
4. Presta attenzione alla macro e alla micro tipografia
Basandosi interamente sulla tipografia per la loro prima pagina, il Crowley Webb and Associate's Il sito Web è stato progettato tenendo presenti due fattori: la macro e la micro tipografia .
La tipografia macro è la struttura complessiva del tuo tipo, come appare nel contesto del tuo design e la sua estetica quando consideri il tuo testo come un blocco a sé stante.
La tipografia micro è più interessata ai dettagli della spaziatura, i problemi che determinano se le parole sono facili da leggere. La micro tipografia è una necessità assoluta quando si tratta di mettere insieme un blocco di testo: se non è leggibile, non ha senso procedere. Crowley Webb and Associates hanno affrontato questa domanda sia attraverso un'attenta scrittura, sia estrapolando le parole che il sito avrebbe evidenziato.
Ma la macro-tipografia ti offre l'opportunità di rendere il tuo testo più che ben distanziato: è la possibilità di renderlo accattivante e parte del tuo intero design . La scelta di caratteri tipografici e colori su questo sito Web crea un intero vitale. Ignorare entrambi gli aspetti della tipografia è dannoso.
5. Presta attenzione ai colori del tipo
Sarebbe così facile perdere testo in background ArtofElan , in particolare il rosso acceso sulla combinazione rosso scuro utilizzato dal designer. Quando un web designer lavora con il tipo colorato, la cura è assolutamente necessaria, non c'è alcuna garanzia che sia visibile una combinazione rossa su rosso o anche una combinazione gialla su rosso . Dopotutto, tutti hanno visitato un sito Web in cui il testo sembrava essere solo una sfumatura rispetto al colore di sfondo e si è preoccupato di un occhio quando hanno provato a leggerlo.
La soluzione più semplice per questa situazione è assicurarsi che il colore del tuo tipo sia drasticamente diverso da quello del tuo sfondo . Il bianco e nero funziona così bene perché sono così drasticamente diversi da quello che si può ottenere, ma ci sono alcune combinazioni di colori che funzionano bene: qualcosa sulla falsariga di un blu scuro su un rosa chiaro porterà a termine il lavoro. Il testo invertito è piuttosto complicato ... mentre puoi lavorare con testo rosa chiaro su uno sfondo blu scuro, è più probabile che tu abbia un reclamo a riguardo.
6. Prendi sul serio il tuo CSS
Se il tuo CSS è solido, puoi spostarti tra le pagine del tuo sito web in modo trasparente, proprio come le diverse versioni di Hutchouse.com contare su diversi fogli di stile per creare effetti sorprendenti. Anche se non prendi le cose fino a Hutchhouse, i CSS possono aiutare a eliminare i problemi di tipografia amatoriale, come cambiare i caratteri tipografici e le dimensioni tra le pagine.
I CSS possono fornire una facile coerenza tra la tua tipografia e l'intero sito web . Se si è coerenti nel modo in cui si utilizza il tipo, tuttavia, rompere quella coerenza anche di una piccola quantità può far risaltare qualsiasi cosa si voglia evidenziare, proprio come stabilire e poi rompere una griglia può creare un design efficace. Nella tipografia web, mantenere coerenti i caratteri può essere una semplice questione di CSS.
7. Abbandona il testo centrato
Scegliere un'alternativa al testo centrato può rendere facile la lettura di un sito Web , proprio come DesignCanChange.org . Optare per il testo centrato, specialmente su una pagina come questa, renderebbe una pagina problematica: i bordi frastagliati dei bordi creano da ogni lato lo rendono molto più difficile da leggere e ci sono molte opportunità per il testo perfettamente centrato che finisce per distorcere il resto di i tuoi disegni su display diversi.
In alcuni cerchi, il tipo centrato è solo un gradino rispetto all'utilizzo di Comic Sans in un design di siti Web. Potresti considerarlo come titolo, ma in generale, allineare il testo a sinistra renderà i tuoi lettori molto più confortevoli, a meno che non leggano da destra a sinistra .
8. Gestisci citazioni intelligenti e altri simboli
Luigi Ottani il sito mostra quali attenzioni alle virgolette e agli altri simboli ti verranno incontro: una completa mancanza di problemi quando il sito visualizza quei simboli. Molti siti Web sono costellati da simboli che un browser non può visualizzare. È un'eredità del fatto che la maggior parte del testo con cui un web designer lavora è stata probabilmente scritta in Microsoft Word o in un altro software di elaborazione di testi che fa ogni sorta di piccole modifiche al testo senza che lo scrittore presti molta attenzione.
Uno dei peggiori cambiamenti sono le virgolette intelligenti: le virgolette ricce sostituiscono automaticamente le virgolette semplici . Un altro problema si presenta quando lavori con testo scritto in un'altra lingua: accenti e umlati possono causare altrettanti problemi della disponibilità di Word. Se copi e incolli testo con tali modifiche nel tuo progetto, probabilmente dovrai tornare indietro e correggerli in seguito, almeno per alcuni browser web.
Piuttosto, portali presto nel processo di progettazione in modo che tu possa concentrarti sul rendere il tuo testo più adatto al tuo design . Se vuoi che quei simboli fantasiosi e le citazioni intelligenti vengano mostrati nella progettazione finale, fai uscire le tue entità HTML.
9. Pianifica il tuo testo per ingrandirlo
Quando aumenti la dimensione del testo Veerle Pieters ' sito web, non è altrettanto bello che se si utilizza la dimensione del carattere che ha scelto. Tuttavia, è ancora possibile leggere tutto, individuare collegamenti e così via, qualcosa che è vero per pochi siti web.
Questo perché, in parte, molti progettisti si assicurano di disporre il testo in caratteri a 10 punti o anche più piccoli. La maggior parte delle persone è a suo agio nel leggere questi tipi di carattere, ma i Baby Boomers costituiscono una vasta sezione della popolazione che naviga sul Web e molti di coloro che invadono i navigatori del Web avranno i loro browser impostati per visualizzare il tipo più grande che possono . Il tuo testo, così come il tuo design, deve essere in grado di adattarsi a questo fatto.
Vale anche la pena tenere conto del fatto che le dimensioni del browser possono variare notevolmente , spostando il testo in posizioni inattese se non si presta attenzione. Se l'aumento di dimensioni di un punto crea problemi, quella demografica precedente passerà rapidamente al sito Web successivo. Dovendo scorrere per sempre di lato avrà un risultato simile.
10. Mostra una preferenza per sans serif
Se guardi il A List Apart's sito web, praticamente ogni grande blocco di testo è impostato in un carattere di tipo sans serif, rendendo molto più facile la lettura. Titoli e altri blocchi di testo più piccoli sono disposti in caratteri serifati, creando un equilibrio tra i due.
Quando si tratta di disporre il testo su uno schermo, i font sans serif sono quasi sempre la soluzione migliore , specialmente se si sceglie un font come Verdana che è stato progettato per la visualizzazione sullo schermo di un computer. I font serif hanno una maggiore possibilità di visualizzazione scadente, di essere sfocati o addirittura pixelati.
Non è possibile evitare del tutto i serif, ovviamente. Ma soprattutto per i grandi blocchi di testo, l'utilizzo di un font senza grazie può offrire un ulteriore livello di garanzia che i visitatori saranno in grado di leggere facilmente il testo di un sito. Quando scegli i font per un progetto, controlla prima le opzioni sans serif .
Un commento finale
La tipografia è facilmente trascurata e, anche quando un designer la prende in considerazione, è facile scrivere come attività che richiede molto tempo e con pochi guadagni. Ma passare anche solo pochi minuti con il testo che sarà il fulcro del tuo design può trasformarlo da qualcosa che qualsiasi web designer potrebbe schiaffeggiare su una pagina a un elemento che supporta il resto del design.
Scritto esclusivamente per WDD entro giovedì Bram.
Segui queste regole e altre? Si prega di condividere le vostre opinioni qui sotto ...