Vai al commento

Come abbinare i font? [Guida]


Kio_

Post raccomandati

Inviato

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

 

  Apri contenuto nascosto

 

 

 

 

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.

 

Inviato

Guida semplice ma soprattutto ottima per chi è alle prime armi! :3

Inviato
  On 14/03/2017 at 15:32, LightRay ha scritto:

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

Grazie per i consigli! :3

Espandi  

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

Figurati, comunque. Grazie a te!

Inviato
  On 14/03/2017 at 15:21, Kio_ ha scritto:

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

 

  Apri contenuto nascosto

 

 

 

 

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.

 

Espandi  

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 ^^

Inviato
  On 14/03/2017 at 15: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!

Espandi  

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

Inviato
  On 14/03/2017 at 15:36, 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 ^^

Espandi  

ma sakura non voleva dire ciliegio?

Inviato
  On 14/03/2017 at 15:36, 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 ^^

Espandi  

E per le padelle volanti!

Felice di esserti stata utile, comunque. ^^

 

  On 14/03/2017 at 15:37, LightRay ha scritto:

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

Espandi  

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...

  Apri contenuto nascosto

 

  On 14/03/2017 at 15:40, Delta_ ha scritto:

ma sakura non voleva dire ciliegio?

Espandi  

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

Inviato
  On 14/03/2017 at 15: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!

Espandi  

"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:

Inviato
  On 14/03/2017 at 15:40, Kio_ ha scritto:

E per le padelle volanti!

Felice di esserti stata utile, comunque. ^^

 

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...

  Apri contenuto nascosto

 

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

Espandi  

eh ma io sono noob .-. XD

Inviato
  On 14/03/2017 at 15:42, Gallady ha scritto:

"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:

Espandi  

Citazione testuale. :moonmoon:

 

Grazie mille! ^^

Inviato
  On 14/03/2017 at 15:40, Delta_ ha scritto:

ma sakura non voleva dire ciliegio?

Espandi  

Card captor sakura...per ora sto impazzendo per sakura...è da tre giorni che guardo lanime in tv e cerco il manga...e no...fiori di ciliegio xD 

 

  On 14/03/2017 at 15:40, Kio_ ha scritto:

E per le padelle volanti!

Felice di esserti stata utile, comunque. ^^

 

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...

  Apri contenuto nascosto

 

Espandi  

La prossima volta metti "tsubomi" :secret:

Grazie ^^

 

  On 14/03/2017 at 15:40, Kio_ ha scritto:

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

Espandi  

Ma sakura non è quella di card captor?...aspe...c'è ne sono due?

Archiviata

La discussione è ora archiviata e chiusa ad ulteriori risposte.

×
×
  • Crea...