Continua a guardare dall'oBlòg
Questa volta parliamo di uno dei maggiori trend nel web design del momento: l'incorporazione di font personalizzati nei siti web (font replacement).
Ogni web designer sa come la scelta tipografica per la grande rete sia praticamente limitata ad una manciata di caratteri a causa degli standard per garantire l'accessibilità. Se questo poteva essere valido nel periodo post-browser-war, a fine 2009, in una internet in cui la forma riveste tanta importanza quanto i contenuti, queste limitazioni diventano soffocanti. In questo senso, Flash è stato una manna per i designer, grazie alla possibilità di incorporare i font, ha permesso di creare pagine visibili a tutti coloro dotati di Flash Player (il 99% dei computer del mondo), ma si è sempre trattato di una soluzione posticcia.
Da qualche tempo non è più necessario rivolgersi a Flash per ottenere semplici animazioni dinamiche (si pensi a jQuery o mooTools); ora anche incorporare font personalizzati diventa alla portata di chiunque mastichi un po' di CSS e HTML. Basta leggere questo articolo (in inglese) che spiega tutti (e dico: tutti) i trucchi per incorporare font non standard pur mantenendo la completa accessbilità. È un po' lungo, ma molto approfondito.
Per chi volesse passare subito all'azione consigliamo di andare su FontSquirrel, che fornisce degli ottimi font freeware e dei kit già pronti con HTML dimostrativo e CSS. Ovviamente è tutto legale.
http://www.fontsquirrel.com/fontface
Scaricando uno dei kit si ricevono:
- la famiglia di font in OTF/TTF (per Firefox 3.5 e Safari), EOT (Internet Explorer), SVG (Chrome, Opera, iPhone) e WOFF (Firefox 3.6+)
- il css con @font-face già preimpostato (@font-face è la tag css che permette di usare font personalizzati nella pagina)
- una pagina html dimostrativa con il font inserito (demo.html)
- il file readme.txt con la licenza del font
Se si volesse utilizzare un font non presente nella lista (e si è verificato di avere il diritto per poterlo convertire e usare nel web), sempre su FontSquirrel esiste il generatore di kit @font-face:
http://www.fontsquirrel.com/fontface/generator
Funziona così: si carica il font, lo si converte in quanti formati si vuole e si scarica il kit con css e pagina html dimostrativa già pronti.
In questo post in italiano viene spiegata l'utilità della tag @font-face:
http://css.flepstudio.org/css3/font-face.html
Nel caso si preferisse una soluzione più professionale indichiamo anche TypeKit, che pagando una quota annua, permette di usare una vasta gamma di font anche non-freeware.
Contenti web designer di tutto il mondo? Adesso non avete più limiti!