Vai al commento

Come abbinare i font? [Guida]


Kio_

Post raccomandati

Oggi la vostra padellara preferita (?) cercherà di illustrarvi brevemente cosa sono i font e come imparare ad abbinarli.

 

Spoiler

a07ae3c6f914f44d35df6f49000aeb1b.gif

 

 

 

 

Si tratta di una guida veramente basilare, quindi non temete, non serve essere dei maghi di Photoshop per poterne trarre vantaggio.

 

 

Innanzitutto i font si dividono in due famiglie principali.

I Serif e i Sans Serif. Ma cosa vuol dire?
 

  • I Serif sono i font con le così dette “grazie”, ovvero, delle piccole appendici presenti su alcune lettere.

Esempio:

HCug0A.png

 

 

  • I Sans Serif, invece, sono quei font senza grazie.

Esempio:

PvTXQk.png

 

Oltre a queste due schiere, però, ne esistono infinite altre.

Ad esempio i pixel font, utilizzati spesso come watermark, o i font calligrafici.

HMRJog.pngmUJosL.png

 

 

Ma con che criterio si abbinano tra loro i font?

C'è una regola di fondo da ricordare: bisogna creare contrasto, ma non troppo.

Ma cosa vuol dire? Vediamolo nel dettaglio.

 

Esempio 1 – Troppo poco contrasto:

In questo caso abbinando due basic font uno Serif e uno Sans Serif, notiamo che tra i due si genera davvero poco contrasto. Sono sufficientemente diversi per creare un senso di disturbo ma non abbastanza perché questo disturbo sia gradevole.

lgNyAg.png

 

Esempio 2 – Troppo contrasto:

In questo caso, invece, il contrasto tra i due font è veramente eccessivo, in quanto entrambi presentano uno stile molto particolare.

 

cCXhb4.png

 

Esempio 3 – Contrasto corretto:

Finalmente qui abbiamo un contrasto testuale gradevole.

 

DJpqbu.png

 

 

Il consiglio, quindi è di evitare sia l'abbinamento “Serif + Sans Serif” che l'abbinamento tra due font eccessivamente diversi.

 

Inoltre è buona norma non utilizzare più di due font diversi insieme, fatta eccezione per casi estremamente circostanziali.

896eEY.png

 


Discorso simile al precedente vale anche per il contrasto cromatico.

 

Esempio 1 – Troppo contrasto:

 

X7aPfR.png

 

Esempio 2 – Poco contrasto:

 

kzcrcU.png

 

Esempio 3 – Contrasto corretto:

 

2scx7N.png

 

Nel caso ci trovassimo ad utilizzare più di un font è consigliabile optare per due differenti sfumature dello stesso colore, oppure per un accostamento cromatico tra due colori non particolarmente in contrasto tra loro.

 

GnP41U.png

 

 

 

 

Esistono poi dei casi in cui la scelta di un font è quasi obbligata.

Immaginiamo di trovarci in una situazione simile a questa:

 

WMUokK.png

 

 

Non serve specificare che la versione corretta sia la prima.

Questo accade perché solitamente quando si è costretti ad avvalersi di caratteri “maiuscoli” è necessario utilizzare font Sans Serif, mentre bisogna sempre evitare i font calligrafici.

Per andare sul sicuro, è preferibile utilizzare font essenziali come ad esempio Intro.

 

Tuttavia, se la situazione lo richiede, si possono creare abbinamenti gradevoli anche con altri font più particolari, come Edo SZ, ad esempio:

 

nJSv9H.png

 

 

Un'altra dritta da tenere a mente riguarda l'allineamento.

Bisogna assolutamente evitare di stabilire più di due allineamenti differenti, in una composizione testuale.

 

 

Esempio doppio allineamento corretto:

VPCoLV.png

 

 

 

Esempio allineamento multiplo sbagliato:

Lm0emS.png

 

 

Quindi, se allineate al centro e a sinistra, evitate di allineare a destra e così via dicendo.

 

Ovviamente questo discorso vale esclusivamente per gli allineamenti formali, in quanto è consuetudine, nelle icon ad esempio, utilizzare differenti allineamenti per creare giochi di forme e di colori.

 

L'ultima dritta che posso darvi è cercare di utilizzare font coerenti con il tema.

Un'immagine horror, ad esempio, difficilmente sarà abbellita da un font calligrafico dolce e sinuoso, meglio optare per qualche font splatter che richiami appunto il tema dell'immagine o, nel dubbio, un bel Sans Serif neutro. ;) 

 

 

 

 

Spero di esservi stata utile, se avete domande non esitate a chiedere. ^^

 

 

Ps. Non usate MAI il Comic Sans.

 

Link al commento
Condividi su altre piattaforme

Adesso, LightRay ha scritto:

Ma ormai il Comic Sans più che un font è una barzelletta lol

Grazie per i consigli! :3

Breve storia triste: conosco gente che prende soldi per realizzare lavori di grafica e lo usa. :') 

Figurati, comunque. Grazie a te!

Link al commento
Condividi su altre piattaforme

13 minuti fa, Kio_ ha scritto:

Oggi la vostra padellara preferita (?) cercherà di illustrarvi brevemente cosa sono i font e come imparare ad abbinarli.

 

  Apri contenuto nascosto

a07ae3c6f914f44d35df6f49000aeb1b.gif

 

 

 

 

Si tratta di una guida veramente basilare, quindi non temete, non serve essere dei maghi di Photoshop per poterne trarre vantaggio.

 

 

Innanzitutto i font si dividono in due famiglie principali.

I Serif e i Sans Serif. Ma cosa vuol dire?
 

  • I Serif sono i font con le così dette “grazie”, ovvero, delle piccole appendici presenti su alcune lettere.

Esempio:

HCug0A.png

 

 

  • I Sans Serif, invece, sono quei font senza grazie.

Esempio:

PvTXQk.png

 

Oltre a queste due schiere, però, ne esistono infinite altre.

Ad esempio i pixel font, utilizzati spesso come watermark, o i font calligrafici.

HMRJog.pngmUJosL.png

 

 

Ma con che criterio si abbinano tra loro i font?

C'è una regola di fondo da ricordare: bisogna creare contrasto, ma non troppo.

Ma cosa vuol dire? Vediamolo nel dettaglio.

 

Esempio 1 – Troppo poco contrasto:

In questo caso abbinando due basic font uno Serif e uno Sans Serif, notiamo che tra i due si genera davvero poco contrasto. Sono sufficientemente diversi per creare un senso di disturbo ma non abbastanza perché questo disturbo sia gradevole.

lgNyAg.png

 

Esempio 2 – Troppo contrasto:

In questo caso, invece, il contrasto tra i due font è veramente eccessivo, in quanto entrambi presentano uno stile molto particolare.

 

cCXhb4.png

 

Esempio 3 – Contrasto corretto:

Finalmente qui abbiamo un contrasto testuale gradevole.

 

DJpqbu.png

 

 

Il consiglio, quindi è di evitare sia l'abbinamento “Serif + Sans Serif” che l'abbinamento tra due font eccessivamente diversi.

 

Inoltre è buona norma non utilizzare più di due font diversi insieme, fatta eccezione per casi estremamente circostanziali.

896eEY.png

 


Discorso simile al precedente vale anche per il contrasto cromatico.

 

Esempio 1 – Troppo contrasto:

 

X7aPfR.png

 

Esempio 2 – Poco contrasto:

 

kzcrcU.png

 

Esempio 3 – Contrasto corretto:

 

2scx7N.png

 

Nel caso ci trovassimo ad utilizzare più di un font è consigliabile optare per due differenti sfumature dello stesso colore, oppure per un accostamento cromatico tra due colori non particolarmente in contrasto tra loro.

 

GnP41U.png

 

 

 

 

Esistono poi dei casi in cui la scelta di un font è quasi obbligata.

Immaginiamo di trovarci in una situazione simile a questa:

 

WMUokK.png

 

 

Non serve specificare che la versione corretta sia la prima.

Questo accade perché solitamente quando si è costretti ad avvalersi di caratteri “maiuscoli” è necessario utilizzare font Sans Serif, mentre bisogna sempre evitare i font calligrafici.

Per andare sul sicuro, è preferibile utilizzare font essenziali come ad esempio Intro.

 

Tuttavia, se la situazione lo richiede, si possono creare abbinamenti gradevoli anche con altri font più particolari, come Edo SZ, ad esempio:

 

nJSv9H.png

 

 

Un'altra dritta da tenere a mente riguarda l'allineamento.

Bisogna assolutamente evitare di stabilire più di due allineamenti differenti, in una composizione testuale.

 

 

Esempio doppio allineamento corretto:

VPCoLV.png

 

 

 

Esempio allineamento multiplo sbagliato:

Lm0emS.png

 

 

Quindi, se allineate al centro e a sinistra, evitate di allineare a destra e così via dicendo.

 

Ovviamente questo discorso vale esclusivamente per gli allineamenti formali, in quanto è consuetudine, nelle icon ad esempio, utilizzare differenti allineamenti per creare giochi di forme e di colori.

 

L'ultima dritta che posso darvi è cercare di utilizzare font coerenti con il tema.

Un'immagine horror, ad esempio, difficilmente sarà abbellita da un font calligrafico dolce e sinuoso, meglio optare per qualche font splatter che richiami appunto il tema dell'immagine o, nel dubbio, un bel Sans Serif neutro. ;) 

 

 

 

 

Spero di esservi stata utile, se avete domande non esitate a chiedere. ^^

 

 

Ps. Non usate MAI il Comic Sans.

 

Solo per la scritta "sakura" questa guida va letta xD..appartenenti gli scherzi...bella e utile anche se non ho photoshop ho appreso  varie cose che posso mettere in pratica anche con picsart ^^

Link al commento
Condividi su altre piattaforme

2 minuti fa, Kio_ ha scritto:

Breve storia triste: conosco gente che prende soldi per realizzare lavori di grafica e lo usa. :') 

Figurati, comunque. Grazie a te!

Gente che ha studiato ._. Oppure che ha un buon gusto innato, immagino xD

Link al commento
Condividi su altre piattaforme

2 minuti fa, Macasylveron ha scritto:

Solo per la scritta "sakura" questa guida va letta xD..appartenenti gli scherzi...bella e utile anche se non ho photoshop ho appreso  varie cose che posso mettere in pratica anche con picsart ^^

ma sakura non voleva dire ciliegio?

Link al commento
Condividi su altre piattaforme

Adesso, Macasylveron ha scritto:

Solo per la scritta "sakura" questa guida va letta xD..appartenenti gli scherzi...bella e utile anche se non ho photoshop ho appreso  varie cose che posso mettere in pratica anche con picsart ^^

E per le padelle volanti!

Felice di esserti stata utile, comunque. ^^

 

Adesso, LightRay ha scritto:

Gente che ha studiato ._. Oppure che ha un buon gusto innato, immagino xD

Più che altro gente che non sapendo far nulla in particolare tira a campare facendo lavori per i quali non è qualificata. :sweat:
E ovviamente in un momento di crisi molti sperano di "risparmiare" assumendo un grafico più economico, non tenendo conto che così facendo rischiano di danneggiare terribilmente la propria immagine...

Spoiler

(E comunque sì, la persona in questione ha anche un sacco di buon gusto. Non si fa mancare nemmeno un difetto. :moonmoon:)

 

Adesso, Delta_ ha scritto:

ma sakura non voleva dire ciliegio?

In questo caso è un riferimento a Sakura Kinomoto / Sakura Haruno, due personaggi che ho assai a cuore. ^^

Link al commento
Condividi su altre piattaforme

On 14/3/2017 at 16:33, Kio_ ha scritto:

Breve storia triste: conosco gente che prende soldi per realizzare lavori di grafica e lo usa. :') 

Figurati, comunque. Grazie a te!

"Ei amik cia' mi hanno commissionato un lavoro lo sto facendo ora con Pauerpoint cercasi consigli professionali almeno quanto me"

Ottima guida comunque, soprattutto per chi è alle prime armi :th_sisi:

Link al commento
Condividi su altre piattaforme