Share
La tipografia è un elemento fondamentale in qualsiasi progetto su cui lavori. Il motivo principale per cui abbiamo siti Web in primo luogo è la visualizzazione delle informazioni e il loro utilizzo da parte degli utenti che si imbattono in esso. Mentre ci possono essere molti altri elementi per un sito Web, il contenuto principale è il contenuto. Quel contenuto deve essere facilmente letto, digerito, capito e avere una solida base tipografica aiuterà solo con quello.
Iniziare con la tipografia è probabilmente una delle parti più accessibili del design dell'apprendimento, semplicemente perché è facile cambiare e giocare con il testo per ottenere risultati immediati. Tuttavia, affinare le tue abilità tipografiche in modo da poter progettare qualcosa che funzioni bene ed è efficace, sia leggibile e utile per i tuoi utenti, è più di una sfida.
Prima di tutto, otterremo alcuni termini tecnici di base. Questo è solo un breve riassunto di alcuni dei termini più comuni che incontrerai quando lavori con la tipografia, e ci sono guide molto più complete sul web o nei libri se vuoi saperne di più.
Questo primo termine è uno che fa inciampare la maggior parte delle persone. carattere tipografico descrive le forme delle lettere progettate. UN font è il veicolo che contiene il carattere tipografico. Scaricare e installare un pacchetto di font per utilizzare un carattere tipografico all'interno del progetto.
Puoi tranquillamente pensare che ci siano due classificazioni di tipo principale: serif e sans serif. Serif i caratteri tipografici hanno un aspetto un po 'più classico, spesso con piccoli gesti o abbellimenti (serif) in cui terminano le lettere.
Esempi di caratteri serif includono Times New Roman, Baskerville e Georgia. Sans serif i caratteri tipografici mancano degli abbellimenti serif, invece sembrano un po 'più moderni. Esempi di caratteri sans serif includono Helvetica, Arial e Futura.
Esaminiamo brevemente l'anatomia di una forma di lettera.
L'ascender è qualsiasi parte di una lettera minuscola che si estende al di sopra dell'altezza x della lettera. Avrai familiarità con le lettere che hanno ascender come b, d, f, h, k, l.
Un discensore è qualsiasi parte di una lettera minuscola che si estende sotto l'altezza x della lettera. Ad esempio g, j, p, q, y.
In una lettera, un contatore è lo spazio negativo racchiuso (o parzialmente chiuso) all'interno di una lettera. Le lettere comuni con i contatori includono b, d, e, o, s.
Come abbiamo accennato, i serif sono i gesti e gli abbellimenti extra che puoi vedere quando si distingue tra gli stili di caratteri serif e sans serif.
La linea di base è una linea invisibile su cui siedono tutti i personaggi. Questa linea di base può variare in modo massiccio tra diversi tipi di caratteri, ma di solito è sempre coerente all'interno di un singolo carattere tipografico.
L'altezza del cappuccio è la distanza dalla linea di base alla cima delle lettere maiuscole.
L'altezza x è l'altezza della parte principale delle lettere minuscole (o almeno l'altezza della x minuscola, da cui il nome). Questa altezza non include l'altezza di ascensori o discensori aggiuntivi.
Un glifo è un singolo carattere all'interno di un font. Questi includono qualsiasi simbolo o lettera, attraverso i glifi extra che possono essere disponibili per te che non corrispondono a nessuno dei simboli o lettere più comunemente noti o usati.
... dovresti pensare a:
Quando lavori con la tipografia (e questo potrebbe sembrare ovvio) dovresti considerare la dimensione del testo con cui lavorerai.
Con tutte le tendenze di design che ci sono, ci saranno anche le tendenze su quanto piccolo o grande dovrebbe essere il testo. Pensa, ad esempio, al pubblico previsto; il tuo pubblico è un pubblico più giovane o più vecchio, avranno bisogno di una dimensione del testo più grande?
Pensa anche a come le dimensioni del testo avranno un impatto sulla progettazione del tuo sito. Vuoi che si concentri sulla tipografia, o hai altri abbellimenti e elementi di design che vuoi includere che possono influenzare il modo in cui la tipografia si trova nel design?
Il contrasto influenza enormemente la leggibilità di un blocco di testo. Quando parliamo di contrasto ci sono due cose fondamentali da tenere a mente.
In primo luogo, vuoi garantire che il contrasto tra il testo e lo sfondo sia abbastanza forte da risultare evidente. Pensa all'accessibilità qui - tornando a parlare dell'accessibilità dei colori nel design, lo stesso vale per il tuo testo. Se non sei sicuro che il tuo testo abbia o meno il contrasto sufficiente, usa uno strumento come lo strumento del rapporto di contrasto di Lea Verou per aiutarti.
Devi anche essere consapevole delle scelte dei caratteri che fai. Molti tipi di carattere con pesi molto sottili potrebbero non essere visualizzati correttamente in determinate dimensioni e potrebbero essere più utili per caratteri più grandi o titoli di visualizzazione. Prova anche a garantire che i caratteri o i caratteri che hai scelto abbiano un buon supporto per browser e sistema operativo. Alcuni tipi di carattere e caratteri tipografici possono funzionare bene su una piattaforma, ma appaiono e funzionano terribilmente su un altro.
Quando lavori con la tipografia, come con qualsiasi altra parte del tuo disegno, vuoi assicurarti di dare abbastanza spazio per respirare e che il contenuto parli da solo.
Il contenuto del tuo sito web è l'esperienza di base che gli utenti devono offrire. A parte tutti gli altri elementi di design, tutti i tuoi utenti veramente bisogno di vedere è il contenuto. Per questo motivo, non aver paura di dare più spazio al contenuto e lasciare che i tuoi contenuti parlino di più.
Lo spazio negativo è lo spazio o le lacune che rimangono attorno agli elementi di un disegno; non aver paura di lasciare questo spazio negativo attorno al tuo contenuto.
Non dimenticare inoltre lo spazio attorno a ogni parte del tuo testo. Consentire una generosa altezza della linea che non renda il testo stretto e più difficile da leggere. Come regola generale (anche se sentiti libero di giocare con questo), un altezza della linea che va almeno dal 140% al 160% delle dimensioni del testo dovrebbe funzionare bene e offrire un buon equilibrio per il testo.
Una gerarchia tipografica si riferisce a come il contenuto è disposto nel tuo progetto.
Stabilire una buona gerarchia dei contenuti inizia all'inizio, quando lavori per creare una buona struttura all'interno dei tuoi contenuti. La gerarchia tipografica funziona quindi con i tuoi contenuti, da intestazioni a paragrafi normali e parti del contenuto che desideri enfatizzare, per aiutare a formare una struttura che gli utenti possano navigare facilmente.
L'impatto che una gerarchia ha sul tuo progetto può essere enorme. Dovresti fare in modo che il percorso dei tuoi utenti per trovare il contenuto che stanno cercando sia il più semplice possibile e stabilire una solida gerarchia produrrà solo effetti positivi.
Puoi stabilire una buona gerarchia tipografica visiva in vari modi, incluso l'uso del colore o di varie dimensioni del testo per creare enfasi e struttura nei tuoi contenuti. Tutti i suggerimenti precedenti ti aiuteranno a stabilire una gerarchia tipografica migliore, anche se è qualcosa che verrà sempre con la pratica.
Discuteremo più avanti con i caratteri web in questa serie, ma quanto segue dovrebbe essere una solida introduzione alle possibilità dei caratteri web.
Oggi siamo davvero fortunati ad avere molte opzioni per l'implementazione di caratteri web sui nostri siti Web e, con l'uso più comune dei caratteri Web sul Web (supportato da un migliore supporto browser globale), possiamo essere più creativi negli stili tipografici e nei disegni che possiamo includere nei nostri disegni.
Oltre ad essere in grado di ospitare i tuoi font usando @ font-face, ci sono molti servizi online disponibili per aiutarti a usare più font online, tra cui:
e molti, molti altri. Anche siti come FontShop o MyFonts (che si limitavano a vendere solo font desktop) ora stanno entrando nel mercato dei font Web, offrendo font scaricabili che è possibile utilizzare con la tecnica @ font-face.
Avendo coperto le basi della tipografia, nel prossimo articolo daremo un'occhiata al ritmo verticale. Non dimenticare che puoi anche immergerti nella nostra sessione in corso L'A-Z della tipografia Web per maggiori dettagli su uno qualsiasi di questi punti.
Accentsconagua