10 fantastiche combinazioni di caratteri Google tendenza nel 2020

Un elenco di caratteri di tendenza scelti a mano da Google Fonts che si abbinano bene insieme e come installarli sul tuo sito web.


Le migliori combinazioni di caratteri Google

La tipografia del sito Web era una pratica di progettazione più mistificante di quanto lo sia oggi. Il complicato processo di decorazione di una pagina web con caratteri personalizzati una volta richiedeva la conversione e l’incorporamento di file di caratteri da ospitare sul server dell’utente e la scelta dei caratteri disponibili era limitata alla raccolta dell’utente o alla conoscenza della tipografia al di fuori dei caratteri di sistema standard. Di conseguenza, la maggior parte dei siti Web sembrava quasi identica nella loro formattazione dei contenuti, che si basava su molti progetti abusati e banali font sicuri per il web.

Tutto è cambiato nel 2010 con l’uscita di Google Fonts, un progetto open source che consente un’implementazione molto più semplice di caratteri personalizzati sui siti Web. L’installazione di questi caratteri sul tuo sito Web è fortunatamente un processo semplice e veloce, ma dovresti essere consapevole che non tutte le combinazioni di caratteri nella biblioteca di Google sono una ricetta per il successo tipografico. Con le giuste combinazioni di caratteri e considerazioni sull’utilizzo, tuttavia, il tuo marchio online può trasudare professionalità, bellezza e facilità di lettura senza la necessità di costosi caratteri personalizzati. In questo articolo, ti mostrerò come realizzare tutto questo.

Un elenco di 10 combinazioni di caratteri Google di tendenza

Andiamo a questo! In nessun ordine particolare, ecco 10 delle migliori combinazioni di caratteri Google attualmente in tendenza:

1. Open Sans Condensed + Open Sans

Combinazione di caratteri Google di tendenza - Apri Sans Condensed e Apri Sans

Ecco una combinazione semplice che fa miracoli per quasi ogni uso applicabile. Apri Sans è uno dei – se non il – carattere più versatile dell’intera raccolta di Google Fonts. È estremamente facile da leggere in grandi blocchi di testo, pur essendo abbastanza sorprendente per i titoli.

Semplice. Sofisticata. Familiare. Non puoi sbagliare!

Uso nel mondo reale

Non posso prevedere nessuno scenario in cui Apri Sans sarebbe una cattiva scelta. A meno che tu non stia cercando specificamente un font serif, penso che questo servirà perfettamente qualsiasi azienda, blog, landing page o app web.

2. Oswald + EB Garamond

Combinazione di Google Fonts di tendenza - Oswald con EB Garamond

Oswald è un ottimo carattere per i titoli, indipendentemente dal peso del carattere o dall’uso di maiuscole. La sua natura condensata aiuta ad attirare l’attenzione e il pop, ma rende anche un testo piacevolmente unico come carattere del tuo corpo principale.

EB Garamond è un elegante aggiornamento del classico carattere Garamond. Immediatamente riconoscibile e senza tempo nell’aspetto, questo carattere trasuda una distintiva professionalità nella tua tipografia.

Uso nel mondo reale

Questo abbinamento funziona bene per i professionisti che si occupano di clientela di fascia alta, come avvocati, agenzie immobiliari o persino boutique di lusso. La versatilità di Oswald e l’aspetto classico di EB Garamond crea un ottimo testo descrittivo del prodotto in cui è importante enfatizzare un articolo di qualità premium.

3. Montserrat + Merriweather

Combinazione di Google Fonts di tendenza - Montserrat con Merriweather

Montserrat è uno dei preferiti dai designer per la sua versatilità e semplicità, e Merriweather si abbina meravigliosamente con il suo stile contrastante e la sua leggibilità. Sentiti libero di scambiarli come titoli o testo di paragrafo, entrambi funzionano alla grande!

Uso nel mondo reale

Questa particolare combinazione è un buon equilibrio tra design moderno e classico. Come tale, la sua varietà di usi potrebbe supportare molti tipi di attività. Personalmente, penso che questi caratteri farebbero bene a qualsiasi tipo di fonte di notizie online o agenzia di pubblicazione.

4. Roboto Thin + Roboto Regular

Combinazione di Google Fonts di tendenza: Roboto Thin con Roboto Regular

