Può essere impegnativo scegliere i caratteri tipografici per i propri progetti online. Ed è troppo facile perdere molto tempo nello sviluppo di un progetto web, sostituendo un carattere dopo l'altro senza mai arrivare a destinazione. Vediamo tutto quello che c'è da sapere sull'abbinamento dei caratteri.
Combinare i caratteri nel design web
Come molte altre parti del design, anche la tipografia ha delle linee guida che semplificano la scoperta dell'abbinamento ideale dei caratteri. Vi mostreremo come combinare i font e vi forniremo alcune combinazioni ideali per la vostra attività.
1. Utilizzate font con toni diversi
La scrittura può trasmettere emozioni. I caratteri tipografici che utilizziamo per esprimere le parole hanno un impatto anche sui nostri pensieri. Molti caratteri sono seri e professionali, mentre altri sono piacevoli e informali. Le personalità dei caratteri tipografici rivelano il significato del testo che visualizzano. Quando si scelgono i font per i siti web, la combinazione di vari toni con la tipografia crea contrasti visivamente sorprendenti.
Quando scegliete una combinazione di caratteri, considerate il tono di chi o cosa rappresenterà un sito web. Un carattere allegro sarebbe appropriato per un'azienda di giocattoli, ma potrebbe sembrare strano sul sito di un'azienda legale. D'altro canto, un carattere serif troppo serio potrebbe essere adatto a qualcosa di più leggero.
Uno dei fattori più importanti da considerare è il tipo di carattere da utilizzare per le intestazioni e il corpo del testo. I livelli delle intestazioni offrono un maggiore margine di manovra per quanto riguarda i caratteri tipografici, poiché hanno una scala più ampia. Per i testi più piccoli è necessario un carattere piacevole da vedere.
Non abbiate paura di usare caratteri di tonalità opposte nel layout del vostro sito web; a volte il contrasto può suscitare interesse.
2. Utilizzate abbinamenti di caratteri che differiscono, ma non troppo.
Evitate di mescolare caratteri tipografici nelle intestazioni praticamente identici a quelli utilizzati nel corpo del testo. Utilizzate diversi caratteri tipografici visivamente distinti ma comunque complementari tra loro.
Che cosa succede se si combinano un carattere calligrafico come Great Vibes, ad esempio, e un tipo serif come Merriweather? Il risultato è una mancanza di equilibrio e uno sgradevole senso di contrasto.
I fiocchi e le anse di Great Vibes hanno una sensazione rilassante e un pizzico di raffinatezza. Northwood è un carattere informale con serifs e code, mentre Merriweather è un carattere senza fronzoli con una formalità trasmessa dalle sue lettere serif. In questo caso, il contrasto è troppo forte perché la combinazione funzioni.
Proviamo una combinazione di caratteri più piacevole. Nell'intestazione, utilizzate Vollkorn, un carattere piuttosto divertente. Utilizzate Open Sans, un carattere sans serif più neutro e semplice. Questa combinazione funziona bene perché, nonostante la differenza di caratteri, la sottigliezza di entrambi li rende visivamente compatibili.
3. Utilizzate tre o meno caratteri distinti
Nella maggior parte dei progetti, si applica un carattere web per il titolo e un altro per il corpo. Per motivi creativi, nel layout possono essere utilizzati anche caratteri a mano e caratteri più stilizzati. Per quanto siate tentati da tutti i caratteri tipografici gratuiti disponibili, per un singolo sito web sono sufficienti tre caratteri tipografici.
Molti designer utilizzano una superfamiglia di caratteri per i loro progetti. Una superfamiglia è una famiglia di caratteri tipografici correlata a una o più altre famiglie. Può includere differenze stilistiche come il corsivo, i caratteri leggeri o pesanti, le versioni serif e sans serif, tra le altre cose. L'aspetto più piacevole delle superfamiglie è che eliminano i dubbi sull'abbinamento dei caratteri tipografici, perché sono fatte per lavorare insieme.
I singoli caratteri tipografici possono essere utilizzati in vari modi se impiegati in superfamiglie. Date un'occhiata a queste opzioni della superfamiglia Roboto. La distinzione tra Thin 100 Italic e Regular 400 non è sottile.
La maggior parte dei caratteri tipografici è classificata in superfamiglie, il che significa che avete molte alternative di carattere da sperimentare pur utilizzando lo stesso stile.
4. Comunicare la gerarchia visiva attraverso l'abbinamento dei caratteri
Visualizzate la struttura del vostro sito e comunicate la gerarchia utilizzando diversi tipi di carattere, dimensioni e colori. Potete usare la tipografia per comunicare informazioni visive sull'importanza relativa di altre parti del contenuto. I titoli dovrebbero essere i più evidenti, seguiti dai sottotitoli e dal corpo del testo. Utilizzate le combinazioni di caratteri per dare un chiaro senso di struttura alla vostra scrittura.
5. Usate la dimensione dei caratteri per indicare l'ordine
Il carattere gigante rappresenta ciò che è più importante, mentre le dimensioni decrescenti dei caratteri rappresentano la gerarchia delle informazioni. Le lettere tutte maiuscole sono un ottimo modo per far risaltare elementi critici come le chiamate all'azione. L'uso moderato di tutte le maiuscole va bene, ma evitate di far apparire il testo arrabbiato o ostile.
La maggior parte dei designer principianti integra diverse dimensioni di caratteri per stabilire la gerarchia visiva, ma esistono altri metodi per mostrare la scala visiva.
6. Sperimentare con pesi diversi
L'importanza relativa è indicata da pesi maggiori, mentre pesi più leggeri suggeriscono un gradino inferiore nella gerarchia. Come abbiamo visto con la superfamiglia Roboto, si possono ottenere molti risultati con un singolo carattere tipografico modificandone il peso.
7. Variare i colori dei caratteri
Anche se non è il caso di usare un caleidoscopio di colori contrastanti nel vostro design, variare le tonalità del testo può aiutare a far risaltare termini specifici. I colori più intensi, come il rosso e il viola, sono utilizzati per i titoli. La varietà più chiara contrasta con le versioni più scure, rappresentando un testo che deve essere letto per primo. Assicuratevi che i colori dei caratteri che state sperimentando non si perdano nello sfondo.
8. Serif
I caratteri tipografici serif, leggibili in stampa, risalgono alla fine del 1700 e sono stati concepiti inizialmente per la leggibilità.
Un serif è una linea sottile o un tratto aggiunto a una lettera. I caratteri sans-serif hanno molti spunti visivi che aiutano gli occhi dei lettori a seguirli. I caratteri serif migliorano l'efficienza della scansione, soprattutto nei blocchi di testo lunghi come quelli dei libri.
All'inizio dell'informatica, le risoluzioni dello schermo troppo basse per rendere efficaci i caratteri tipografici serif causavano problemi. I designer grafici, invece, possono utilizzare una pletora di caratteri serif grazie agli odierni schermi ad alta risoluzione.
Quando si usa un carattere serif, bisogna sempre combinarlo con un carattere sans-serif. I caratteri serif sono spesso troppo simili, con il risultato di un abbinamento sgradevole.
I caratteri serif sono molto adattabili. Quelli che seguono sono alcuni dei tipi di carattere più frequenti e utili nel testo scritto. Sono semplici da leggere in varie dimensioni, il che li rende ideali per i testi e le intestazioni.
Idea di abbinamento di font: EB Garamond e Montserrat
Combinate il font serif EB Garamond con Montserrat per il titolo e riducetelo di dimensioni per il corpo del testo. Quando i font serif sono utilizzati per lunghi blocchi di testo, hanno un rendimento migliore quando sono più piccoli.
Idea di abbinamento di font: Libre Baskerville e Raleway
Il carattere Libre Baskerville, con le sue serifs più distinte e la sua spigolosità, si contrappone alle linee sottili di Raleway.
9. Sans serifs
L'assenza di linee aggiuntive distingue i sans serif dai serif. I sans serif possono essere utilizzati per i paragrafi o per il corpo del testo a dimensioni ridotte, oppure possono essere combinati con un serif nelle intestazioni.
Esiste una serie di caratteri tipografici a cui pensare quando si tratta di combinazioni di caratteri.
Vediamo i tipi di carattere più frequenti e alcune possibilità creative da utilizzare oggi.
Idea di abbinamento di caratteri: Open Sans e Lato
Alcuni designer possono considerare font come Open Sans ed Helvetica antiquati, ma sono famosi. Open Sans è un carattere primario ma gradito che funziona bene con diversi font. Considerate il suo gelato alla vaniglia: è la base su cui potete costruire molte altre cose deliziose.
Ad esempio, utilizzate Open Sans nell'intestazione e Lato nel corpo del testo. Nel resto della pagina utilizzate un altro carattere sans serif.
10. Caratteri di visualizzazione
Se dovete attirare l'attenzione delle persone, i font display sono l'ideale. Sono tipicamente scritti in forme di lettere belle e complicate, come quelle grandi e in grassetto o quelle rade e sottili. Utilizzate caratteri tipografici progettati esplicitamente per la visualizzazione se volete che il vostro design si distingua e lasci il segno.
Idea di abbinamento dei caratteri: Bubblegum Sans e Open Sans
Bubblegum Sanc ha forme di lettere vivaci che si sposano bene con la neutralità di Open Sans.
Idea di abbinamento dei caratteri: Poiret One e Lato
Poiret One è un eccellente font moderno se siete alla ricerca di un tocco di raffinatezza. I suoi caratteri sottili di ispirazione art déco e i suoi tratti sottili lo rendono un ottimo font contemporaneo. Questo carattere è fantastico se abbinato a un carattere più modesto, come Lato. Un contrasto di questo tipo funziona bene con un carattere più sottile come Lato.
11. Caratteri monospazio
In un carattere monospace, tutti i caratteri hanno la stessa larghezza. Per i caratteri che hanno larghezze diverse, la misura orizzontale standard li distingue dai caratteri con larghezze diverse, dando loro un senso di coesione. I font monospaziati sono stati a lungo popolari in informatica per la loro semplicità e adattabilità ai primi display a bassa risoluzione.
Idea di abbinamento: IBM Plex Mono e PT Sans
IBM Plex Mono è un carattere contemporaneo con un'identità visiva ideale per le startup e altre organizzazioni tecnologiche. È stato creato come omaggio a IBM. I caratteri sans-serif, come questo, sono più facili da vedere e creano un miglior senso di contrasto se usati con PT Sans.
Idea di abbinamento dei caratteri: Roboto Mono e Roboto
Molti designer preferiscono Roboto per la sua eccellente leggibilità. Questa combinazione di font, che combina Roboto Mono con la versione normale, è comoda da vedere.
La tipografia è essenziale per il web design
Creare una solida presenza online non è facile. Ci sono diversi fattori da considerare. Per quanto riguarda l'abbinamento dei caratteri tipografici, è necessario prestare la stessa attenzione che si riserva a una tavolozza di colori. I caratteri tipografici scelti, il loro stile e la loro leggibilità contribuiscono all'esperienza dell'utente con il vostro sito web. Trovate i caratteri tipografici più belli che rispecchino la personalità del vostro progetto e offrano ai visitatori il modo più piacevole di viverlo.
