() translation by (you can also view the original English article)
Se state imparando il web design da zero e volete migliorare significativamente la vostra conoscenza sulla tipografia, allora questo articolo è stato scritto per te. Ci occuperemo di caratteri tipografici, tipi di carattere, anatomia tipografica, gerarchia e come scegliere caratteri tipografici. Andrete ad imparare abbastanza per diventare pericolosi in poco tempo.
Argomenti
Come al solito per queste guide complete, andremo a coprire una significativa quantità di argomenti, tra cui:
- Il famoso 95%
- Caratteri tipografici vs font
- Classificazioni dei caratteri tipografici
- Anatomia tipografica
- Spaziature
- Segni di interpunzione
- Gerarchia
- Scegliere i caratteri tipografici
Il famoso 95%
Il web design è per il 95% tipografia! Non c'è nessun web design senza tipografia. Così, perché non migliorare le vostre abilità di progettazione web applicando una solida tipografia? C'è un mondo ricco pieno di lettere da esplorare, un mondo che si tramanda da generazioni di persone creative che hanno lavorato con la progettazione grafica e il design tipografico. Un altro incredibile Bianconiglio per tuffarsi.
Nei primi giorni del web design si è provato a seguire l'idea del graphic design, specialmente quello dei libri, giornali e quotidiani sono stati disposti e progettati In questi giorni, la progettazione per il web è maturata e non segue questi concetti così strettamente come faceva una volta. Responsive web design è un esempio dove la progettazione ha chiaramente maturato al di fuori mondo della carta stampata in molti, molti modi. Il rovescio della medaglia è che questo ha anche portato a maggiore complessità — qualcosa che sembra essere sempre crescente. Lontano dall' essere minaccioso, questo è molto eccitante e le possibilità non sono solo in crescita, ma le opzioni sono oggi già vaste e eccezionali. Il web è cresciuto — un po' — e il futuro sembra luminoso!
Comunicazione
La tipografia è più efficace di qualsiasi altra cosa quando si trasporta il tuo messaggio sul web. Certo, la grafica può supportare e valorizzarla,le icone anche, ma la comunicazione agli utenti avviene principalmente attraverso la parola scritta — in contrasto con il mondo della pubblicità, dove immagini e grafica possono trasmettere intere storie in maniera molto più facile, anche senza usare molte parole scritte in un linguaggio per tutti
Sul web, stiamo parlando di pagine, siti Web e la maggior parte delle interfacce. Si occupano principalmente di elementi grafici per questo hanno dimostrato difficoltà, spesso sono inefficaci, ambigui e non adatti per il mercato di massa.
In questo esempio da Dropbox si dimostra che la grafica da sola non raggiungere lo stesso livello di comunicazione e quando è da sola è alla meglio ambigua.
Caratteri tipografici vs Fonts
"Caratteri tipografici" sono raccolte di lettere, numeri e segni di punteggiatura che formano insiemi di stili per un alfabeto. Pensate ai caratteri tipografici come una famiglia in cui i membri condividono scelte progettuali comuni, mssono variare in peso e stili. Bodoni o Gotham, ad esempio, sono caratteri tipografici.
Progettazione di un carattere tipografico.
Sono considerati "Fonts" un sottoinsieme di un carattere tipografico. Essi sono i set di caratteri fisici (o digitali) di un particolare carattere tipografico in un particolare peso e stile. Open Sans Light è un tipo di carattere; un file che si utilizza sul tuo sistema.
Fai un font.
Classificazioni tipografiche
Il tema della classificazione per caratteri tipografici è molto più vasto di quanto si possa pensare in un primo momento — soprattutto le sottoclassificazioni. Gli elementi essenziali per iniziare sono pronti per afferrare il significato, diamo un'occhiata ad alcune classificazioni che dovete assolutamente sapere.
Caratteri Serif
Caratteri Serif sono chiamati le piccole estensioni, dettagli decorativi, alla fine di alcuni tratti: grazie.
I caratteri Serif sono i caratteri più antichi dei quali discuteremo in questo articolo. La tipografia non è una scienza esatta, ma parliamo di argomnti che possono eseere fatti risalire già a partire dai romani nella scultura in pietra di lettere, utilizzando l'alfabeto latino. C'è anche una interessante teoria che dice che siano il risultato dell'utilizzo di scalpelli nell'intaglio di pietre e sono stati una scelta artistica a causa di strumenti utilizzati per creare un risultato finale migliore.
I caratteri con le grazie sono spesso utilizzati per lunghi pezzi di testo come il body copy. L'evidenza sul loro essere "più facile da leggere" è poco convincente, tuttavia, si parla spesso di questo. I serif funzionano bene in un ambiente classico e vecchia scuola, ma può funzionare altrettanto bene in un ambiente moderno, se usato correttamente.
Serifs sono tuttavia una scelta eccellente per le intestazioni pure. Le intestazioni utilizzate dal The Washington Post sono un perfetto esempio di utilizzo di un serif per trasmettere un certo stile di tradizione e qualità, mentre il body copy sans-serif lo fa apparire moderno pur rimanendo altamente leggibile.
Caratteri tipografici Sans Serif
Nei caratteri tipografici "Sans-serif" mancano le estensioni di serif.
Il Sans Serif è aumentato di popolarità nel 1920. Sono stati progettati per un aspetto moderno, industriale e fatti a macchina; ideale per l'industria della pubblicità e del movimento Art Déco del tempo.
Semi Serif Typefaces
"Semi serifs" incorpora entrambe le caratteristiche dei caratteri serif e sans serif.
Slab Serif Typefaces
"Slab serifs" sono simili ai serifs, ma sono molto più spessi e di natura più accattivante.
In passato, sono stati spesso utilizzati per le macchine da scrivere per assicurarsi che fosse creato un sufficiente contrasto nella pagina. Nei primi tempi, le macchine da scrivere non riuscivano a stampare le lettere in maniera costante sulla pagina, ciò dipendeva dalla pressione e dalla freschezza dell'inchiostro Un serif più sottile era meno efficace per la tipologia della macchina. Ben presto l' industria pubblicitaria ebbe necessità di qualcosa di nuovo che attirasse l'attenzione, così fu fatto un largo uso del slabs.
Font calligrafici
Caratteri tipografici "Script" spesso emulano l'aspetto del testo scritto a mano, imitando fluidità e spessore variabile. Loro aspetto è più casual e informale, spesso danno la sensazione di qualcosa di artigianale e personale. Gli script sono in genere molto decorativi e raramente sono utilizzati per più paragrafi di testo (si spera).
Caratteri tipografici monospace
Come suggerisce il nome, ogni lettera e punteggiatura carattere di tipo "monospace" occupa la stessa larghezza orizzontale. Gli altri typefaces che abbiamo percorso fin ora hanno tutti caratteri di larghezza variabile; Questi sono conosciuti come caratteri tipografici proporzionali.
Le macchine da scrivere, i primi computer e terminali hanno usato molto spesso il tipo a spaziatura fissa. l'Hardware di allora non rispondevano alle esigenze per le larghezze variabili di altre famiglie di caratteri. Oggi gli editor di testo per la scrittura di codice offrono ancora i font a spaziatura fissa come impostazione predefinita. Niente parla di "hacker" in modo più chiaro rispetto al codice scritto in spaziatura fissa. Negli ultimissimi anni è diventato anche molto popolare tra i designer.
Anatomia tipografica
Passiamo ora ad alcune delle più importanti caratteristiche anatomiche dei caratteri.
Non ci dobbiamo preoccupare molto delle minuzie qui descritte, il vostro lavoro di designer è quello di essere creativi nell'utilizzo dei caratteri, non quello di recitare ogni piccolo dettaglio di come sono composti. Si tratta di quello che fate, che cosa ottenete quando mettete caratteri tipografici a "lavorare". Quindi il mio consiglio è semplice, comprendere e memorizzare le nozioni di base, divertirsi, giocare con i caratteri tipografici e immergersi nel corso del tempo. Non c'è niente di sbagliato con il non conoscere ogni singolo dettaglio sull'anatomia dei caratteri! D'altra parte, su questo discorso forse sono eccessivamente pragmatico. Decidete voi!
Baseline
La baseline è la linea su cui sono collocati la maggior parte dei caratteri.
Mediana
La mediana è d'altra parte il soffitto per la maggior parte delle lettere minuscole.
X-Height
Lo spazio tra la base e la mediana è ciò che noi chiamiamo l'altezza x. Questo può essere visto come uguale all'altezza della lettera minuscola "x", da qui il suo nome. Maggiore sarà l'altezza x di un carattere tipografico, più leggibile sarà nelle dimensioni inferiori. La maggior parte del testo leggiamo nel mondo occidentale è composto da lettere minuscole, e come la maggior parte delle caratteristiche distintive che ci permettono di riconoscere le lettere e, di conseguenza, parole, può essere trovato in questa regione, l'x-altezza condiziona pesantemente la leggibilità.
Questo spazio in più dà al font un po' più opportunità di apparire meglio. Noi tendiamo a leggere in salti e consumare le lettere in modo rapido ed inconsciamente. L'altezza-x è quindi spesso buona per il corpo del testo dato che i paragrafi lunghi possono essere faticosi da leggere se gli occhi devono decifrare le lettere Parti del testo come i titoli in cui generalmente si usa utilizzare le dimensioni dei caratteri più grandi e in ogni caso più brevi quantità di testo, possono avere un x-altezza inferiore a quella ottimale. Avete più spazio per le scelte artistiche che implicano un certo stato d'animo o carattere senza compromettere troppo l'esperienza di lettura degli utenti.
Ascendente e discendente
L'ascendente è quella parte che si estende sopra la mediana, mentre il discendente è la parte di un carattere che si estende sotto la linea di base:
Contatore
I contatori sono aree che sono parzialmente o completamente chiuse. Pensate a una "o" o una "a". La "a" per esempio ha due contatori: uno che è parzialmente chiuso ed uno che lo è completamente . I Caratteri con grandi contatori di solito sono anche di buona leggibilità perché i dettagli hanno più spazio per essere mostrati in modo chiaro. Quindi cercate caratteri tipografici con grande altezza e grandi contatori se siete interessati nel dare agli utenti un'esperienza di buona lettura.
Spaziature
Esaminiamo ora alcuni tipi differenti di spaziatura quando si tratta di tipografia.
Interlinea
L'interlinea è lo spazio tra due linee di base conseguenti. Nella stampa, è molto importante creare un ritmo verticale coerente — la griglia della linea di base — un sistema di griglia mini per il carattere su una pagina. Sul web, questo tipo di precisione è notoriamente difficile da raggiungere.
La griglia della linea di base
Gli ambienti responsive rendono l'applicazione delle griglie della linea di base ancora meno attraenti, quindi probabilmente il vostro tempo potrebbe essere investito meglio in questioni più pragmatiche.
Una buona interlinea dei paragrafi sul web si trova solitamente fra 1.3-1.6 (che è proporzionale alla dimensione del font). I titoli possono e dovrebbero essere un po' più stretti. Un buon punto di riferimento da tenere a mente è che i lettori dovrebbero essere in grado di passare facilmente all'inizio della riga successiva. Non volete caricare gli utenti con una sorta di sovraccarico mentale, avendo bisogno di guardare concentrati su dove dovrebbero continuare a leggere quando raggiungono la fine di una riga di testo.
I diversi gradi dell'interlinea possono anche (stranamente) avere un impatto sul colore del vostro testo. Le interlinee più strette appaiono più scure poiché è ridotto il microspazio bianco tra le righe di testo — e viceversa naturalmente. Trovare un equilibrio in modo che il testo che sembra coerente, chiaro e leggibile è il vostro obiettivo mentre regolate questa spaziatura. Leggete il testo, usate del testo reale non il finto ipsum e vedete come ci si sente. È una buona esperienza di lettura? Questo dovrebbe essere in prima linea nella vostra mente — sempre!
Lunghezza della riga / misura
Entrambi questi termini significano la stessa cosa: il numero dei caratteri in una singola riga di testo. Una buona misura per il design sul web si trova tra 60-85 caratteri. La lunghezza della riga e l'interlinea sono in qualche modo simbiotiche e dipendono l'una dall'altra. Maggiore è la lunghezza della riga di cui ha bisogno un paragrafo, maggiore è l'interlinea che deve essere inserita.
Se sembra troppo stretto o troppo elastico, regolatela fino a quando non è leggibile e "sembra" giusta.
La crenatura
La crenatura si riferisce alla regolazione del microspazio bianco variabile tra le singole lettere. Questo è concepito in modo diverso da ogni tipo di design, in conformità con le esigenze di ogni lettera. Una "o" minuscola potrebbe occupare meno spazio di una "t" minuscola per esempio. Sul web questo è noiosa da regolare mentre la pratica della crenatura è molto diffusa nel settore della stampa.
Sul web è possibile applicare la crenatura basandosi sui dati integrati negli stessi caratteri. Questa è una caratteristica che può essere innescata con le proprietà del CSS text- rendering o font-feature-settings. Tenete a mente che il supporto è tutt'altro che diffuso a questo punto.
La spaziatura tra le lettere / Avvicinamento
Si riferisce alla spaziatura uniforme tra tutte le lettere in un gruppo. E non è destinata a singole lettere come la crenatura, ma è invece una regolazione uniforme che abbraccia l'intero passaggio del testo interessato, risultando in una maggiore o minore densità e consistenza.
Quando utilizzate parti di testo più grandi, per i titoli per esempio, un po' di spaziatura negativa tra le lettere può essere di grande aiuto. Non volete creare l'impressione che il testo si stia allontanando. Come con la crenatura, quando i caratteri tipografici sono progettati per essere utilizzati con dimensioni ridotte del font, la spaziatura tra le lettere potrebbe aver bisogno di questi aiutini poiché la crenatura originale è stata considerata in modo diverso.
Punteggiatura
Virgolette
Utilizzate le virgolette reali. Punto!
Le altre "virgolette" che vengono spesso utilizzate sono effettivamente virgolette — che devono essere utilizzate per pollici e piedi. Gli apostrofi e le virgolette singole hanno anche la loro controparte reale. Sì, è necessario fare qualche mossa di kung-fu con le dita sulla tastiera per ottenerli, ma il risultato finale vale lo sforzo. Per saperne di più:
Puntini di sospensione
I puntini di sospensione si riferiscono ai tre puntini che possono essere facilmente scambiati come tre singoli punti. La differenza è che hanno una maggiore spaziatura tra ogni punto. Potete utilizzare più spazio a sinistra e a destra, spetta a voi decidere.
Utilizzateli quando volete omettere del contenuto — parole, frasi, righe, paragrafi e parti di citazioni. È un segnaposto per indicare che avete omesso del testo.
Trattino
Non c'è nessuna necessità di spazi aggiuntivi vicino ai trattini. Il loro scopo principale è quello di collegare le parole insieme, come belle-arti, 8-anni e così via.
Sono l'unica scelta anche per i prefissi e i suffissi. Dovete anche usarli se bisogno di sillabare una parola: T-U-T-S-P-L-U-S. I periodi di tempo e lo spazio fanno anche parte del loro repository:
- 03:45-16:00
- 1938-1945
Per questi intervalli potete inoltre utilizzare il trattino breve.
Il trattino breve
Il trattino breve prende il nome dalla lunghezza della lettera minuscola "n". È un po' più lungo di un trattino ed è utilizzato sia per intervalli di valori anche che per le relazioni che per implicare relazioni come maestro-allievo. O per enfasi.
Il trattino lungo
Il trattino lungo è ancora che un po' più lungo, la dimensione della lettera maiuscola "m". Dovrebbero essere utilizzati per enfatizzare una pausa di pensiero e indicare che una frase è incompiuta. Entrambi i trattini possono apparire un po' più sottili di un trattino — solitamente. Per favore non utilizzate due trattini in casi dove i trattini brevi o lunghi sono più adatti. Nessuna delle due versioni dei trattini richiede uno spazio aggiuntivo intorno ad esso.
Lo so, questi dettagli di punteggiatura non suonano troppo accattivanti, ma questa conoscenza di base di come usarli correttamente dovrebbe essere importante per voi, se vi piace progettare con una buona tipografia in mente. Inoltre potrebbe sembrare banale avere tre tipi di trattini tra cui potete scegliere perché sembrano molto simili, ma d'altra parte, un sacco di attenzione e considerazione è stata riversata in questi anni e dobbiamo rispettare il lavoro dei progettisti che sono venuti molto prima di noi . E' il loro duro lavoro e il loro spirito pionieristico che rende così facile sviluppare oggi. Prestare attenzione a questi dettagli è un piccolo prezzo da pagare per stare sulle spalle dei giganti.
Gerarchia
È importante che trasmettiate una forte gerarchia all'interno della vostra tipografia. Perché? Perché come abbiamo stabilito all'inizio di questo articolo, la tipografia nella pagina rappresenta circa il 95% per cento del vostro design. Se avete una gerarchia debole all'interno del testo, non avrete la minima possibilità di creare una forte gerarchia nel progetto generale.
La tipografia vi offre diversi modi per dare ai vostri utenti delle ancore visive per navigare sul vostro sito il modo nel modo desiderato. Attraverso l'enfasi potete far loro sapere che cosa è più importante e a che cosa dovrebbero prestare attenzione per primo. Ecco alcuni modi per rafforzare il vostro lavoro in quel campo:
Colore
Se non avete molto colore su di una pagina, gli elementi che hanno un colore si distinguono davvero. Come sempre, meno è meglio. Poiché gli esempi seguenti utilizzano solo colori con parsimonia l'effetto è molto forte — anche senza aumentare le dimensioni o lo spazio vuoto aggiuntivo.
Dimensioni
L'aumento relativo del font-size attirerà sempre l'attenzione su alcuni elementi. La cosa che mi piace del variare le diverse dimensioni di un font è che è possibile creare facilmente delle "ancore" visive, che il lettore può usare per saltare su di una pagina. L'unica avvertenza è che dovete essere coerenti con l'utilizzo delle dimensioni del font per gli elementi particolari. Non potete cambiarlo a vostro piacimento dappertutto. Ciò che molto probabilmente indebolirebbe i vostri design molto di più dell'avere il testo di dimensioni uniformi.
Spazio bianco
Date a importanti elementi tipografici lo spazio per respirare. Se sono circondati da spazio vuoto sono semplicemente risaltati da questo. I nuovi arrivati sembrano rifuggire un po' dall'usare molto spazio tra gli elementi. Nella stampa questo può essere costoso, ma sul web avete queste cose gratis. Giocate, guardate cosa escogitano gli altri designer e rubate di tanto in tanto. Nessuna magia e nessuna scienza missilistica però. Solo un po' di esperienza è tutto ciò che vi serve — alla fine svilupperete un buon intuito.
Peso
Un'ampia famiglia di caratteri tipografici vi darà un sacco di pesi tra cui scegliere. In molti degli esempi precedenti potete vedere al lavoro pesi diversi per scopi diversi. Per me, questo non è qualcosa su cui salto subito e di solito provo prima gli altri strumenti per creare la gerarchia. Ma questa è una questione di gusto, tutto ciò che funziona meglio per voi e per i vostri progetti.
Screenshot
Nello screenshot della pagina "chi siamo" di Dropbox potete vedere che i nomi hanno un peso diverso rispetto ai loro titoli. Una tecnica molto semplice per creare enfasi.
Corsivo
Il corsivo è ottimo per le informazioni secondarie o terziarie nel testo in esecuzione (o enfasi, naturalmente). L'esempio seguente ne fa un buon uso per visualizzare un indirizzo.
Contrasto forte all'interno di caratteri accoppiati
Quando scegliete più di un carattere per il vostro lavoro (meglio evitare di sceglierne più di due) diventa fondamentale che questi caratteri tipografici creino una sorta di gerarchia tramite il loro contrasto. Da un lato dovrebbero essere facilmente distinguibili gli uni dagli altri e d'altra parte non troppo indipendenti. Ci sono alcune buone linee guida per selezionare i caratteri tipografici; il prossimo capitolo vi aggiornerà su quello.
Tenete a mente che tutte le regole sopra eccellono solo se le usate costantemente. Se cambiate troppo le cose, la gerarchia sarà indebolita significativamente. Se tutto questo vi è completamente nuovo, andate al mio articolo sui principi della progettazione visiva per aggiornarti. Tutto questo avrà molto più senso dopo di questo.
Scegliere i caratteri tipografici
Abbiamo tonnellate di caratteri tipografici tra cui scegliere in questi giorni. E non solo, abbiamo tonnellate di servizi che vogliono aiutarci a farlo. Può volerci un po' di tempo per capire cosa c'e' davvero là fuori. Ma per me, è una cosa del tutto positiva. La tipografia web ha fatto molta strada, non solo in termini di ecosistema, ma in termini di ciò che browser vi consente di fare oggigiorno.
Al momento di decidere quali caratteri tipografici volete utilizzare, vorrei raccomandare che prima di tutto vi concentriate sulla leggibilità e sullo stile che volete trasmettere con il vostro design. Il tono e il messaggio sono anche importanti poiché il carattere ha un'influenza enorme su di esso attraverso le sue varie caratteristiche. Se potete gestire tutto questo, vi distinguerete dal resto della folla abbastanza significativamente.
Abbinare i caratteri tipografici
Assicuratevi di creare un buon contrasto tra le scelte abbinate. I caratteri tipografici che sono troppo simili possono finire per sembrare confusi e influenzare negativamente la gerarchia visiva. Le famiglie di caratteri tipografici più grandi hanno anche il vantaggio di avere tonnellate di opzioni per variare l'unico esempio. In questo modo potete utilizzare solo un carattere tipografico senza apparire noiosi.
Se volete andare oltre, allora abbinare di un senza grazie con un carattere con grazie è il posto migliore per iniziare — il più ragionevole in realtà. Questo può portare a un contrasto più forte e più interessante che potete utilizzare a vostro vantaggio — stilisticamente.
Utilizzate le vostre scelte in modo coerente. Evitate di scambiare i caratteri tipografici per il body copy e le intestazioni dappertutto. Decidete qual è il migliore per la leggibilità e qual è il migliore per trasmettere uno stile, mentre afferrate l'attenzione dei lettori e attenetevi a quello.
Alcune designer di caratteri tipografici hanno creato versione con grazie e senza grazie dello stesso carattere tipografico. Dovrebbero funzionare bene insieme. Quando il vostro carattere ha un corrispondente di pari livello potreste trovare un contrasto integrato fin dall'inizio.
Se abbinate due caratteri tipografici, mirate a forti differenze visive tra i due. Manteneteli discreto se volete, ma dovrebbe essere almeno evidente — anche a una rapida occhiata. A questo riguardo, abbinare due senza grazie o due con grazie può essere difficile.
Mentre cercate distinzioni visive, volete anche stare attenti a una sorta di tratto comune. Qualcosa che può legare insieme due caratteri tipografici diversi. La loro struttura visiva, il modo in cui loro lettere sono progettate potrebbe condividere delle idee comuni. Contatori simili e scheletri simili delle loro lettere complessive, per esempio. Che li lega insieme anche più abilmente. Una struttura o un disegno geometrico simile sarà sicuramente d'aiuto in questo senso.
In alcune occasioni, rubate! Quando trovate delle combinazioni che vi piacciono, provatele e vedete cosa ci potete fare. Imparare imitando il lavoro degli altri va bene.
Considerazioni finali
La tipografia non ha leggi severe che guidano le vostre decisioni. Per me è una cosa buona. Per diversi motivi, la tipografia è soggettiva, ma la leggibilità potrebbe essere l'unica costante su cui dovreste sempre concentrarvi prima di tutto. Prendete tutte le idee e i concetti che abbiamo coperto con le pinze e vedetele come punti di partenza per le vostre esplorazioni creative.
C'è molto spazio per infondere al web una migliore tipografia. È un ottimo strumento per migliorare la comunicazione e credo che sia una conoscenza culturalmente preziosa che ci è stata tramandata attraverso molte generazioni di duro lavoro e di esplorazione. È fantastico come si può influenzare il tono della lingua scritta con essa.
