10 Combinazioni di Google Font per il tuo sito

Scegliere i font per il proprio sito può sembrare tanto banale quanto complesso, vista la quantità di opzioni disponibili. E se ci affidassimo a qualche collaudata combinazione di Google Fonts per dare al sito più… carattere?

google-fonts

Come abbiamo visto in precedenza l’aspetto tipografico, sebbene sottovalutato, può essere determinante nel trasmettere il “tono“, il “timbro” della comunicazione web. Tra le varie possibilità offerte dalle risorse disponibili online, la scelta di un carattere alternativo ai soliti Arial, Times New Roman e Tahoma è praticamente una necessità. Google Fonts è una libreria tipografica sterminata liberamente utilizzabile e includerla nel proprio sito è banale; ciascun font è open-source e ottimizzato per la visualizzazione su differenti browser web.

Ciò su cui mi vorrei concentrare in questo post è offrire una scelta di 10 possibili combinazioni di famiglie di caratteri tra le quali scegliere. Ciascun accoppiamento viene fatto scegliendo una famiglia per i titoli (le headline – h1, h2, h3 – , gli elementi di navigazione e così via) e il corpo del testo vero e proprio.

I principi dietro a ciascuna scelta rispettano principi di:

  • leggibilità
  • coordinamento grafico
  • eleganza tipografica
  • impatto grafico

 

1. Raleway Light + Roboto Regular

font-combination-raleway-roboto

2. Volkhov Regular + Scada Regular

font-combinations-volkhov-scada

3. Montserrat + PT Serif Regular

font-combinations-montserrat-ptserif

4. Paytone One + Ubuntu Regular

font-combination-paytone-one-ubuntu

5. Josefin Slab + Maven Pro Medium

font-combination-josefin-slab-maven-pro

6. Bree Serif Regular + PT Sans Regular

font-combinations-bree-ptsans

7. Oxygen + Source Sans

font-combination-oxygen-source

8. Oswald + Muli

font-combination-oswald-muli

9. Quantico Bold + Droid Sans Regular

font-combination-quantico-droid

10. Sansita One Regular + Imprima Regular

font-combinations-sansita-imprima

 

Altre risorse per la tipografia web

Le risorse legate alla tipografia sono molteplici, soprattutto dopo l’introduzione della proprietà @font-face che consente l’utilizzo di font nei formati TrueType (TTF), OpenType (OTF), WOFF, SVG, Embedded OpenType (EOT). Mi limito ad elencarne qualcuna in questa sede come spunto di esplorazione:

Condividi questo articolo

2 commenti

Leave a comment