Come funzionano i caratteri per i siti

I caratteri o font, sono una risorsa importantissima perchè rappresentano una parte vitale della tua comunicazione aziendale. Ormai la comunicazione si muove tra l’online e l’offline è quindi importante che sia il sito web che la brochure abbiano lo stesso effetto visivo.

Solo pochi anni fà l’utilizzo dei font sui siti web era limitato a poche famiglie di font: quelle preinstallate su quasi tutti i computer:

Arial, Helvetica, Trebuchet, Verdana, Lucida, Times New Roman, Georgia, Palatino, Courier

Questo era un limite alla creatività grafica con la quale riportare lo stile aziendale anche nella comunicazione online.

Per comunicare meglio si usavano programmi di grafica

A quell’epoca i testi, come i titoli, venivano gestiti manualmente tramite l’utilizzo di immagini con programmi di grafica.
Quindi si creavano delle immagini con programmi come photoshop o fireworks, che salvate nel formato piu’ corretto per l’utilizzo (gif, jpg o png) venivano poi pubbllicate sui siti aziendali.
Il limite tecnico era fondamentalmente di due tipologie:

• Il primo era che l’aggiornamento dei titoli implicava il dover ricreare una nuova immagine che andava salvata, ottimizzata e poi ricaricata sul sito. Non era complessa come operazione ma sicuramente piu’ alla portata di un tecnico.
  Il secondo era che una immagine ha un “peso” ( o dimensione) in Kb notevolmente superiore e quindi la pagina veniva caricata con tempi piu’ lunghi.

 

L’avvento delle librerie di caratteri per il web

Sono arrivate le prime librerie di font che venivano caricate sul sito web via ftp ed attivate tramite codice nell’header in html di ogni pagina del sito.
Il vantaggio è stato enorme, con un piccolo prezzo in termini di caricamento delle librerie dovuto alle loro dimensioni si poteva ottenere un GRANDE vantaggio: i titoli o addirittura i testi (tag p ) potevano essere cambiati quando si voleva senza dover rifare in grafica i testi stessi.
Questo creava un limite: spesso questi font non erano disponibili in versione “Cartacea” cioè non erano disponibili dei file font utilizzabili con illustrator , photoshop etc etc
Quindi le aziende avevano spesso una immagine tra off line e on-line con testi differenti.

L’avvento di google font libera la creatività

A partire dal 2010 con rinnovi nel 2011 e nel 2016 nasce Google Fonts che distribuisce font/caratteri con licenza open source.
I caratteri piu’ utilizzati sono Open Sans, Roboto, Lato, Slabo, Oswald e Lobster.
La libreria contiene circa 877 font che in media sono stati scaricati circa 19 miliardi di volte…ognuno!

• Sans Serif – https://fonts.google.com/?category=Sans+Serif
• Serif – https://fonts.google.com/?category=Serif
• Handwriting – https://fonts.google.com/?category=Handwriting
• Display font – https://fonts.google.com/?category=Display

Come aggiungere i font di google al vostro sito:

Poter aggiungere un font di google è una operazione veloce che non richiede particolari competenze tecniche, serve aggiungere nel tag Head codice html e richiamare il font nel codice css del sito.
Qui puoi trovare la guida ufficiale di Google alle Google font api

Senza dover eseguire installazioni consigliamo l’utilizzo del sistema asmartbox che include tutti i font di google all’interno dei siti realizzati.

Il vantaggio dei font di google?

Potendo richiamare i font di google direttamente dai server di google, senza dover metterli sul proprio sito via ftp, permette di avere un doppio vantaggio: eliminare file non necessari sul sito e sfruttare invece la velocità e l’uptime dei server di google.

Come scaricare tutti i font di google:

E’ possibile scaricare tutti i font di google in un file zippato da circa 600mb