L'uomo medio considera quale sapore di Doritos avrà un buon sapore con il suo Heineken. L'uomo sofisticato considera quale formaggio si abbinerà bene alla sua scelta di vino. Il progettista, ovviamente, considera quali due caratteri appariranno alla grande nella stessa pagina.
Oggi utilizzeremo l'API di Google Font come terreno di gioco per mescolare i font e trovare abbinamenti ideali. Sarai in grado di sfogliare e istantaneamente raccogliere le selezioni che ritieni siano appropriate per i tuoi progetti. La parte migliore? Devi solo copiare e incollare il nostro codice per implementare questi caratteri sul tuo sito. È completamente gratuito e non sono richiesti download.
Perché Google Fonts?
Il gioco dei font web è stato nell'aria qualche anno fa. Tutti avevano un'idea e una soluzione, ma nessuno sapeva veramente quale sarebbe stato lasciato in piedi quando si fosse depositata la polvere. Nella mia mente, questo dibattito è finito: @ font-face ha vinto.
Ecco perché vince @ font-face. In primo luogo, una soluzione CSS pura è quella con cui gli sviluppatori possono farcela. Inoltre, il fatto che @ font-face supporti pienamente la selezione del testo e azioni come copia e incolla significa che gli esperti di usabilità lo adorano. Infine, il fatto che si possa facilmente cucinare una ricetta @ font-face per quasi tutti i font significa che i designer lo adorano perché hanno una vasta gamma di font con licenza appropriata tra cui scegliere. Se si ottengono sviluppatori, progettisti e utenti di usabilità, è game over per Flash, JavaScript e soluzione basata su immagini.
Ora, nel mondo di @ font-face ci sono molti concorrenti. La mia soluzione preferita è solo usare i kit font-face di FontSquirrel, sia che io stia scaricando una delle loro opzioni predefinite sia che carichi un file di font in modo che il sito possa sfornare il resto per me.
Comunque, ho usato questa soluzione più volte su Design Shack, quindi volevo cambiare le cose oggi e usare qualcos'altro. Dal momento che Google Font Directory è gratuita e ha molte opzioni, è sembrata una scelta naturale!
Suggerimenti rapidi per combinare i caratteri
Prima di iniziare, ci sono alcune regole di base da tenere a mente quando si combinano i caratteri. Non sono assoluti da seguire in ogni occasione, ma solo alcune linee guida su cui attenersi in caso di dubbio.
Utilizza famiglie di caratteri
Prima di tutto, quando possibile, controlla i vari tipi di carattere all'interno di una singola famiglia. Questi font sono stati meticolosamente progettati per funzionare insieme e sono quindi il metodo più sicuro per variare il font senza creare discordia visiva.
Il contrasto è il re
Successivamente, quando si combinano due tipi di carattere, andare per contrasto. Prova ad abbinare una lastra audace con un leggero sans-serif. Se si mescolano due tipi di carattere che sono abbastanza simili, la mancanza di contrasto fa sembrare più che qualcosa sia leggermente fuori dalla tipografia piuttosto che l'impressione prevista di due caratteri tipografici diversi. Sia chiaro ai designer e ai non designer che sono presenti due stili distinti.
Vacci piano
Inoltre, limitati a pochi caratteri tipografici. Se riesci a cavartela con due, fallo, se no, fermati alle tre. In tutte le mani tranne quelle più esperte, molti tipi di carattere diversi devastano la coesione di un design. È facile finire per sembrare un bambino che ha appena scoperto il menu dei font in Photoshop per la prima volta.
Pensa a quali caratteri sono appropriati
Infine, lascia che il contenuto giochi un ruolo importante nella scelta dei font. Se i tuoi contenuti sono moderni e professionali, segui i caratteri che suggeriscono queste qualità. Se si suppone che assomigli a qualcosa del 1700, Helvetica Neue Ultra Light potrebbe non essere il modo migliore per andare.
I caratteri!
Basta discussioni già, mettiamoci al lavoro. Vai alla Google Font Directory e cerca le seguenti opzioni.
Se non hai mai lavorato con la directory dei caratteri di Google, non preoccuparti, è la soluzione di font personalizzata più semplice là fuori. Tutto quello che devi fare è inserire un link nell'intestazione della tua pagina e quindi fare riferimento al carattere nella tua famiglia di caratteri CSS proprio come faresti qualsiasi altra cosa. Per ogni abbinamento di font qui sotto ti fornirò tutti i frammenti di codice necessari in modo che tutto ciò che devi fare sia copiare e incollare!
Aragosta e cabina
L'aragosta è una delle mie sceneggiature preferite di tutti i tempi. È audace e bello pur restando leggibile, attributi che non si trovano facilmente in altri script.
Per completare questa affermazione forte, non vuoi nulla che sia in competizione per attirare l'attenzione. Scegli invece qualcosa di semplice e semplice come Cabin.
L'HTML
Il CSS
Raleway & Goudy Bookletter 1911
Raleway è un font super attraente, ma è così sottile che non sempre funziona al meglio sulla copia del corpo. Per questo motivo, è meglio tenerlo il più grande possibile ogni volta che puoi, il che lo rende un font perfetto per le tue intestazioni.
Penso che la combinazione di Raleway e del vecchio e piuttosto ornato Goudy Bookletter 1911 sia una coppia super elegante. Attenzione però, questo particolare Goudy è un po 'troppo complesso per tonnellate di body copy e sicuramente non vorrei leggere una grande pagina piena di copie scritte in esso. Questa combinazione è probabilmente la migliore per gli scenari con una copia minima.
L'HTML
Il CSS
Allerta e testo cremisi
Allerta è un sans-serif moderatamente audace con una personalità.Se non vuoi qualcosa di noioso o qualcosa di pazzo, è una buona via di mezzo che sembra grande sia in un titolo che in una copia del corpo.
Il testo cremisi è un carattere semplice con forti grazie, ma poca o nessuna differenziazione tra il denso e il sottile. Questo rende è mantenere una buona quantità di leggibilità anche quando è piccolo.
L'HTML
Il CSS
Arvo & PT Sans
Nessuna selezione di font sarebbe completa senza un buon slap serif. Google Font Directory ha solo un paio di questi e Arvo è attualmente una delle opzioni più audaci. Mi piace molto la maggior parte dei personaggi ma ammetto che la? S? si sente un po 'imbarazzante.
L'ho abbinato a un altro grande sans-serif: PT Sans. Ci sono diverse varianti di questo disponibile, ma la versione semplice è la migliore per la copia del corpo. Mi piace molto il modo in cui i personaggi sono, rende l'atmosfera molto amichevole.
L'HTML
Il CSS
Script Dancing e Josefin Sans
Gli script sono difficili da implementare correttamente, specialmente quando non sono ampiamente applicabili come Lobster. Dancing Script, mostrato nell'esempio sopra, non è sicuramente il mio script preferito, ma è uno dei migliori disponibili nella directory dei font di Google.
Dato che Dancing Script è molto più femminile di Lobster, l'ho abbinato a Joesfin, un vero sans-serif per migliorare ulteriormente questo stile. Questa combinazione è decisamente appropriata per qualsiasi prodotto o sito web con una differenza di sesso femminile.
L'HTML
Il CSS
Allan & Cardo
Di solito odio i font a caratteri comici, ma Allan è davvero accattivante e attraente. Adoro l'audacia del carattere e il tocco in corsivo.
Il mio abbinamento con un font vecchio stile (Cardo) sembra quasi un conflitto di periodi di tempo, ma mi è piaciuto molto il modo in cui guardavano insieme. Sentiti libero di optare invece per una luce sans-serif.
L'HTML
Il CSS
Molengo e Lekton
Molengo e Lekton si sentono insieme come un tentativo di vecchia scuola dal punto di vista tecnico. In gran parte a causa della sensazione di macchina da scrivere di quest'ultimo di questi.
Questa combinazione è qualcosa che mi aspetterei di vedere su un sito Web con uno sfondo di texture pergamena insieme a foto con un effetto polaroid e forse anche alcune macchie di caffè.
L'HTML
Il CSS
Droid Serif & Droid Sans
Uno dei nostri suggerimenti sopra suggeriva di stare in una sola famiglia. Lo metto in pratica qui con la combinazione naturale di Droid Serif e Droid Sans.
Come puoi vedere, entrambi sono dei bellissimi caratteri che si completano perfettamente l'un l'altro. Questi potrebbero essere facilmente commutati in modo che Droid Serif fosse il font del corpo e Droid Sans il font dell'header. Puoi avvistare Droid in natura su un certo blog di design popolarissimo.
L'HTML
Il CSS
Corbin e Nobile
Se sei un fan di Cooper Black, Corben è un'eccellente alternativa gratuita. Questo grasso e tonico servo è perfetto per tutto ciò che dovrebbe avere un'atmosfera anni '20 ad esso.
Nobile è un font più moderno con forme di lettere che appaiono allungate verticalmente. Lo stile minimal qui mantiene la tua attenzione sui titoli in grassetto.
L'HTML
Il CSS
Ubuntu e Vollkorn
Ubuntu è un sans particolarmente arrotondato che ha un aspetto moderno ad esso. Ho usato la variante grassetto qui per dare più contrasto dal testo del corpo.
Vollkorn è decisamente un carattere molto diverso, rispecchiando un'epoca passata. Ancora una volta, fai sempre attenzione a mescolare i font di diversi periodi di tempo. Assicurati che sia intenzionale e con lo scopo!
L'HTML
Il CSS
Dillo a noi i tuoi preferiti!
Questo articolo è pensato per essere uno strumento che puoi aggiungere ai segnalibri e rimandare ad ogni volta che sei bloccato e che ha bisogno di una buona combinazione di caratteri per il sito web su cui stai lavorando. Sia i caratteri web che i browser hanno fatto molta strada e queste soluzioni dovrebbero funzionare molto bene su tutta la linea, ma ognuno di essi include i caratteri di backup appropriati nel caso in cui il carattere di Google non venga caricato.
Lascia un commento qui sotto e dicci le tue combinazioni preferite di caratteri gratuiti.La directory di Google non ha carenza di offerte orribili e quindi sentiti libero di condividere anche i tuoi preferiti!
Google Fonts
Google Fonts è una libreria di oltre 800 caratteri tipografici diversi, completamente pronta per essere incorporata nel tuo progetto web. Questa serie esamina i caratteri di Google e condivide esempi e combinazioni di caratteri interessanti che possono portare il tuo progetto al livello successivo.