Il Roboto font-family è un preferito personale ed è anche uno che usiamo qui in How To Get Online. Estremamente versatile con una vasta gamma di pesi dei caratteri, praticamente non ci sono limiti a ciò che il carattere potrebbe essere utilizzato. Moderno e geometrico, pur rimanendo in qualche modo amichevole e affidabile, Roboto è una meraviglia di forma e funzione.

Uso nel mondo reale

Ecco un altro accoppiamento per il quale potresti avere difficoltà a trovare un uso inappropriato. Mentre Roboto funziona praticamente per qualsiasi cosa, penso sia particolarmente adatto alle start-up tecnologiche, alle piccole imprese moderne o a qualsiasi tipo di marchio con un occhio al futuro.

5. Raleway + Roboto Slab

Combinazioni di tendenza di Google Fonts - Raleway con Roboto Slab

È nostro amico Roboto ancora! Questa volta, tuttavia, stiamo esaminando la variazione serif, Roboto Slab. È un carattere versatile quanto suo cugino, ma con uno stile un po ‘più classico. Se abbinato al carattere distintivo e audace Raleway, abbiamo una straordinaria combinazione di tipografia pulita e raffinata.

Uso nel mondo reale

Raleway è uno di quei caratteri che urla raffinatezza. Se usato come titolo tutto compreso, penso che funzioni magnificamente per articoli di lusso come gioielli, abbigliamento di design o prodotti di e-commerce di alto livello simili. Roboto Slab lo supporta bene con un testo descrittivo semplice e accessibile.

Entrambi funzionano anche in modo intercambiabile. Prova diverse variazioni di peso per entrambi i caratteri nei titoli e nel testo del corpo e scopri quale abbinamento cattura il tuo marchio nel modo migliore.

6. Playfair Display + Source Sans Pro

Combinazione di Google Fonts di tendenza - Playfair Display con Source Sans Pro

Secondo il suo designer, Playfair Display è stato ispirato dalle forme letterarie del 18 ° secolo durante il passaggio dalle penne alle penne con punta in acciaio. Non sorprende quindi che questo carattere trasuda fascino antico ma con un tocco moderno.

Fonte Sans Pro spinge le cose un po ‘più avanti nel futuro, creando una combinazione affascinante che è ornata pur essendo utilitaristica.

Uso nel mondo reale

Playfair Display aggiunge un tocco personale a qualcosa come uno slogan o una descrizione del prodotto. Se hai la possibilità di utilizzare la sua e commerciale o i simboli di valuta, vedrai immediatamente perché è la scelta perfetta per un prodotto o un servizio incentrato sul lusso e sulle apparenze. Fonte Sans Pro mantiene il testo basato su una presentazione moderna e pulita.

7. Fjalla One + Noto Sans

Combinazione di Google Fonts di tendenza - Fjalla One con Noto Sans

Fjalla One potrebbe non essere il tipo di carattere più versatile, ma una cosa che fa estremamente bene è creare titoli che richiedono attenzione. Piccole o grandi, minuscole o tutte maiuscole, quelle lettere sono ipnotiche, qualunque cosa tu faccia con esse.

Noto Sans mira ad essere un carattere veramente universale in cui, indipendentemente dalla lingua, può essere visualizzato senza errori di formattazione per gli utenti di tutto il mondo. Opportunamente, l’estetica del carattere è tanto versatile quanto la sua utilità.

Uso nel mondo reale

I blog o le landing page sarebbero perfetti per questo abbinamento, o qualsiasi cosa con lunghi testi che richiedono sottotitoli notevoli per suddividere i contenuti. L’adattabilità universale di Noto Sans lo rende anche una buona scelta in cui raggiungere un pubblico internazionale è una priorità.

8. Alegreya + Lato

Combinazione di Google Fonts di tendenza - Alegreya con Lato

Alegreya ha un certo fascino che mi sembra molto “terroso” e amichevole. Non c’è pretesa sulla sua personalità; Quello che vedi è quello che ottieni.

Lato potrebbe dare Apri Sans una corsa per i suoi soldi come il campione di caratteri per tutti gli usi nella biblioteca di Google.

Insieme creano una combinazione divertente, facile da leggere e pragmatica.

9. PT Sans Narrow + PT Sans

Combinazione di Google Fonts di tendenza: PT Sans Narrow con PT Sans

Un’altra versione moderna di uno stile del Vecchio Mondo, PT Sans e i suoi fratelli, PT Sans Narrow, fare una dichiarazione immediata e inconfondibile quando accoppiati insieme.

Uso nel mondo reale

Entrambi i caratteri funzionano ugualmente bene come titolo o corpo del testo; il particolare abbinamento che scegli dipenderà dalla natura delle tue parole, anche se tendo a preferire PT Sans Narrow a raffiche più brevi.

Considerato come uno “strumento molto importante per le moderne comunicazioni digitali”, sembra più adatto a – sebbene certamente non limitato a – usare questi caratteri per startup tecnologiche, applicazioni software o altre attività digitali.

10. Amatic SC + Josefin Sans

Combinazione di Google Fonts di tendenza - Amatic SC con Josefin

Va bene, questo è decisamente più leggero. Ovviamente questa combinazione non funzionerà per tutti, ma la natura stravagante di entrambi Amatic SC e Josefin Sans creare qualcosa che spicca sicuramente, fintanto che si esercita cautela!

Uso nel mondo reale

Se sei un artista, un musicista o un intrattenitore dallo spirito divertente, questo tipo di carattere potrebbe essere essenziale per catturare la tua personalità unica. A seconda del tono generale e dell’oggetto, questa combinazione potrebbe funzionare anche per un blog di nicchia.

Un consiglio: non usare Amatic SC come testo principale. Farai impazzire i tuoi lettori.

Bonus: 5 dei nostri font premium preferiti

Sappiamo che questo articolo riguarda i migliori caratteri Google di tendenza, ma volevamo anche menzionare alcuni dei nostri caratteri premium preferiti come bonus. I caratteri premium, ovviamente, non sono gratuiti, ma danno al tuo sito web un design più unico e personalizzato. Questi caratteri non sono popolari o di tendenza e sono effettivamente l’opposto di quelli che abbiamo elencato sopra. Tuttavia, questi sono ottimi per coloro che desiderano un design personalizzato e personalizzato per il loro marchio e vanno bene se utilizzati per i loghi o anche titoli creativi:

Bonus 1: The Mega Craft Bundle X

Bonus 2: il pacchetto di San Valentino

Bonus 3: The Cool Font Bundle

Bonus 4: The Little Graphics Bundle

Bonus 5: Geloso

SUGGERIMENTO VELOCE: I caratteri premium offrono ai designer la possibilità di realizzare un design senza tempo e sono altamente raccomandati per i loghi e l’identità del marchio.

Perché dovresti usare Google Fonts?

Benvenuto in ciò che molti web designer considerano il loro migliore amico. Parlando per esperienza, posso dirti che raramente incorporo più file di caratteri personalizzati nei siti Web. Google Fonts ora è quasi esclusivamente il primo e l’ultimo posto a cui mi rivolgo per la tipografia di un sito Web. Ecco perché:

  • Suo completamente gratis. Non importa quanti caratteri scegli o su quanti siti web li usi. Non pagherai mai un centesimo.
  • A partire da marzo 2018, ci sono oltre 850 caratteri nella biblioteca. È probabile che troverai lo stile giusto per abbinare il tuo marchio.
  • Suo veloce. Poiché i caratteri sono ospitati sui server di Google, i file vengono compressi in modo intelligente e progettati per essere caricati rapidamente.
  • Suo facile. Una semplice copia e incolla in un file HTML e il gioco è fatto.
  • Suo organizzato. Tutti i caratteri sono classificati e ricercabili all’interno di un database. Non dovrai più frugare nelle sottocartelle disordinate sul tuo computer per trovare quel font perfetto.
  • Ho già detto che lo è gratuito? È gratis!

Come installare Google Fonts

Nessun mal di testa richiesto qui. Vai a Google Fonts e trova i font di cui hai bisogno.

Quando si selezionano i caratteri, questi vengono aggiunti cumulativamente a una raccolta nella parte inferiore della pagina. Al termine della ricerca, fai clic sulla scheda in basso e verrà visualizzata una finestra con le istruzioni di incorporamento.

Aggiunta di stili

Da qui puoi scegliere di includere uno stile aggiuntivo come corsivo, grassetto, grassetto corsivo e così via. Basta fare clic su PERSONALIZZARE scheda e seleziona gli stili che ritieni necessari.

