Guida definitiva alla tipografia web: regole, glossario, idee e best practice

‘Un’immagine vale più di mille parole.’

Molto spesso le immagini trasmettono ciò che hanno da dire. Tuttavia, un’immagine con testo ha un impatto maggiore.

La tipografia funge da compagna della tua grafica. La tipografia non è solo scegliere un carattere casuale e una dimensione in punti dal menu a discesa del tuo software di editing. È un campo specializzato nella progettazione grafica. È l’arte e la tecnica di arrangiare il tipo. È una delle abilità importanti che possono differenziarti dal resto dei designer se sai come usarla.

Cos’è la tipografia?

Prima di entrare nell’arte e nella tecnica della tipografia, in primo luogo, capire cos’è la tipografia. La tipografia è la parte visiva del testo (parola scritta). Un testo è una serie di parole. Ogni testo visualizzato visivamente che vedi è fondamentalmente tipografia. Il testo può essere classificato in tre modi: visivamente, acusticamente e digitalmente.

La tipografia è più del design di lettere e caratteri. Include la scelta della dimensione dei punti, della spaziatura e della lunghezza della linea. Ai tempi in cui Johannes Gutenberg introdusse la macchina da stampa, i tipografi dovevano disporre lettere e caratteri nello spazio fisico. Ora, nell’era dei computer, questo lavoro è molto più semplice. Devi solo trovare font open source, disporre lettere e caratteri e il gioco è fatto.

Importanza della tipografia

La tipografia è qualcosa che troverai assolutamente ovunque. Dì, potrebbe essere il tuo smartphone, tazza di caffè, cartellone pubblicitario, panni e molto altro. La tipografia è ovunque. La selezione del carattere, della lettera e della disposizione dei caratteri decide come verrà trasmesso il tuo messaggio.

Anche se a tuo avviso sembra un piccolo fattore, di certo non lo è. Anche una singola regolazione del tipo può cambiare l’intero aspetto della tua opera d’arte. Se hai mai notato che Facebook ha testato un nuovo font chiamato Geneva nel giugno 2016. Era una versione leggermente più sottile e leggera del font Helvetica originale. Ma la differenza tra questi due caratteri era evidente.

Regole della tipografia

In tipografia, devi scegliere il carattere tipografico in base al layout, alla griglia, al tema del design, alla combinazione di colori e così via. Ecco alcune regole tipografiche che dovresti tenere a mente mentre lavori.

Scegliere il carattere giusto

Se trascorri qualche minuto su Internet, troverai una sorprendente gamma di font pronti all’uso gratuiti ea pagamento. Ma ciò non significa che devi passare ore a cercare i caratteri esatti che visualizzi nella tua mente. Puoi iniziare a dipingere anche con una tavolozza limitata. Ci sono alcuni font provati e testati come Helvetica che non possono mai sbagliare in nessun progetto.

Un carattere tipografico è una forma di design formata da artigiani che contribuiscono con tutti i loro sforzi e abilità per un considerevole periodo di tempo. I caratteri dal design professionale offrono una varietà di personalizzazioni in termini di pesi e stili per creare una famiglia completa. Inoltre, offrono notevoli coppie di crenatura, supporto per la personalizzazione multilingua e di impostazione del tipo.

Di seguito sono riportati i termini tipografici più importanti che sono considerati:

Dimensione

Non tutti i caratteri tipografici sono creati allo stesso modo. Alcuni usano aspetti grassi e larghi mentre altri sono sottili e stretti. Diversi tipi di caratteri tipografici possono acquisire la diversa quantità di spazio sulla pagina.

L’altezza del carattere è indicata come altezza X. Quando si abbinano caratteri tipografici diversi, è buona norma utilizzare solo quei caratteri tipografici che condividono un’altezza x simile. D’altra parte, la larghezza del carattere è chiamata ‘set width’, che decide quanto spazio occuperà la lettera e il buffer con altre lettere.

Il sistema a punti è il metodo utilizzato per misurare il tipo dal XVIII secolo. Un punto può essere misurato come 1/72 di pollice e 12 punti possono formare una pica. Pica è l’unità per misurare la larghezza della colonna. Inoltre, le dimensioni possono essere misurate in pixel, pollici o millimetri. Dipende dal requisito del progetto.

