Tipografia sul web

Pubblicato il 30/10/2008 nelle categorie: webdesign

L’utilizzo dei caratteri (font) sul web è sempre stato limitato ai cosiddetti font di sistema. Windows, Mac OS e Linux hanno i propri caratteri predefiniti e di conseguenza nella creazione di un layout grafico bisogna tenerne conto: il testo propriamente testuale deve per forza essere in un carattere disponibile in tutti gli ambienti. Esempi di questi font sono: Arial, Helvetica, Times New Roman, Verdana, Trebuchet, o più genericamente serif e sans-serif.
Da qualche anno però si stanno sperimentando varie tecniche per ovviare a queste limitazioni.
Il primo è sIFR: un sistema che attraverso JavaScript, css e Flash permette l’utilizzo di qualsiasi tipo di font. sIFR ovviamente richiede che JavaScript sia abilitato e che sia installato il plug-in di Flash. Nel caso in cui queste due condizioni non fossero esaudite, il testo viene visualizzato normalmente, col font di sistema specificato nei css.
Il secondo, leggermente più difficile da implementare, è FaceLift, che funziona lato server ovvero ha bisogno di PHP (meglio se 5) e le librerie GD. Anche se è più ostico del primo, garantisce a mio modo di vedere, un risultato migliore, e non necessita di un plug-in aggiuntivo nei client.
Ma il terzo è sicuramente più interessante. Si chiama Typeface.js e necessita solo di JavaScript. Come funziona?

typeface.js uses browsers' vector drawing capabilites to draw text in HTML documents. For a good while, browsers have had support for vector drawing — Firefox, Safari, and Opera support the <canvas> element (as well as SVG), and IE supports VML.

The typeface.js project has two components: the perl module for converting fonts, and the javascript library for drawing in the browser. The perl module extracts glyph outline information from truetype fonts and writes that data in JSON format. The javascript library then traverses the HTML document and renders text using <canvas> or VML to draw the glyphs.

In browsers that support <canvas> the text is selectable, but you have to have faith. As you select there's no feedback, no highlighting to let you know that it's working. Future work will aim to implement better, cross-browser support for selecting text with highlighting.

Lo script Perl serve solo per convertire i font e renderli utilizzabili con la libreria js, e si può anche utilizzare il convertitore presente nel sito.

Condividi nel 2.0
  • Digg
  • del.icio.us
  • Technorati
  • Google
  • BarraPunto
  • Meneame
  • Pownce
  • Segnalo
  • StumbleUpon

Leave a Reply