Ad esempio, ecco come selezionerei entrambi regolare e grassetto testo per il carattere Khula.

Aggiunta dello stile del carattere in Google Fonts

Incorporamento di Standard o @Import?

Noterai che hai due opzioni per incorporare i caratteri sul tuo sito Web: utilizzare uno standard da utilizzare nel tuo sito HTML file o a @import url per essere incluso nel tuo sito CSS file. Quindi quale dovresti usare?

Generalmente l’opzione migliore è quella di copiare e incollare il file linea nel tuo file HTML. In genere i tuoi caratteri si caricheranno più velocemente in questo modo piuttosto che attendere il caricamento del file CSS, e questo metodo ha anche un supporto un po ‘migliore per i browser (molto) vecchi.

Dove mettere il codice

Stai per copiare e incollare la riga di codice che Google ti fornisce sezione del tuo file HTML. Quindi usando il font Khula che ho scelto sopra, sarà simile a questo:

SUGGERIMENTO VELOCE: Puoi anche specificare gli stili dei caratteri scrivendoli nell’URL, separati da virgole. Ad esempio: “https://fonts.googleapis.com/css?family=Khula:grassetto, corsivo, BoldItalic

Utilizzo del carattere nel foglio di stile

Ora è sufficiente chiamare il carattere come al solito all’interno di CSS codice. A scopo dimostrativo, l’intestazione principale e il testo del paragrafo potrebbero apparire così:

h1 {
famiglia di caratteri: “Khula”, sans-serif;
peso carattere: 700;
dimensione carattere: 48px;
}
p {
famiglia di caratteri: “Khula”, sans-serif;
peso carattere: 400;
dimensione carattere: 16px;
}

SUGGERIMENTO VELOCE: Assicurati di includere un carattere di fallback come “serif”, “sans-serif” o un carattere simile sicuro per il Web nel raro caso in cui il tuo Google Font non riesca a caricare.

Consigli sull’associazione dei caratteri

Decidere quali caratteri raggruppare a volte può essere un difficile equilibrio artistico da colpire. Da un lato, la selezione del carattere sarà più efficace quando c’è abbastanza contrasto negli stili; ogni carattere sul tuo sito deve distinguersi dagli altri e guadagnare una giustificazione per il suo utilizzo. D’altra parte, non vuoi che i tuoi caratteri si allontanino troppo l’uno dall’altro stilisticamente, il che potrebbe dare l’impressione che siano stati scelti a caso.

SUGGERIMENTO VELOCE: Pensa a quale emozione o idea evoca un particolare carattere. Prova ad accoppiarlo con un altro carattere che rievoca la stessa emozione o idea. Si tratta solo di trovare i caratteri giusti che parlino al tuo marchio unico. Lo saprai intrinsecamente quando un carattere sembra il tuo marchio o se sta dando segnali contrastanti.

Serif e Sans-Serif

Un metodo provato e vero è quello di accoppiare un carattere serif con uno sans-serif. I loro stili tendono a contrastare bene insieme, offrendo una facile distinzione tra titoli e paragrafi.

La sperimentazione è la chiave

Quando scelgo i caratteri per un nuovo sito Web, mi piace scaricare tutte le possibili opzioni di Caratteri Google sul mio computer e giocare con loro in un documento di elaborazione testi. Giocherellare con dimensioni e pesi diversi e confrontare le combinazioni fianco a fianco è un modo efficace per determinare il miglior accoppiamento possibile. Prendendo il tempo di sperimentare, potresti persino scoprire che usando a magro la variazione di un determinato carattere rende il testo del titolo migliore rispetto a se si dovesse usare un carattere completamente separato. (La soluzione più semplice è spesso la migliore.)

Conclusione

Google Fonts è una potente risorsa per i bricolage che non vogliono pagare per costosi caratteri personalizzati sul loro sito web. Ma da un grande potere derivano grandi responsabilità: la tipografia richiede un’attenta considerazione per farlo bene, e non tutti i caratteri là fuori sono vincitori. Speriamo che questa guida ti aiuti a orientarti nella giusta direzione, ispirandoti a trovare quel perfetto abbinamento di caratteri per catturare la personalità del tuo marchio.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map