Guida all'abbinamento dei caratteri: scegliere le migliori combinazioni di caratteri per il tuo sito web

Pubblicato: 2020-11-02

Come web designer, hai molte grandi decisioni da prendere per ogni sito web che crei. Tavolozze dei colori, interazioni con l'interfaccia utente, layout di navigazione, scelta del carattere migliore per il tuo sito Web e molto altro ancora.

Un'area del web design a cui potresti non dedicare abbastanza tempo a pensare, tuttavia, è l'abbinamento dei caratteri.

La scelta di un font di bell'aspetto è una cosa. Una volta che hai un buon senso della voce e dello stile del marchio, diventa molto più facile identificare i caratteri che trasmettono un'atmosfera simile.

Sommario

  • Perché hai bisogno dell'associazione dei caratteri?​
  • Cosa considerare quando si associano i caratteri​
  • 4 regole per l'associazione dei caratteri nel web design​
  • Regola n. 1: non utilizzare più di tre caratteri sul tuo sito​
  • Regola n. 2: Concordanza e contrasto sono buoni; Il conflitto è dannoso
  • Regola n. 3: non aver paura di accoppiare all'interno delle superfamiglie di caratteri
  • Regola n. 4: assicurati che i tuoi caratteri siano di dimensioni e forma adeguate
  • Le 30 migliori combinazioni di caratteri per il web design​

Perché hai bisogno dell'associazione dei caratteri?

I siti web hanno bisogno di più di un font: per stabilire una gerarchia, per mantenere i visitatori coinvolti con molto testo e per dire ai visitatori in modo subliminale di più sulla personalità e l'approccio del marchio.

Quando aggiungi questo ulteriore livello di complessità al mix, le cose possono diventare complicate. Non solo stai abbinando i caratteri tra loro; li stai abbinando anche al tuo web design.

Sono sicuro che hai incontrato scenari come questi nei tuoi viaggi sul web:

  • Due caratteri noiosi rendono molto difficile leggere un lungo post sul blog e finisci per scorrere le intestazioni per vedere se riesci a mettere insieme la storia in quel modo.
  • Un carattere corsivo divertente e unico introduce i visitatori all'attività, solo per un carattere del corpo troppo piccolo e super semplice per contraddire quella prima impressione.
  • Il sito Web afferma che l'azienda adotta un approccio giovane e innovativo al business, motivo per cui i caratteri retrò sembrano così fuori luogo.

C'è troppo che può andare storto nell'abbinamento dei caratteri se non ti prendi il tempo per capire come i caratteri si adattano insieme.

Scopri come aggiungere caratteri personalizzati a WordPress

Cosa considerare quando si associano i caratteri

Nella nostra guida ai migliori font per i siti web, abbiamo riassunto le caratteristiche chiave da cercare:

1. Leggibilità

Uno dei motivi per cui i serif sono fortemente preferiti nella letteratura e nei giornali è la leggibilità. I serif (piedi) nella parte superiore e inferiore dei caratteri rendono più facile per i lettori distinguere tra caratteri dall'aspetto simile come la "I" maiuscola e la "l" minuscola, quindi non c'è rallentamento a causa di problemi di comprensione.

Se stai progettando una pagina con oltre 600 parole, non sarebbe una cattiva idea usare un serif nel corpo del testo proprio per questo motivo.

Detto questo, se trovi un sans serif con forme di lettere distinte (anche senza grazie), non aver paura di sperimentare. Di seguito sono riportati alcuni esempi di come utilizzare sans serif in entrambi i posizionamenti del corpo e dell'intestazione.

2. Leggibilità

Uno dei motivi per cui i san serif sono stati a lungo considerati una scelta migliore rispetto ai serif per il testo online è stata la loro elevata leggibilità. Tuttavia, gli studi hanno dimostrato che c'è poca differenza nella velocità o nella facilità con cui le persone possono leggere i testi serif rispetto a testi san serif, almeno a dimensioni più piccole.

Poiché le risoluzioni dello schermo sono notevolmente migliorate nel corso degli anni, i tipografi sono stati in grado di creare caratteri in entrambi gli stili altrettanto leggibili. Come spiega l'NNG:

“La vecchia linea guida sull'usabilità per la tipografia online era semplice: attenersi ai caratteri sans-serif. Poiché gli schermi dei computer erano troppo scadenti per rendere correttamente i caratteri con grazie, il tentativo di digitare con grazie alle dimensioni del testo del corpo ha portato a forme di lettere sfocate.

Mentre altri tipi di carattere, come quelli eccessivamente decorativi, possono essere troppo difficili da leggere al di fuori del testo di intestazione di grandi dimensioni, i designer hanno molte opzioni in termini di stile del testo su una pagina con serif e san serif.

Ciò di cui dovresti essere più consapevole, quindi, è il dimensionamento e la spaziatura dei tuoi caratteri, poiché ciò ha un effetto sulla leggibilità e la leggibilità.

3. Comfort

Ci sono alcuni web designer che sono riluttanti a usare caratteri tipografici come Helvetica o Times New Roman a causa di quanto siano abusati. Tuttavia, la selezione e l'abbinamento dei caratteri non riguardano come ti senti riguardo alla tipografia del tuo sito web, ma quanto sono a loro agio i tuoi visitatori nel leggerlo.

Quindi, non c'è da vergognarsi nello scegliere i classici se riescono a portare a termine il lavoro.

4. Stile

Seleziona i tipi di carattere e i caratteri con stili che si allineano bene con il tuo marchio. Ad esempio, i caratteri serif risultano più tradizionali e seri rispetto ai caratteri corsivi che tendono ad essere più bizzarri e divertenti.

Puoi dire molto ai visitatori del tuo marchio semplicemente scegliendo i giusti tipi di caratteri per cominciare.

Non perdere di vista queste regole mentre passi al passaggio successivo della progettazione con la tipografia: