Share
La tipografia è un campo enorme. Le persone dedicano anni della loro vita a questo antico mestiere, eppure c'è sempre qualcosa di nuovo da imparare. In questo articolo, esaminerò i punti principali che dovresti prendere in considerazione quando selezioni un carattere tipografico per un sito web.
Tutorial ripubblicatoOgni poche settimane, rivisitiamo alcuni dei post preferiti del nostro lettore da tutta la cronologia del sito. Questo tutorial è stato pubblicato per la prima volta nell'ottobre del 2010.
Quando progetti per il web, devi accettare che il contenuto cambierà. È semplicemente fuori questione prendere il tempo per kern (regolare lo spazio tra le singole lettere) di ciascun titolo su un enorme sito web. In altre parole, rinunci al controllo.
Quello su cui mi concentrerò oggi è tipografia pratica. Per me, questo significa accettare che non avrai mai il controllo totale sul tipo sui tuoi siti web. Scegliendo un carattere tipografico, decidendo su una dimensione, queste sono tutte cose in cui noi, in quanto designer, abbiamo voce in capitolo. La tipografia pratica significa imparare come e, soprattutto, perché aggiustare ciò che controlli. Iniziamo.
Cosa fai con il tipo? Leggilo! Quindi, perché così tanti siti web rendono così dannatamente difficile farlo? Che si tratti di dimensioni minime dei caratteri, altezza della linea stipata o semplicemente brutti caratteri, sembra che molti siti là fuori siano determinati a non farti godere dei loro contenuti!
Rendendo il tuo tipo leggibile, fai immediatamente un salto in avanti di almeno la metà della competizione, che è una fortuna, davvero, perché non è così difficile!
Al momento di decidere quale carattere tipografico usare sul tuo sito web, è importante ricordare: non pensarci sopra. So che molti designer odiano l'uso di Helvetica, perché è molto usato. Sono d'accordo con questo, ma c'è un pezzo di informazione molto importante che questa affermazione lascia fuori: perché. La gente abusa di Helvetica perché è giusta così dannatamente bene. Si adatta perfettamente a qualsiasi design immaginabile, funziona bene sia in dimensioni ridotte che grandi.
Mentre può andare contro le tue convinzioni per impostare il tuo tipo in un volto così abusato, se funziona, allora vai a farlo.
La tua copia del corpo è probabilmente la parte del tuo disegno che deve essere più leggibile, quindi assicurati di scegliere un font che funzioni bene in piccole dimensioni. Cosa intendo con questo? Se riesci a impostare la tua copia su 10px e riesci ancora a capire cosa dice, allora è una buona indicazione che hai scelto un carattere leggibile.
Quello copre la copia del corpo, ma per quanto riguarda i titoli?
La leggibilità nei titoli di grandi dimensioni è molto più facile da capire rispetto alla copia del corpo. Se riesci a capire ciò che dice immediatamente, allora è abbastanza leggibile.
Quello che va bene per i caratteri tipografici è che una volta che hai lavorato su un numero sufficiente di progetti, avrai una buona idea di cosa funziona e cosa no. Da lì, sarete in una posizione migliore per fare scelte critiche sui font.
Non c'è una formula per scegliere i caratteri giusti per il tuo sito web. Spesso, il modo migliore per decidere su uno è semplicemente provare ogni font che ritieni possa funzionare, quindi confrontare. Scegliere i font è davvero un istinto, ma è importante ricordare che il 90% delle volte, un utente non penserà a quale carattere viene utilizzato, quindi se è leggibile, allora è abbastanza buono.
C'è raramente (se mai) una situazione in cui solo uno il carattere tipografico è appropriato per l'uso in un sito. Il sito web medio ha un sacco di testo. Non c'è modo che un carattere tipografico funzioni per tutti loro! La stragrande maggioranza dei siti Web ben progettati utilizza due caratteri tipografici: uno per la copia del corpo e uno per i titoli.
Quando si sceglie un paio di caratteri, la cosa più importante da considerare è il modo in cui lavorano insieme. "Sono abbastanza simili?" "Troppo simili?" "Non abbastanza diversi?" Tutte domande che dovresti porci. Trovo che il modo migliore per scegliere un paio di font che funziona sia metterne un po 'fianco a fianco e decidere il meglio. Non c'è modo di sapere qual è il migliore finché non li hai provati tutti.
A volte, la cosa più appropriata sarebbe due sans-serifs, mentre altre volte, vuoi una sans per i titoli e un serif per la copia del corpo. Non importa in particolare se sembrano simili, ciò che conta è se loro agire in modo simile. Questo ovviamente dipende dal resto del tuo design. Indipendentemente dal tipo di carattere che scegli, devi trasmettere il tuo messaggio con forza, e se ciò significa avere caratteri di tipo contrastanti, allora scegli quello.
Simon Collison utilizza l'abbinamento dei font in modo eccellente sul suo sito, scegliendo un forte sans-serif per i titoli principali e un semplice Serif per gli altri titoli più piccoli, oltre che per la copia. Questa partnership mostra in modo esperto il messaggio che il sito Web sta cercando di dire, in un modo che ciascun font non potrebbe esprimere singolarmente.
Come regola generale, ai progettisti piace impostare la copia del proprio corpo almeno a 12px. La maggior parte, tuttavia, ha scelto una dimensione maggiore come 14px, che è ancora migliore per la leggibilità. Il dimensionamento dei caratteri è davvero abbastanza facile da decidere per la copia del corpo, ma sono i titoli che iniziano a complicarsi.
Quanto dovrebbero essere grandi i tuoi titoli? Dipende. Nella mia osservazione e creazione di siti Web, sono giunto alla conclusione che un titolo dovrebbe essere grande quanto deve essere. Ciò significa che dovresti provare diverse dimensioni finché non ne trovi una abbastanza grande da attirare l'attenzione che vuoi, ma non più grande, a meno che non sia un testo enorme quello che stai cercando, nel qual caso vai avanti.
La natura di un titolo è grande. È un elemento importante nella pagina, quindi naturalmente dovrebbe essere più grande, giusto? Sì e no. Sì, i titoli sono generalmente più grandi di altri elementi, ma no, questo non è l'unico modo per attirare l'attenzione su di essi. Colore, peso e posizione sono tutti ugualmente importanti per stabilire una chiara gerarchia visiva alle tue pagine.
Il punto chiave da ricordare sulla gerarchia visiva è che è tutto relativo. Il testo sul tuo sito deve solo risaltare rispetto all'altro testo sul tuo sito. Prendi il sito di Wilson Miner per esempio. I suoi titoli sono abbastanza piccoli per quanto siano importanti e sorprendentemente vicini. Tuttavia, il suo uso del colore distingue il titolo più importante e dà loro più significato.
L'uso del tipo è uno strumento molto importante per stabilire la gerarchia visiva, sia attraverso le dimensioni, il colore, il peso o persino il posizionamento.
In primo piano, o lo spazio tra le righe di testo, è uno strumento inestimabile per il testo leggibile. Una cattiva guida può rovinare un pezzo di copia altrimenti stellare, e un buon vantaggio può rendere leggibile anche il peggiore tipo. Fortunatamente, non è così complicato da implementare.
Usando il CSS altezza della linea proprietà, puoi facilmente assegnare spazio tra le tue righe di copia. In generale, per grandi blocchi di testo, 1,5 volte la dimensione del testo è di buone dimensioni. Il testo più piccolo dovrebbe avere una guida più stretta e un testo enorme dovrebbe avere molto. Non è così complicato, davvero.
Il tracciamento è lo spazio tra i caratteri nel testo. Devo ammettere che questa è un'area un po 'grigia quando si parla di "Tipografia pratica", in quanto il CSS non ci dà un enorme controllo su di esso. Di solito, non devi preoccuparti di questo per un testo di piccole dimensioni, è solo per i titoli che diventa un problema. In generale, aggiungendo letter-spacing: 1px; o letter-spacing: 2px; al tuo CSS dovrebbe essere abbastanza spazio tra le lettere.
Un altro posto in cui sarebbe utile aggiungere tracciamento è small cap. Qui è generalmente considerato una buona pratica aggiungere un pixel o due in più tra i personaggi, in quanto appaiono naturalmente più grandi.
Anche se non tipograficamente parlando, il colore è una parte molto importante del tipo di ogni sito web. Non sto parlando combinazioni di colori, ma piuttosto sul contrasto necessario per assicurare la leggibilità sul tuo sito. Il testo nero su sfondo bianco (o sfondo chiaro) è ampiamente considerato il colore più leggibile per il testo.
Non sto dicendo che dovresti andare e impostare tutto su nero su bianco, solo che quando stai progettando, dovresti essere consapevole del contrasto del tuo testo. Potrebbe tornare a morderti se non stai attento.
A mio avviso, l'uso della griglia è l'idea più importante per la tipografia pratica sul web. Puoi avere ottimi caratteri, spaziatura e colori, ma se non hai un buon layout, potresti anche usare fumetti sans.
L'utilizzo di una griglia durante la progettazione con il tipo fornisce un chiaro equilibrio e una struttura geometrica al tuo progetto. Non è la soluzione magica per un cattivo design, ma se si progetta con una griglia fin dall'inizio, si può essere certi che, per lo meno, il layout sarà solido.
Quindi cosa ha a che fare una griglia con la tipografia? In poche parole: qualunque cosa. La griglia incarna tutti gli ideali fondamentali della tipografia. È geometrico, coerente, utilizzabile e soprattutto: bellissimo.
Impostare il tuo testo con una griglia è un modo fondamentale per stabilire la gerarchia visiva, ed è un grande indicatore di quanto grande (o piccolo) dovrebbe essere il tuo testo.
Come ho detto prima, se la tua tipografia è leggibile, allora sei già al di sopra del 50% della concorrenza, quindi per quanto riguarda l'altra metà? Se sei arrivato così lontano, insieme lasciamo le chiare e coerenti regole di leggibilità e entriamo nel mondo oscuro e misterioso dell'essere unici.
Vuoi che il tuo sito web si distingua? Passaggio 1. Utilizzare una tipografia unica. Presumibilmente per te questo significa usare alcuni caratteri unici. Ma cosa rende un font univoco? Per me, non è uno che non viene usato spesso, ma uno che ha un messaggio o un sentimento non utilizzato da altri volti.
La scelta di un font univoco riguarda davvero il sensazione. Questo font sentire diverso? O sembra solo diverso? Quando scegli i caratteri per qualsiasi progetto, dovresti sempre considerare la sensazione del design. Poiché si tratta di un'opinione totalmente personale, non posso aiutarti a trovare un carattere tipografico unico. Quello che posso fare è mostrare un esempio di caratteri univoci.
Il Design Cubicle ha un logo e un design davvero unici. È forte ma elegante, accattivante ma sottile. Quando guardo il suo design, la sensazione di classe trasuda dal sito. Dice: "So cosa sto facendo".
Quanti siti web conosci il cui logo è grande quanto il contenuto? Che ne dici di un titolo ultrasottile? A differenza del mio ultimo punto, essere non ortodossi significa vedere quello che fanno gli altri, e poi fare il contrario.
I ragazzi di Savvy Belfast sono intelligenti. Notarono l'angusto aspetto della maggior parte dei siti Web e decisero di sostituire tutta quella copia priva di significato con una sola affermazione.
Anche se visiti il loro sito solo per un momento, non puoi fare a meno di ricordare il loro nome.
La tipografia non è la propria cosa. Fa parte del web design come qualsiasi altro. Il tipo è importante, sì, ma non bisogna dimenticare che è solo una parte di ciò che rende grande un web design. Dovresti progettare il tuo tipo tenendo conto del resto del tuo design.
Se usi una texture di sfondo molto elaborata, allora forse un bel serif sarebbe buono per i tuoi titoli.
Il mio punto qui è semplice: non dimenticare il contesto. Il design è un campo enorme, e oggi ne sto parlando solo una parte. Per una progettazione di siti Web di successo, tutte le parti devono essere interconnesse correttamente. Questo è l'obiettivo: creare l'esperienza che qualcuno avrà sul tuo sito web. Non puoi farlo con basta digitare, o solo colore, o anche solo contenuto!
Gran parte dell'esperienza è definita da come ti senti: felice, triste, divertito, arrabbiato, bla bla bla. Gli umani hanno una vasta gamma di emozioni e, come designer, è nostro compito evocare queste emozioni con i nostri disegni.
Di tutte le cose di cui ho parlato oggi, questo è di gran lunga il più astratto, ed è un po 'difficile da spiegare. Invece di cercare di spiegartelo, lascia che te lo mostri.
Quando ho visitato per la prima volta Solid Giant, ho sorriso. Ho sorriso la prossima volta che l'ho visto, e anche la prossima volta. Immediatamente ho sentito un'affinità verso il design. Quella grande e sfocata "G" è semplicemente troppo adorabile per dimenticarla!
Francamente, penso che sia geniale.
Non c'è modo di insegnare il design emozionale, è qualcosa che devi sperimentare e poi giocare con i tuoi progetti.
Bene, hai raggiunto la fine del post. Spero che almeno tu abbia imparato qualcosa, ma in caso contrario, va bene anche questo. Se c'è una pensa che voglio lasciarti dopo aver letto questo, è soprattutto questo: essere leggibile. Il resto seguirà.
Quale pensi che sia la parte più importante della tipografia sul web? Lascia la tua opinione nei commenti!
Accentsconagua