timthumb-2

La tipografia nel web

October 5, 2011

Questo articolo presenta una serie estremamente utile di suggerimenti e “best practice” per coloro che sono ancora abbastanza estranei all’uso della tipografia nel web. Una delle differenze sostanziali tra web e stampa è l’uso del font. Per la progettazione di uno stampato posso usare qualsiasi font che è in mio possesso, in qualsiasi dimensione e stile, andando a modificare ogni lettera volendo. Nel web non è sempre esattamente così. Vedremo i metodi più diffusi per l’incorporamento dei caratteri web, il dimensionamento font e come fissare un’ottimale griglia tipografica.

Il @font-face

Circa due anni fa il futuro dei font nel web è stato piuttosto incerto. Stava arrivando una rivoluzione che avrebbe svincolato dalle limitazioni dei font per il web: fu introdotto il @font-face.  Si tratta di una soluzione di puro CSS con un ottimo supporto browser (ovvio, ci sono sempre delle eccezioni) e che, a differenza dell’uso del “Cufon” JS, presenta risultati molto concreti grazie alla possibilità di selezionare il testo.

Se stai cercando di incorporare un font personalizzato nella tua pagina web, il modo più semplice in assoluto che ho trovato è quello di utilizzare i Web Font di Google. Questo servizio straordinario contiene oltre 180 famiglie di font e non richiede il download di files da parte vostra. Basta sfogliare la libreria, scegliere il font che si desidera, quindi copiare e incollare i frammenti di codice che viene dato. Non potrebbe essere più facile!

Questa è la sintassi per un uso corretto:

@font-face { 
 font-family: 'Some Font'; 
 src: url('SomeFont.eot') format('eot'), 
 url('SomeFont.woff') format('woff'), 
 url('SomeFont.ttf') format('truetype');
}

Il dimensionamento del font

Questo è in realtà un argomento molto più aspramente dibattuto di quello precedente. La verità è che ogni sviluppatore web è convinto che il proprio metodo per stabilire la dimensione del testo sia il “migliore”. Per la maggior parte dei casi impostare la dimensione in “em” sembra essere la scelta più popolare. Il principio di fondo è che l’uso del “px” si traduce in caratteri che non sono correttamente scalati in alcuni browser.

Kyle Schaeffer ha scritto un interessante articolo sul perchè usare percentuali possa essere una scelta migliore, ma da quello che posso dire, la maggior parte delle persone è ancora a favore di “em” e una tenace percentuale non si pone neanche il problema e continua con i vecchi cari “px” (io stessa ammetto di usare spesso i px per pigrizia!)

La griglia tipografica

Se davvero si vuole fare un salto di qualità e creare una vera tipografia del web, allora conviene dre una lettura all’articolo di Richard Rutter, “Compose to a Vertical Rhythm” che delinea alcune tecniche utili per la “giocoleria” sulla dimensione del carattere, l’altezza della linea e il margine o padding per creare un ritmo perfetto per la tua pagina .

Chris Coyier in un articolo su CSS-Tricks riprende questa tecnica e la amplia ulteriormente. Non pedetevi questa pagina in cui è possibile visualizzare e scaricare la griglia tipografica di Chris realizzata in modo ottimale.

Queste sono attualmente le basi per un uso oculato del font nel web. Sentitevi liberi di lasciare una confutazione feroce nei commenti se non siete daccordo!
Sono sempre alla ricerca di nuove idee per una migliore e più interessante tipografia.

Fonte: designshack.co.uk

Tags: , , ,

Leave a Comment