Web typography: web fonts e Google fonts

Pubblicato il

Storicamente, i font che si possono utilizzare nei testi di un sito web in XHTML dipendono esclusivamente dai font disponibili nel client. Per questo motivo i web designer sono praticamente costretti ad accontentarsi di pochi font generici che sono presenti in ogni client ed in ogni piattaforma.

Web typography: web fonts e Google fonts
Come usare i Google Fonts in un sito web

Sono tre le famiglie di font che di solito vengono usate per realizzare un sito internet:

  • Sans-serif
  • Serif
  • Monospace

e le varianti più conosciute, come ad esempio Georgia, Times New Roman, Verdana, Helvetica e pochi altri.

Nel corso degli anni sono state trovate alcune soluzioni per aggirare il problema dei font sostituendo il testo con oggetti in flash, immagini ecc. Questi metodi hanno però introdotto ulteriori problemi. Ad esempio non sempre è garantita la compatibilità tra i diversi browser, flash ed immagini possono risultare non comprensibili dagli screen-reader e quindi rendere il sito web non accessibile ed infine questi testi non sono selezionabili dall’utente diminuendo drasticamente l’usabilità del sito.

Queste tecniche, oltre a generare numerosi problemi legati all’usabilità, non sono SEO friendly, ovvero non contribuiscono al posizionamento del sito internet e, addirittura, potrebbero essere anche controproducenti per un buon posizionamento.

Cosa bisogna fare per usare qualunque font in un sito web senza effetti collaterali?

La soluzione che in futuro sarà adottata sempre più frequentemente sarà l’utilizzo dei web fonts grazie ad un nuovo selettore CSS3: @font-face.

Grazie a questo CSS è possibile caricare un font non presente nel client da un server remoto. Per il momento non tutti i browser permettono di sfruttare questa opportunità ma la situazione è destinata a migliorare nel breve futuro.

Anche Google sta incentivando l’uso di font nel web. Proprio per questo motivo ha rilasciato la Google Font API per fornire agli sviluppatori web una libreria di font che possono essere utilizzati nei propri siti web.

Ad esempio la scritta:

Realizzazione Siti Vicenza

è stata realizzata usando proprio Google Font API per caricare un particolare font che solitamente non è installato nei PC. Il testo è selezionabile, leggibile dagli screen reader e non impatta il SEO. Inoltre, i browser che non sono in grado di riconoscere il selettore @font-face possono comunque mostrare il testo usando un carattere tra quelli a loro disposizione.

Ecco un altro esempio di font caricato attraverso il Google Font API

SEO Vicenza

Grazie al CSS3 il futuro del web si prospetta ancora più vicino ed attento alle esigenze dei web designer.