Share
Accoppiare i caratteri può essere una sfida. Selezionare due o più font che funzionano bene è una cosa: selezionare due che funzionano insieme per raggiungere i tuoi obiettivi tipografici potresti aver raggiunto l'aspirina. Vediamo se possiamo alleviare qualsiasi mal di testa. Questa guida ti aiuterà a iniziare con l'associazione dei font per il web.
Fortunatamente, la tipografia è stata intorno a un lasso di tempo. Le regole e le convenzioni tipografiche hanno avuto molte opportunità di stabilirsi e ci sono un sacco di risorse per aiutarti. L'unico problema è che, cercando su Internet, ti troverai solo di fronte a milioni di opinioni contrastanti! Vediamo se possiamo chiarire alcune cose.
Ecco una breve analisi di ciò che tratteremo in questa guida:
Tieni a mente gli elementi essenziali. Quando si selezionano più tipi di carattere per lavorare insieme, è fondamentale mantenere entrambi unità e varietà.
Quanti caratteri inserisci nel mix dipendono interamente da te, ma tieni a mente l'effetto complessivo che stai cercando di ottenere. I caratteri, come le persone, hanno personalità. E le personalità dei caratteri, proprio come quelle delle persone, a volte possono scontrarsi. Pensa ai tuoi caratteri come ospiti da tavolo durante un ricevimento di nozze; un intrattenitore di solito è sufficiente perché troppe personalità forti possono rendere l'atmosfera scomoda, come un episodio del Grande Fratello.
Assicurati che ci sia alcuni carisma nel gruppo però; otto persone con poco da dire solo risultati in attesa di arricciare i tuoi discorsi ...
Non è più in circolazione, ma il sito bundle di Fusion Ads 2011 mi è rimasto in mente come un grande esempio di successo pila-em-alta uso dei caratteri.
Non ci sono regole per dire che dovresti o non dovresti usare un numero specifico di caratteri su un layout di pagina. Usare più tipi di carattere insieme può essere difficile, raggiungere l'armonia è difficile, ma se lo gestisci il risultato può essere decorativo e sorprendente. Usa meno caratteri e il tuo compito è più semplice. Cerca di sfruttare al meglio entrambi i mondi selezionando i caratteri con più varianti e pesi. In questo modo puoi sfruttare una serie di stili, sicuri sapendo che si completeranno a vicenda.
Ci sono un sacco di servizi gratuiti attraverso i quali puoi sfruttare @ font-face: google fonts, fonts.com, il generatore di font font di fontsquirrel, ma non scontare immediatamente i font a pagamento se il progetto lo richiede. Il costo di una licenza per singolo dominio può variare, ma ci sono diversi vantaggi per il bombardamento.
Qualità. La cura e l'attenzione che si danno alla produzione di caratteri commerciali sono solitamente evidenti nella qualità. Ciò non significa che i progettisti dietro i caratteri liberi siano scimmie ingabbiate, lontano da esso, ma spesso c'è una differenza qualitativa. È una differenza evidente nei dettagli più fini; gli spessori delle linee, le forme, lo spazio bianco e il kerning (spaziatura tra i caratteri).
Confronta questi due caratteri simili ...
Sabbie mobili e Museo Sans Rounded Il kerning eseguito con Museo è superiore. Senza alcun ritocco, la crenatura in Quicksand è imperfetta (concentrarsi su "o" e "i" per esempio), e armeggiare con il kerning sul web non è estremamente intuitivo. Là siamo strumenti, kern.js per esempio, che ti permettono di specificare la crenatura su base per carattere, ma grandi corpi di testo rendono questo poco pratico.
"Grande affare, la differenza è appena percettibile!" si può dire, ma il diavolo è nei dettagli. Quindi la mia Nan me lo dice.
Originalità. Un altro vantaggio è l'opportunità di distinguersi con il lavoro originale. Avendo pagato per i tuoi font, c'è una maggiore possibilità che il tuo progetto conservi un elemento di unicità.
Comunità. Mettere la mano in tasca è anche un modo per incoraggiare la crescita del settore. Le fonderie fanno affidamento su un commercio sano per continuare la propria attività. In ogni caso, stiamo valutando un costo che può essere preso in considerazione nel progetto e trasmesso al cliente.
Envato Market offre oltre 1.500 font premium da utilizzare nei tuoi progetti, quindi sentiti libero di dare un'occhiata e vedere cosa è disponibile.
Caratteri sul mercato Envato Quando si selezionano i font è importante considerare la natura del layout con cui si ha a che fare. Stiamo parlando principalmente di una copia del corpo? Ci sono più titoli, sottotitoli? Forse è un layout di una rivista con mazzi, blockquotes? Quando si utilizzano più font, assicurarsi che i ruoli siano chiaramente stabiliti; se un font è usato come sottotitolo, non passare a un altro font per un sottotitolo altrove. Mantieni chiaro lo scopo di un font.
Per il momento, terremo le cose semplici e selezioneremo alcune coppie di font. Considereremo le circostanze in cui lavoreranno bene insieme e ci chiederemo perché.
Potresti aver già sentito questo; si basa l'accoppiamento riuscito concordia, o contrasto, ma no conflitto. Vale a dire che i caratteri selezionati possono funzionare bene insieme condividendo determinate qualità o essendo completamente diversi l'uno dall'altro. Tuttavia, le coppie di caratteri possono essere in conflitto in vari modi: essere troppo simili è solo uno.
Esaminiamo ciascuna delle possibilità di successo.
Descrivere due caratteri come aventi concordanza suggerisce la presenza dello stesso tratto in entrambi. Forse la loro crenatura è simile, le loro proporzioni, la loro altezza del cappuccio. Dai un'occhiata a questi esempi di Kerry Scott Jenkins e noterai chiare somiglianze proporzionali.
Un modo per raggiungere la concordanza tra i caratteri è quello di accoppiare due dalla stessa famiglia. Se sono di famiglia, sono destinati ad andare d'accordo, giusto ?! In ogni caso, la famiglia Droid, progettata da Steve Matteson per l'utilizzo sui dispositivi Android di Google, comprende vari pesi e stili, con facce serif e sans-serif. Forse un po 'fantasioso, ma questi due funzionano molto bene insieme. L'uno o l'altro si occupa delle intestazioni, l'altro il testo del corpo.
Droid Serif e Droid Sans In entrambi i casi è una grande combinazione.
Droid Sans and Droid Serif Sono puliti e moderni, in più (come ti aspetteresti) sono adatti al web e ai dispositivi più piccoli grazie alla loro grande altezza x.
L'altezza x di un font descrive l'altezza dalla linea di base ai tratti superiori dei caratteri minuscoli, come la x. Un'altezza x proporzionalmente grande aiuta con la leggibilità. E questi due condividono questa qualità.
Allo stesso modo, i font dello stesso designer condividono spesso qualità che li aiutano a raggiungere l'armonia. Guarda le proporzioni sorprendentemente simili di questi due caratteri (controlla la 'o') ...
Cowboyslang e Supria Sans Condensed di Hannes von Döhren Prestare attenzione alla qualità della linea di due caratteri tipografici. A prima vista potrebbero non avere nulla in comune, ma due tipi di caratteri ben eseguiti potrebbero funzionare meglio di quanto si pensi:
Bevan e Arapey Italic Linee più morbide insieme possono essere altrettanto efficaci:
Anodyne e Poulaire 
Il contrasto tra i font spesso presta una combinazione vincente, ma in che modo i fonts possono contrastare? Ecco alcune qualità da cercare:
Nella sua forma più semplice, considera il contrasto tra caratteri serif e sans-serif.
È un modo classico di abbinamento; prendi un serif decorativo per la voce e un sicuro sans-serif per il corpo. O prendi un sans-serif senza senso per le intestazioni, con un serif piacevolmente leggibile per il corpo. Un vincitore in molti casi. Diamo un'occhiata ad alcuni, dando il via con due font di sistema. Esatto, anche loro possono lavorare bene insieme.
Georgia e Arial Dove puoi vedere questi due in azione? Dai un'occhiata al boilerplate. Spogliato di ogni stile superfluo, Georgia e Arial funzionano perfettamente in questo ambiente.
Per un po 'più di raffinatezza ...
PT Serif e PT Sans Non dimenticare il ruolo di qualsiasi testo per cui stai scegliendo i caratteri. Nei casi precedenti, abbiamo mostrato la gerarchia attraverso la dimensione del carattere; i titoli sono più grandi del testo del corpo. Ci sono altri modi per stabilire chi è il capo, il peso è ovvio.
Lora Bold e Istok Web Diciamo che non ci interessa un layout di pagina interamente testuale. Forse abbiamo a che fare con due titoli e niente di più (un messaggio di Under Construction, per esempio). Possiamo permetterci di essere un po 'più avventurosi in quanto non dobbiamo tener conto di lunghe misure o grandi quantità di testo. Che ne dici di un h1 sorprendente, accoppiato con un h2 rinforzante?
I font condensati funzionano sempre bene per attirare la vostra attenzione, poiché occupano molto spazio verticale.
Bebas Neue e Alex Brush Ecco un esempio di una combinazione simile che funziona molto bene:
Il lavoro distintivo di Gerren Lamson e Simon Walker E per quelli di voi interessati, ecco una lista di quelli che sono questi caratteri:
E ancora, qualità assolutamente contrastanti, ma una chiara gerarchia attraverso il colore che impedisce di pestare le dita degli altri ...
O che ne dici di due amici sans-serif che giocano dritti? La prossima intestazione principale (Conqueror) è un font inline progettato espressamente per il titolo. Essendo un carattere maiuscolo, potrebbe essere necessario espandere leggermente la spaziatura delle lettere, come nell'esempio seguente.
In linea descrive un carattere tipografico con linee bianche che appaiono all'interno dei tratti dei caratteri. - fonts.com
Purtroppo non è ancora disponibile come font web, quindi per il momento devi arrangiarlo per il design dei pixel ... È sicuramente uno dei miei font preferiti al momento.
AW Conqueror Inline e Gudea Prendi questo font serif lastra; sforzo minimo, massimo impatto.
Alpha Slab One e Mako I serif di lastra fanno accattivanti accorgimenti molto efficaci, ma possono essere un po 'invadenti se non si fa attenzione. Bull in un negozio di porcellane tipo di cosa. L'esempio sopra funziona molto bene con il suo partner più delicato, perché contrasta e condivide anche alcuni tratti della personalità. Sembrano caratteri molto diversi, ma se esamini le curve, vedrai che non sono così dissimili come prima penseresti.
Alcuni font sono così deliziosi che quasi non puoi fallire. Prendi ad esempio Buttermilk; sontuoso, elaborato e decorativo. Sembrerà fantastico qualunque cosa tu accoppi (purché tu non tenti di rubare il suo tuono!). Qui abbiamo l'accoppiamento con la Georgia:
Buttermilk e Georgia E con Aller, un altrettanto sans-serif sottile:
Buttermilk e Aller Quindi questo sarebbe stato il mio esempio di abbinamento con una personalità in conflitto - troppo forte di per sé. Ma sai cosa? Posso vivere con questo, in realtà è abbastanza bello! Immagino che a volte non puoi mai dire ...
Buttermilk ed eccentrico Non concentriamoci troppo su ciò che non funziona bene, non vogliamo inasprire le combinazioni gioiose nel resto di questa guida, vero? Detto questo, illustriamo semplicemente come due tipi di carattere, che sono probabilmente troppo simili, possono sembrare un po 'strani.
Almendra e Stoke Ma perché non funzionano bene insieme? Pensavo che l'idea fosse di contrastare pur garantendo un elemento di unità?
Sono stili diversi; uno è una Blackletter, l'altro serif romano, controlla.
Hanno proporzioni diverse; uno è condensato con un x-altezza relativamente grande, l'altro più esteso con ascensori più alti, controlla.
Tuttavia condividono peso e dimensioni, ed entrambi condividono quegli strani speroni alla fine di ogni personaggio.
Qui sta il problema. Condividendo questi ultimi tre dettagli (peso, dimensioni e decorazione) sono diventati pure nello stesso modo. Stanno svolgendo ruoli molto simili, ma le piccole differenze sono contrastanti e ciò crea un effetto generale scomodo.
Le curvature degli speroni, per esempio, sono completamente in disaccordo tra loro:
I loro assi sono semplicemente "spenti":
E il modo in cui è formata una Blackletter gli dà una leggera direzione, al contrario della natura verticale del romano:.
Queste differenze potrebbero non essere un problema in altri esempi, ma qui abbiamo due caratteri che (a prima vista) appaiono uguali. È un po 'come quando vedi una celebrità accanto al loro modello di cera a Madame Toussauds. Non è mai comodo da guardare.
È difficile attribuire "lavoro" o "non lavoro" a fatti e cifre, normalmente sarà una sensazione che capirai, lo saprai. Una volta che hai concluso che non ti piace l'abbinamento dei font, prova a capire perché e ti aiuterà a prendere decisioni più rapidamente in futuro.
Al giorno d'oggi, se vai alla directory dei caratteri web di Google, troverai suggerimenti di abbinamento per ogni carattere. Ordinato.
Spero che il tuo approccio all'accoppiamento dei caratteri sia stato semplificato da questa guida per principianti. Se c'è una regola importante che dovresti togliere da questo è "Non lo saprai finché non provi!"
Sii avventuroso. Come web designer abbiamo un repository sempre crescente di font disponibili per l'uso nei nostri progetti. Considera i fondamenti, quindi sperimenta. Sarai indubbiamente sorpreso da ciò che trovi.
Se vuoi qualcosa di veramente unico per la tipografia del tuo sito web, prova a contattare uno degli esperti di Envato Studio per creare un carattere tipografico personalizzato.
Accentsconagua