Per usare la spiegazione più semplice, la tipografia è il design e l'uso dei caratteri tipografici come mezzo di comunicazione. Molte persone considerano la tipografia iniziata con Gutenberg e lo sviluppo del tipo mobile, ma la tipografia risale a molto più in là. Questo ramo del design ha in realtà le sue radici in forme di lettera scritte a mano.
La tipografia racchiude tutto, dalla calligrafia al tipo digitale che vediamo oggi su pagine web di ogni tipo. L'arte della tipografia include anche i tipografi che creano nuove forme di lettera che vengono poi trasformate in file di font che altri progetti possono utilizzare nel loro lavoro, dalle opere stampate a quei siti Web di cui sopra. Per quanto diverse possano essere queste opere, le basi della tipografia sono alla base di tutto.
Gli elementi della tipografia
Se hai mai parlato con un web designer che usa la tipografia nel suo lavoro, probabilmente hai sentito i termini "carattere tipografico" e / o "carattere". Molte persone usano questi due termini in modo intercambiabile, ma in realtà ci sono alcune differenze tra questi due elementi.
Il carattere tipografico è il termine assegnato a una famiglia di caratteri (come Helvetica Regular, Helvetica Italic, Helvetica Black e Helvetica Bold). Tutte le varie versioni di Helvetica costituiscono il carattere completo.
Carattere è il termine usato quando qualcuno si riferisce a un solo peso o stile all'interno di quella famiglia (come Helvetica Bold). Così tanti caratteri tipografici sono composti da un numero di singoli caratteri, tutti simili e correlati ma diversi in qualche modo. Alcuni caratteri tipografici possono includere solo un singolo font, mentre altri potrebbero includere numerose varianti delle forme delle lettere che compongono i caratteri.
Se questo sembra confuso, non preoccuparti, se qualcuno non è un esperto di tipografia probabilmente useranno il termine "font" a prescindere da quale di questi termini significhi veramente, e anche molti designer professionisti usano questi due termini in modo intercambiabile. A meno che tu non stia parlando con un designer di tipo puro sui meccanismi del mestiere, probabilmente sei sicuro di usare qualsiasi dei due termini che preferiresti. Detto questo, se capisci la distinzione e puoi usare correttamente i termini corretti, non è mai una brutta cosa!
Classificazioni dei caratteri tipografici
A volte chiamate "famiglie di caratteri generici", si tratta di grandi raggruppamenti di caratteri tipografici basati su un certo numero di classificazioni generiche a cui appartengono caratteri diversi. Nelle pagine Web, ci sono sei tipi di classificazioni di font che è probabile che vedano:
- Serif
- Sans-serif
- copione
- Monospaced
- Corsivo
- Fantasia
Ci sono anche una serie di altre classificazioni di font che ne sono derivati. Ad esempio, i caratteri "slab serif" sono simili ai serif, ma presentano tutti un design riconoscibile con serif spessi e pesanti sulle lettereforme. Serif e sans-serif sono le due classificazioni di font più comuni utilizzate nella maggior parte dei siti web.
Anatomia del viso
Ogni carattere tipografico è composto da diversi elementi che lo distinguono da altri caratteri tipografici, che viene indicato come anatomia tipografica. A meno che non si stia specificando specificamente il tipo di progettazione e si stia cercando di creare nuovi caratteri, i web designer generalmente hanno solo bisogno di conoscere le basi della terminologia del carattere tipografico.
A livello di base, gli elementi di anatomia tipografica di cui dovresti essere a conoscenza sono "cap" e "x-height" e "discender" e "ascender".
Cap e x-height è l'altezza delle lettere maiuscole nel carattere tipografico e l'altezza della lettera x. Ti dice quanto saranno alte le lettere più grandi, e quanto saranno grandi le lettere minuscole. Tutti i tipi di carattere sono dimensionati in base a queste due caratteristiche.
Discensori e ascendenti sono le porzioni di lettere che vanno al di sotto e al di sopra della linea di altezza x. Questo di solito si riferisce a lettere minuscole. Per esempio, la lettera "b" ha un ascendente (il pezzo che si attacca "su" dalla lettera) mentre la lettera "p" ha un discensore (le parti che si abbassano "giù" dalla lettera).
Spaziatura di lettere
Ci sono diversi aggiustamenti che possono essere fatti tra e attorno a lettere che influenzano la tipografia. I caratteri digitali sono creati con molte di queste caratteristiche e, nei siti Web, abbiamo una capacità limitata di modificare questi aspetti del carattere. Questa è spesso una buona cosa dal momento che il modo predefinito in cui vengono visualizzati i caratteri è in genere preferibile.
- crenatura: Lo spazio orizzontale tra le singole lettere
- puntamento: Lo spazio tra gruppi di lettere
- principale: Spazio verticale tra righe di testo (questo è noto come altezza della riga nei termini del sito Web)
- Misurare: La lunghezza delle righe di testo
- Allineamento: Posizionare visivamente il testo a sinistra, a destra, centrato o giustificato
- Legature: Le lettere si muovono così vicine che le loro anatomie sono combinate, essenzialmente facendo scorrere una lettera in un'altra
Altri elementi tipografici
La tipografia è più dei semplici caratteri tipografici usati e degli spazi bianchi che li circondano. Ci sono anche alcune altre cose che dovresti tenere a mente quando crei un buon sistema tipografico per qualsiasi progetto:
"Sillabazione" è l'aggiunta di un trattino (-) alla fine delle righe per aiutare a prevenire problemi di leggibilità o migliorare la giustificazione. Mentre comunemente si trovano nei documenti stampati, la maggior parte dei web designer ignora la sillabazione e non la usa nel loro lavoro perché non è qualcosa che viene gestito automaticamente dai browser web.
"Straccio" è il bordo verticale non uniforme di un blocco di testo. Quando presti attenzione alla tipografia, dovresti esaminare i blocchi di testo nel loro insieme per assicurarti che lo straccio non influenzi il design.Se lo straccio è troppo frastagliato o irregolare, può influire sulla leggibilità del blocco di testo e renderlo distratto. Questo è qualcosa che viene gestito automaticamente dal browser in termini di come viene eseguito il wrapping del tipo da una riga all'altra.
Una singola parola alla fine di una colonna è una vedova e se è in cima a una nuova colonna è orfana. "Le vedove" e "gli orfani" sembrano pessimi e possono essere difficili da leggere.
Ottenere le righe di testo da visualizzare perfettamente in un browser Web è una proposta estenuante, soprattutto quando si dispone di un sito Web reattivo e display diversi per dimensioni dello schermo diverse. Il tuo obiettivo dovrebbe essere quello di rivedere il sito di dimensioni diverse per cercare di creare il miglior aspetto possibile, accettando che in alcuni casi i tuoi contenuti avranno finestre, orfani o altri display non ideali. Il tuo obiettivo dovrebbe essere quello di minimizzare questi aspetti del design di un tipo, oltre ad essere realistico nel fatto che non puoi raggiungere la perfezione per ogni dimensione e display dello schermo.
Passi per il controllo della tipografia
- Scegli con attenzione i caratteri tipografici, osservando l'anatomia del tipo e la famiglia di tipo in cui si trova.
- Se si crea il progetto utilizzando il testo segnaposto, non approvare il progetto finale fino a quando non si è visto il testo reale nella progettazione.
- Presta attenzione ai piccoli dettagli della tipografia, come trattini e trattini.
- Guarda ogni blocco di testo come se non ci fossero parole in esso. Che forme fa il testo sulla pagina? Assicurati che quelle forme portino avanti l'intero design della pagina.
