Web font

Lo sviluppo web ha fatto passi da giganti, ma per anni ha tralasciato il lettering. Fino ad ora…

Web font standard

Per anni è stato possibile strutturare siti web solo con alcune font scelte come standard e quindi leggibili su ogni browser a prescindere dal sistema operativo in uso. Queste font sono:

Arial
Verdana
Georgia
Comic Sans MS
Trebuchet MS
Courier
Times New Roman

L’uso di qualunque altra font avrebbe compromesso la lettura ed il caricamento dell’intero sito.
Negli ultimi anni sono avvenuti però seri cambiamenti al riguardo ed ora è possibile (con moderazione) integrare diverse font “non standard” nel proprio sito.

I vantaggi sono di mantenere un’immagine coordinata compatta e quindi facilemente riconoscibile e che i testi così stilizzati sono leggibili anche dai motori di ricerca; prima per ottenere lo stesso effetto visivo si era costretti ad inserire immagini in sostituzione.

Le scelte per includere una font “non standard” nel proprio sito sono due: Google Web Font e Font Squirrel.

Google Web Font

Google affronta la questione mettendo a disposizione una reposity (“archivione”) centralizzata di tutte le font che si vuole utilizzare, come fa anche per diverse API: Google Web Font.
Per aggiungere una font personalizzata è sufficiente inserire nella head un tag del genere:

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

E ricordare nello stile CSS l’utilizzo della font:

    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>

Indicando di seguito le sue alternative.
Il vantaggio è che i server di Google sono sempre on-line, costantemente monitorati ed aggiornati ed è Google a scegliere la soluzione visiva migliore!
Lo svantaggio è che è Google, cioé una società esterna che gestisce a titolo gratuito la visibilità di parte del nostro sito.

Font Squirrel

Squirrel font è un sito “più piccolo” che mette a disposizione font gratuite per l’uso web ed interi kit,”@font-face kit”, con codice CSS già impostato.
Il principio di Squirrel è quello di fornire tutti i formati font necessari ai vari browswer per una corretta lettura del sito. Per ogni font sono create le sue varianti nei formati:

TTF – TrueType format supportato da tutti tranne Internet Explorer
WOFF – Web Open Font Format supporatto da Firefox e Chrome
SVG – Scalable Vector Graphic supportato da Opera e Safari
EOT – Embedded OpenType promosso da Internet Explorer

Solo Firefox ed Internet Exploler 10 sono in grado di leggere le legature scritte nelle font.

Caricati i file delle font sul server nel CSS si richiama la font con questo codice:

 @font-face {
    font-family: 'Tangerine';
    src: url('Tangerinet.eot');
    src: url('Tangerinet.eot?#iefix') format('embedded-opentype'),
         url('Tangerine.woff') format('woff'),
         url('Tangerine.ttf') format('truetype'),
         url('Tangerine.svg#TeXGyreAdventorBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

E successivamente viene incluso nella descrizione CSS il carattere:

    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>

I vantaggi di questo sistema sono:

avere tutto sul proprio server e poter testare la grafica anche in una macchina non collegata ad Internet
usare la font .TTF fornita per produrre materiali non strettamente web

In aggiunta Squirrel offre la possibilità di generare un web kit a partire da una font di cui si è in possesso.

Copyright?

I copyright esistono ed esistono anche per le font. Anche se è uso comune scambiarsi font senza alcun problema e non badare ai warning di Indesign o Xpress, scambiarsi font è illegale.

Essendo i siti on-line ed i CSS facilmente indagabili è consigliabile quindi non utilizzare font sottoposte a copyright, pena cause legali o la chiusura del sito.

Come si possono conciliare le font cartacee con quelle web?

Scelgliendo imitazioni gratuite quasi perfette!

Nell’immagine seguente in sostituzione di un Helvetica Neue 55 regular si è utilizzato Anonymous Pro Regular.
Nell’intero blog la font TeXGyreAdventor sostituisce il Futura Std.