La combinazione dei font può essere una vera e propria sfida. Selezionare due o più tipi di carattere che funzionano bene è un conto- selezionare due caratteri insieme per raggiungere i propri obiettivi tipografici, invece, può provocare un vero e proprio mal di testa. Per evitare di pendere un’aspirina, è consigliabile leggere questa guida sulla corretta combinazione dei font.
Le regole e le convenzioni tipografiche sono tante, soprattutto sul web. L’unico problema è che si rischia di dover far fronte a opinioni contrastanti tra di loro. Vediamo, quindi, se riusciamo a chiarire un paio di cose.
La cosa principale da fare è tenere a mente tutti gli elementi essenziali. Quando si stanno selezionando più tipi di carattere per combinarli insieme è fondamentale mantenere unità e varietà.
Bisogna sempre tenere a mente l’effetto complessivo che si sta cercando di raggiungere. Ogni tipo di carattere, come le persone, ha una personalità. Proprio per questo, le personalità dei font , proprio come quelli delle persone, a volte possono scontrarsi. Pensate ai vostri font come degli ospiti seduti ai tavoli durante un ricevimento di nozze oppure uno spettacolo in cui personalità troppo forti possono rendere l’intera atmosfera molto imbarazzante come, ad esempio, una puntata del Grande Fratello.
Non è più in giro, ma la Fusion Annunci 2011 malati di bundle del sito nella mia mente come un grande esempio di successo dello stack-em-alto uso dei font.
Non ci sono regole per dire se si dovrebbe o non si dovrebbe usare un numero specifico di caratteri su un layout di pagina. Usare più caratteri insieme può essere difficile, raggiungere l’armonia è impegnativo, ma se lo si sa gestire, il risultato può essere decorativo e suggestivo. Se si utilizzano meno caratteri, il vostro compito è più semplice. Provate a fare il meglio in entrambi i casi, selezionando font con molteplici varianti e pesi. In questo modo è possibile usufruire di una vasta gamma di stili, con la certezza che si completeranno molto bene a vicenda.
Per comprare o non comprare?
Ci sono un sacco di servizi gratuiti attraverso i quali è possibile usufruire di diversi font: i font google , fonts.com , fontsquirrel del generatore di kit dicarattere, ma senza sconto, pagando i singoli font se il progetto che merita. Il costo di una licenza per un singolo dominio può variare, ma ci sono molti vantaggi.
Qualità. La cura e l’attenzione presenti nella produzione di ogni tipo di carattere commerciale è di solito evidente in fatto di qualità. Con questo, non si vuole suggerire ai designer di non fare affidamento ai caratteri gratis ma si fa riferimento all’evidente differenza qualitativa. E ‘una notevole differenza nei dettagli più fini, la linea di spessore, le forme, lo spazio bianco e la crenatura (spaziatura tra i caratteri).
Confronta questi due font simili ..
La crenatura eseguita con il Museo è superiore. Senza un po’ di ritocchi, la crenatura in Quicksand è imperfetta (fuoco sulla ‘o ‘e la ‘i’ per esempio), e armeggiare con la crenatura sul web non è estremamente sicuro. Ci sono strumenti, kern.js per esempio, che consentono di specificare la crenatura per ogni singolo carattere di base, ma per grandi corpi di testo è impossibile.
“Un grosso problema, la differenza è appena percettibile!” Può succedere, ma il difetto è nei dettagli.
Originalità. Un altro vantaggio è la possibilità di rendere il lavoro sempre originale. Dopo aver pagato per ogni tipo di carattere, c’è una possibilità maggiore che il progetto manterrà un elemento di unicità.
Comunità. E’ consigliabile fare affidamento sul commercio sano per continuare il loro mestiere. In ogni caso, stiamo guardando un costo che può essere preso in considerazione nel progetto e passato al client.
Qual è la natura dei miei contenuti?
Quando si selezionano i font è importante considerare la natura del layout che si sta trattando. Ci sono diversi titoli, sottotitoli? In questo caso, se si utilizzano più tipi di carattere bisogna fare in modo che i ruoli siano chiaramente definiti, se un font viene utilizzato come sottotitolo, non passare a un altro tipo di carattere per una sottorubrica. Scegliere sempre un tipo di font chiaro.
Come posso raggiungere una combinazione di successo?
Potreste aver già sentito questa frase, una combinazione di successo si basa sulla concordia, o il contrasto, ma non sul conflitto. Vale a dire che i font selezionati possono lavorare bene insieme, per condividere alcune qualità, o per essere completamente diversi l’uno dall’altro. Tuttavia, le coppie di caratteri possono essere in conflitto in diversi modi.
Esaminiamo ciascuna delle possibilità di successo.
Abbinamento 1: Concordanza
Descrivere due caratteri che hanno delle evidenti concordanze consente si usare lo stesso tratto in entrambi i casi. Forse la loro crenatura, le proporzioni e gli altri elementi sono simili. Date un’occhiata a questi esempi di Kerry Scott Jenkins e noterete chiare similitudini proporzionali.
Un modo per raggiungere la concordanza tra i caratteri è di accoppiare due caratteri della stessa famiglia. Se sono di famiglia, si conciliano bene, giusto?! In ogni caso, la famiglia Droid, progettata da Steve Matteson per l’uso su dispositivi Android di Google, dispone di vari pesi e stili, con serif e sans-serif facce. Questi due caratteri lavorano molto bene insieme. Uno o l’altro carattere si fa carico delle voci, l’altra il corpo del testo.
O viceversa è una grande combinazione.
Sono puliti e moderni e adatti (come ci si aspetterebbe) per il web e dispositivi più piccoli a causa della loro grande x-height.
L’x-height di un carattere descrive l’altezza dalla linea di base per i tratti superiori dei caratteri minuscoli, come la x. Un grande x-height aiuta con leggibilità. E questi due caratteri condividono questa qualità.
Allo stesso modo, i tipi di carattere del progettista stesso, spesso mirano a trovare qualità di azioni che li aiutino a raggiungere l’armonia. Guarda le proporzioni che sono sorprendentemente simili in questi due tipi di carattere di visualizzazione (controllare le ‘o’) ..
Fare attenzione alla qualità della linea di due caratteri. Essi possono, in un primo momento, non avere nulla in comune, ma due tipi di carattere morbidi possono lavorare insieme bene più di quanto si possa pensare:
Più linee morbide insieme possono essere altrettanto efficaci:
Abbinamento 2: Contrasto
Il contrasto tra i caratteri rappresenta spesso una combinazione vincente, ma come si mettono in contrasto più font? Qui ci sono solo alcune delle qualità da cercare:
- Stile: Date un’occhiata a qualsiasi sito di risorse di carattere così vedrete classificati come Blackletter, Monospace, Script, Slab Serif Fonts ecc. Dei tipi di carattere che sono spesso in contrasto.
- Peso: Variare il peso dei caratteri è un modo comune per stabilire una gerarchia visiva. Una gerarchia raggiunta con il contrasto.
- Forma: Considerate le proporzioni di un carattere tipografico. La lunghezza relativa dei discendenti, la curvatura delle spalle, la direzione del movimento.
- Colore: il colore può facilmente determinare se due font funzionano bene insieme.
Nella sua forma più semplice, prendere in considerazione il contrasto tra serif e sans-serif.
E’un modo classico di accoppiamento. Un passo sicuro è prendere un serif decorativo per la voce e un sans-serif per il corpo o prendere un no-nonsense sans-serif per le linee, con un serif piacevolmente leggibile per il corpo..Un connubio di successo in molti casi. Diamo un’occhiata ad alcune combinazioni, iniziando con due font di sistema. Proprio così, anche loro possono stare bene insieme.
Dove si possono usare questi due caratteri insieme? Dai un’occhiata allo scheletrodel Boilerplate. Spogliati di ogni stile superfluo, Georgia e Arial funzionano perfettamente in questo ambiente.
Per avere un effetto più raffinato…
Da non dimenticare è il ruolo di qualsiasi testo per la scelta dei caratteri. Nei casi indicati sopra, abbiamo dimostrato una gerarchia tramite font-size, le voci sono più grandi rispetto al corpo del testo. Ci sono altri modi per stabilire chi è il capo, ossia notare il preso del testoCi sono altri modi per stabilire chi è il capo, ossia notare il preso del testo.
Nel caso in cui non siamo interessati ad un layout di pagina del tutto testuale. O forse abbiamo a che fare con due voci e nulla più (In un messaggio di costruzione, per esempio).Possiamo permetterci di essere un po’ più avventurosi. Come su un h1 sorprendente, accoppiato con un rinforzo h2?
Font abbreviati funzionano sempre bene per attirare l’attenzione.
Ecco un esempio di una combinazione simile ed efficace:
E per coloro che sono interessati, ecco una sintesi di ciò che questi caratteri sono:
- Script: Scriptorama Tradeshow JF
- Body copy: Attore(Google Web Fonts)
- Rubrica: carattere personalizzato by Simon Walker
E ancora si può far riferimento a una gerarchia chiara per scegliere il colore che sia in grado di non danneggiare l’altro:
Il titolo principale è un tipo di carattere in linea progettato espressamente per la titolazione. Nel caso in cui sia un tipo di carattere maiuscolo, potrebbe essere necessario espandere un pò il letter-spacing, come fatto nell’esempio qui sotto.
In linea descrive un carattere tipografico con linee bianche che appaiono all’interno dei tratti dei caratteri.- fonts.com
Purtroppo, non è ancora disponibile come un font web ma, nonostante ciò, è sicuramente uno dei font preferiti al momento.
Prendete questo font serif lastra, il minimo sforzo, il massimo impatto.
Terminazioni in Slab e Grabber sono molto efficaci, ma possono essere un po ‘insistenti, se non si sta attenti. E’ come mettere un elefante in un negozio di porcellane. L’esempio di sopra effettivamente funziona molto bene con un partner più delicato, perché contrasta e allo stesso tempo accompagna alcuni tratti della personalità. I caratteri sembrano molto diversi, ma se si esaminano le curve, vedremo che non sono così dissimili come si può pensare.
Alcuni tipi di carattere sono così deliziosi che quasi non possono fallire. Guardate Latticello, per esempio, che è sontuoso, elaborato e decorativo. Qui abbiamo l’accoppiamento con la Georgia:
E con Aller o un altrettanto sottile sans-serif:
Ecco un esempio di combinazione in cui ci sono due caratteri con una personalità che li fa scontrare– sono caratteri troppo forti e a sé stanti. Ma sapete una cosa? Questo connubio in realtà è molto bello!Quindi non si sa mai ..
Abbinamento 3: Conflitto
Cerchiamo di non concentrarsi troppo su ciò che non funziona bene, noi non vogliamo inasprire le combinazioni gioiose vero? Detto questo, facciamo facciamo vedere come due font, che sono forse troppo simili, possono apparire imbarazzanti insieme.
Ma perché non funzionano bene insieme? La nostra idea era quella di contrastare, garantendo al contempo un elemento di unità?
Sono stili diversi, uno è un Blackletter , l’altro romano serif.
Hanno proporzioni diverse, un o è condensato con un x-height relativamente grande, l’altro è più estes o e con alti ascendenti.
Eppure, essi sono simili per il peso e le dimensioni, ed entrambi condividono strani speroni sulla fine di ogni carattere.
Qui sta il problema.Condividendo questi ultimi tre dettagli (peso, dimensioni e decorazione) sono diventati troppo simili. Stanno eseguendo ruoli molto simili, ma le piccole differenze sono in conflitto e rende l’effetto complessivo molto imbarazzante.
Le curvature degli speroni, per esempio, sono in totale contrasto:
I loro assi sono troppo distanti:
E il modo in cui è formato un Blackletter dà una direzione leggermente in contrapposizione alla natura verticale della romana:.
Queste differenze non potrebbero essere un problema in altri esempi, ma qui abbiamo due caratteri, che (a prima vista) hanno lo stesso aspetto. E’un po’ come quando si vede una celebrità in piedi accanto a un modello di cera al Madame Toussauds . Non è mai bello da guardare.
Una volta giunti alla conclusione che non vi piace un abbinamento del tipo di carattere, dovete cercare in modo da prendere decisioni più rapid e in futuro.
Un ultimo suggerimento
In questi giorni, se si testa su directory Web di Google Font, troverete combinazioni e suggerimenti per ogni tipo di carattere.
Conclusione
Spero che il vostro approccio alla combinazione dei font venga semplificata da questa Guida per principianti. La principale regola è “Non si sa fino a quando non si prova!”
Essere avventuroso. Come tutti i web designer, abbiamo un grande archivio di font disponibili per usarli nei nostri disegni. Bisogna prendere in considerazione i fondamenti, per poi provare. Sarete sicuramente sorpresi dal risultato.
Commenti Recenti