Come abbinare i caratteri | Spiegato

Rendere il design del sito Web squisitamente piacevole pur mantenendolo assolutamente professionale è molto importante nello sviluppo del sito Web. L'uso dei caratteri giusti e gli accoppiamenti dei caratteri giusti aiutano a mantenere la coerenza di un design del sito Web e migliorare l'esperienza dell'utente. Lascia un buon impatto sull'utente che sembra essere buono per la tua attività. CSS ti consente di utilizzare numerosi abbinamenti. Questo articolo discute quanto segue:

1. Linee guida sull'abbinamento dei caratteri
2. Alcuni fantastici abbinamenti

Iniziamo.

Linee guida sull'abbinamento dei caratteri

Quando si accoppiano i caratteri, ci sono alcune linee guida che dovrebbero essere curate. Qui abbiamo annotato alcuni suggerimenti sull'abbinamento dei caratteri.

1. Evita il conflitto visivo
   Il conflitto visivo si verifica quando si utilizzano accoppiamenti di caratteri che non si completano a vicenda. Per evitare questo conflitto visivo, scegli un abbinamento dei caratteri che è diversi ma si fonde bene insieme.
2. Coppia all'interno di superfamilieri di carattere
   L'uso di coppie di caratteri all'interno di una superfamiglia del carattere potrebbe rivelarsi un'ottima scelta. Considera solo quelle coppie di caratteri che si completano a vicenda ma non sembrano troppo simili. È possibile confrontare gli abbinamenti di caratteri all'interno di una superfamiglia del carattere sulla base di Serif vs. sans serif, spesso vs. sottile o condensato vs. esteso.
3. Mantenere il contrasto
   Mantenere il contrasto è assolutamente necessario quando si accoppiano i caratteri. Il contrasto ti aiuta a mantenere un equilibrio nell'accoppiamento dei caratteri in modo tale che due caratteri dello stesso carattere superfamiglia si armonizzano ma sembrano molto diversi. L'uso di un Sans con un sans-serif potrebbe essere un modo per mantenere un contrasto sebbene non sia l'unico modo per farlo.
4. Usa meno di tre caratteri
   Per rendere il tuo sito Web progettare visivamente piacevole, l'utilizzo di solo due caratteri sarebbe più che sufficiente (uno per l'intestazione e l'altro per il testo del corpo). Vai per il terzo solo quando necessario.

Ora che abbiamo capito alcune regole di base dell'abbinamento dei caratteri, passiamo attraverso alcune buone opzioni di abbinamento dei caratteri.

Alcuni fantastici abbinamenti

Esistono più repository da dove è possibile ottenere numerosi caratteri fantastici come Google Fonts, Adobe Fonts, Fonts.com e molti altri. Tenendo presente le regole di cui sopra puoi creare un buon abbinamento a carattere a scelta.

Qui abbiamo elencato alcune buone opzioni di accoppiamento per te!

Verdana e Georgia

Verdana presenta caratteri audaci e larghi che lo rendono appropriato per il testo dell'intestazione nel frattempo, i sottili tratti e i serif ispessiti della Georgia lo rendono una scelta perfetta per il testo del corpo.

Esempio
In questo esempio, Verdana viene utilizzata per l'intestazione e la Georgia viene utilizzata per il paragrafo.

H1
Font-Family: Verdana, sans-serif;
Font-size: 28px;

P
Font-Family: Georgia, Serif;
Font-size: 16px;

Produzione

Viene utilizzata una combinazione di Verdana e Georgia.

Aragosta e cabina

La combinazione di aragosta e cabina funziona perfettamente. Questi due caratteri si completano a vicenda in un modo che l'aragosta è audace e attraente mentre la cabina è semplice e semplice.

Esempio
Nell'esempio seguente, l'aragosta viene utilizzata per la rotta e la cabina è per il paragrafo.

H1
Font-Family: aragosta, serif;
Font-size: 28px;

P
Font-Family: cabina, sans-serif;
Font-size: 16px;

Produzione

Viene utilizzata una combinazione di aragosta e caratteri della cabina.

Helvetica e Georgia

Helvetica è una scelta molto popolare quando si tratta di marchi a causa del suo aspetto pulito, audace e moderno, e la Georgia è una scelta eccellente per il testo del corpo a causa dei sottili tratti dei suoi personaggi.

Esempio
Questo esempio utilizza il carattere Helvetica per l'intestazione e il carattere Georgia per il paragrafo.

H1
Font-Family: Helvetica, sans-serif;
Font-size: 28px;

P
Font-Family: Georgia, Serif;
Font-size: 16px;

Produzione

Viene utilizzata una combinazione di Helvetica e Georgia.

Cinzel e fauna uno

Cinzel e Fauna One sono Google Fonts. Cinzel si ispira alle iscrizioni romane e ha uno stile contemporaneo. D'altra parte, Fauna One ha un tocco moderno con una struttura morbida e condensata.

Esempio
In questo esempio, Cinzel viene utilizzato per l'intestazione e la fauna è usata per il paragrafo.

Produzione

Viene utilizzata una combinazione di cinzel e fauna.

Slaba josefin e josefin sans

Josefin Slab ha una macchina da scrivere che si spegne perfettamente con lo stile vintage Josefin Sans. Per le intestazioni viene utilizzata la lastra josefin mentre per i paragrafi viene utilizzato josefin sans.

Esempio
Questo esempio utilizza la lastra Josefin per le intestazioni e Josefin Sans per i paragrafi.

Produzione

Viene utilizzata una combinazione di lastra josefin e josefin sans.

Questi sono alcuni campioni di abbinamenti. Utilizzando le linee guida sopra menzionate, è possibile creare un accoppiamento del carattere e creare un sito web fantastico!

Conclusione

I buoni abbinamenti di carattere possono creare siti Web squisitamente piacevoli che migliorano l'esperienza dell'utente e quindi sono cruciali per la struttura di un buon web design. Ci sono alcune linee guida che devono essere seguite quando si combinano caratteri come; Evitare il conflitto visivo, l'abbinamento all'interno delle superfamiglie di carattere, mantenere il contrasto e usare non più di tre caratteri. Questo articolo discute queste linee guida e mette in mostra alcuni famosi abbinamenti.