Primo

Lo spazio verticale tra ogni riga di testo è noto come interlinea. Il motivo per chiamarlo come guida è perché i foglietti di piombo venivano usati per dividere le linee di caratteri nel tempo in cui si usava la composizione in metallo. La regola empirica per ottenere un corpo del testo leggibile è utilizzare un valore iniziale superiore alla dimensione del carattere. È possibile utilizzare un valore principale più alto da 1,25 a 1,5 volte.

Inseguimento e crenatura

La crenatura è l’atto che comporta l’aggiustamento dello spazio tra i personaggi. Aiuta a generare un abbinamento armonioso.

Ad esempio, quando si utilizza una maiuscola della lettera “A” con la maiuscola della lettera “V”, i tratti diagonali della parte superiore sinistra della lettera “V” sono crenati con la parte inferiore destra della “A”.

D’altra parte, tracciamento è il termine che si riferisce alla spaziatura di tutti i caratteri che vengono applicati in modo uniforme. La crenatura è simile alla traccia, ma entrambe non sono la stessa cosa.

Misurare

La misura è un termine che spiega la larghezza di un blocco di testo. Per un’esperienza di lettura ottimale, dovresti considerare la misura come un aspetto importante della tipografia.

Gerarchia e scala

Non è possibile utilizzare tutti i tipi con le stesse dimensioni, è necessario impostare la gerarchia per i tipi. Altrimenti, sarà difficile per i lettori capire quale informazione è più importante delle altre.

Generalmente, i titoli sono grandi, i sottotitoli sono più piccoli e il tipo di corpo è leggermente più piccolo dei sottotitoli per aiutare i lettori a comprenderne la gerarchia.

Non solo le dimensioni, l’uso di diversi colori, peso e spaziatura può anche aiutarti a impostare la gerarchia nel tuo lavoro.

Glossario

Abbiamo coperto quasi tutti i concetti e la terminologia fondamentali che coinvolgono la tipografia qui.

• Aesc: Si pronuncia come ‘Ash’. È una legatura di due lettere vale a dire. ‘a’ ed ‘e’. L’origine di aesc è dall’antico inglese dove è intesa come vocale dittongo. L’Aesc è migrato verso alfabeti come l’islandese e il danese.
• Apertura: L’apertura è un’apertura annodata di un glifo che può essere vista in lettere come ‘e’ la dimensione dell’apertura varia a seconda della sua implementazione. Tuttavia, variando l’apertura, il suo effetto si rifletterà sulla leggibilità della forma di una lettera.
• Apex: Apex è il punto che si trova nella parte superiore di un carattere. È il punto in cui si incontrano i tratti sinistro e destro.
• Linea di base: è una sezione in cui si trova la base delle lettere maiuscole.
• Ciotola: la ciotola è considerata come le parti racchiuse di lettere come “b” e “p”.
• Staffa: è un contorno a forma di cuneo che è utile per contenere un serif e formare lo stelo di un font in un numero di caratteri tipografici.
• Altezza del cappuccio: l’altezza del cappuccio è l’altezza di una lettera maiuscola sopra la linea di base.
• Contatore: il contatore è racchiuso o racchiuso in modo incompleto in una sezione di una lettera. Il contatore può essere visto in lettere come ‘c’ o nella parte inferiore di ‘g’ ed ‘e’. Questa sezione può essere confusa con la ciotola.
• Descender: è un pezzo della forma della lettera che va sotto la linea di base. Ad esempio, lettere come ‘p’, ‘y’ e ‘q’.
• Orecchio: l’orecchio è un piccolo tratto che si espande dal lato superiore destro della ciotola.
• Glyph: è una parte singolare che costruisce un font. Qualsiasi tipo di parte singolare che aiuti a costruire un carattere, sia esso un segno di punteggiatura, un numero, una lettera o persino un dingbat, è incluso in esso. I glifi possono essere chiamati gli elementi costitutivi della tipografia.
• Gutter: è lo spazio fornito tra le pagine affiancate del tuo lavoro. Le grondaie possono essere viste comunemente nelle colonne di testo.
• Orphan: Orphan è la prima riga di un nuovo paragrafo che è infilata alla fine di una pagina. Non è una cosa che vorresti avere nel tuo progetto in quanto è considerata una cattiva pratica.
• Pica: Pica è l’unità di misura della larghezza della colonna. Ci sono 16 pixel o 12 punti in una pica.
• Leggibilità: è indicata come la facilità di lettura che include l’uso di un blocco di testo che può essere scansionato facilmente a occhio.
• Serif: è un carattere tipografico con serif. La fine del tratto di una lettera in questo tipo di carattere deriva dalla tendenza romana.
• Sans-serif: un carattere tipografico senza serif è un sans-serif o sans serif.
• Colonna vertebrale: è il tratto curvo maggiore che è presente nella lettera minuscola della ‘S’ maiuscola.
• Sperone: è un piccolo rigonfiamento che appare sulla curva di una lettera. È anche chiamato barba o becco. Ad esempio, la lettera “G”.
• Gambo: un tratto a tutta lunghezza è chiamato gambo nei caratteri verticali. È verticale.
• X-height: L’altezza della lettera ‘x’ in minuscolo in un dato tipo di carattere è un’altezza x.

7 Idee tipografiche e buone pratiche

Di seguito sono riportate le migliori pratiche tipografiche che puoi utilizzare nel tuo lavoro. Usa questi suggerimenti nei tuoi progetti per creare i tuoi capolavori.

Importanza della scelta dei font corretti

Ogni designer ha un elenco dei suoi font preferiti. Ma ciò non significa che devi scegliere sempre un font solo dalla tua lista dei preferiti. Ogni carattere tipografico ha il proprio stile, personalità e umore. Quindi, dovrai decidere quale font si adatterà perfettamente al tuo design. La scelta del carattere è importante in quanto ti aiuta a trasmettere il tuo messaggio al tuo pubblico.

Tieni a mente il tuo pubblico

Dopo aver scelto un carattere che integri l’idea del tuo design, dovresti pensare se sarà adatto al tuo pubblico. Un gruppo del tuo pubblico mirato potrebbe ritenere che i tuoi caratteri siano alla moda, mentre alcune persone li definiranno obsoleti. Quindi, dovrai capire per chi stai progettando il progetto. L’età, il sesso, la posizione e altri fattori del tuo pubblico dovrebbero essere considerati prima di decidere sulla decisione del carattere.

Imposta una gerarchia

Come accennato in precedenza, la gerarchia gioca un ruolo importante nella tipografia. La tua grafica dovrebbe essere ben organizzata e dovrebbe fornire una facilità di navigazione ai lettori. La gerarchia tipografica è molto utile per realizzare progetti con testo pesante come libri, newsletter, riviste e altre pubblicazioni di stampa tradizionali.

Prestare attenzione alla spaziatura e all’allineamento

La spaziatura e l’allineamento possono sembrare meno importanti, ma certamente non lo sono. Senza una corretta spaziatura e allineamento, i tuoi progetti sembreranno confusi, disordinati e ordinari. La spaziatura include l’uso di interlinea, margini, tracciamento e spazi bianchi.

Usa Crenatura ogni volta che lo richiedi

Molti designer si confondono tra tracciamento e crenatura. Tuttavia, entrambi sono termini diversi. La crenatura ti consente di rendere la tua tipografia professionale e raffinata.

Non eccedere nell’uso di caratteri tipografici, pesi e stili

A tutti noi piace usare caratteri diversi e personalizzarli per sembrare di classe. Tuttavia, l’uso di caratteri tipografici diversi in un unico disegno può rendere il tuo lavoro un aspetto amatoriale e disordinato. Dovresti evitare l’uso di più di tre caratteri in un disegno per dargli un aspetto professionale.

Osserva e pratica

L’unico modo provato e testato per migliorare le tue abilità tipografiche è studiare come altri designer usano la tipografia nel loro lavoro. È l’abilità che richiede pratica e occhio per i dettagli per capire come qualcuno ha usato la tipografia nel suo progetto e come sarai in grado di usarla nei tuoi progetti.

Questa era la guida definitiva alla tipografia. Spero che questa guida ti abbia aiutato a comprendere diversi concetti e pratiche utilizzando i quali puoi migliorare le tue abilità tipografiche.