Ormai da tempo è possibile utilizzare font più coerenti al design e al target di un sito web senza essere legati all'utilizzo forzato di font standard presenti su tutti i sistemi operativi (Arial, Helvetica, Verdana, Georgia, Times, Courier e pochi altri) e senza utilizzare tecniche di font-replacement come sIFR, Cufon o immagini sostitutive del testo.
È semplice, ci basta embeddare con la giusta sintassi i nostri web fonts preferiti con la direttiva CSS3 @font-face o utilizzare servizi che ospitano raccolte di web font sui loro server come Google Web Fonts o Typekit.
La relativa semplicità d'uso, la compatibilità su Internet Explorer 6 e successivi e l'aumento esponenziale di showcase online di siti web d'eccellenza che utilizzano web fonts di ogni genere, ha creato un interesse e uno studio sempre più approfondito da parte di web designer e web developer per ottimizzare al meglio la renderizzazione dei testi delle pagine web.
Vediamo quali sono le tecniche più interessanti.
Prima di tutto bisogna usare un CSS reset che ci dia il massimo controllo sulla presentazione degli elementi tipografici come il famoso Reset di Eric Meyer o come Normalize di Nicolas Gallagher e Jonathan Neal. Personalmente preferisco usare il Meyer Reset v2.0 aggiungendo un accorgimento specifico per assicurare l'eredità delle proprietà font-weight, font-style presente anche nel framework Foundation di Zurb.
Vediamo un esempio specifico per titoli e paragrafi in questo modo:
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
/* font-family: Georgia, Times, “Times New Roman”; */
}
body {
line-height: 1;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: inherit; /* IE8 */
font-style: inherit; /* IE8 */
}
/* IE7 non riconosce il valore inherit, è necessario un hack o una
classe specifici. Esempio: 'h1 a { *font-weight: normal }' o '.ie7 h1
a { font-weight: normal }' */Poi stiliamo di nuovo i nostri selettori utilizzando la scala tipografica e le proprietà che più si preferisce. Ecco un semplice esempio con i px:
h1, h2, h3, h4, h5, h6 {
line-height: 1.25;
}
h1, h2, h3, h4 {
font-weight: bold;
}
h1 {
font-size: 46px;
margin-bottom: 12px;
}
h2 {
font-size: 35px;
margin-bottom: 9px;
}
h3 {
font-size: 28px;
margin-bottom: 12px;
}
h4 {
font-size: 21px;
margin-bottom: 3px;
}
h5 {
font-size: 18px;
margin-bottom: 3px;
}
h6 {
font-size: 15px;
}
p {
font-size: 15px;
line-height: 1.2;
}Google Web Fonts
Ora che abbiamo il pieno controllo dei nostri testi, sceglieremo per esempio il font che più ci piace su Google Web Fonts e linkeremo il foglio di stile con la direttiva @font-face fornita da Google nella head. Esempio:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600'
rel='stylesheet' type='text/css' />Dopo di che, specificheremo il font preferito e i relativi fallback con la proprietà font-family e il valore esatto della proprietà font-weight per evitare renderizzazioni inconsistenti. In questo modo:
h2 {
font-family: "Open Sans", "Helvetica Neue", HelveticaNeue, Helvetica,
Arial, sans-serif;
font-weight: 600;
}Gli stili
Dobbiamo fare attenzione, perchè se vogliamo creare un h2 in italico, dovremo ritornare su Google Web Fonts, scegliere anche lo stile italico e sostituire il link al foglio di stile precedentemente inserito nella head con il nuovo codice generato.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600italic,600'
rel='stylesheet' type='text/css'>
h2 {
font-family: "Open Sans", "Helvetica Neue", HelveticaNeue, Helvetica,
Arial, sans-serif;
font-weight: 600;
font-style: italic;
}Prevedere in anticipo gli stili che useremo per il nostro titolo e scegliere un font che li possieda tutti è importante per evitare che il browser provi a renderizzarli lo stesso e crei inconsistenze cross-browser.
Dalla lista fornita da Google quindi spunteremo le opzioni desiderate e avremo infine il codice corretto. Non conviene utilizzare tutte le varianti di ciascun font-family a priori, per non appesantire troppo il page load, ma scegliere solo gli stili strettamente necessari.
Usare uno dei font che abbiamo sul pc
Se vogliamo utilizzare sul web uno dei font installati sul nostro computer, lo convertiremo prima in 4 estensioni diverse (con un generatore come FontSquirrell) per poi utilizzare la sintassi cross-browser seguente:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}IE8 e inferiori non permettono il caricamento di file multipli col la proprietà src, ma l'hack del '?' fa interpretare il resto della dichiarazione esattamente come una stringa e rende visibile solo il font con estensione .eot.
È importante sapere anche che, sopratutto se decidiamo di usare i font ospitati sui nostri server, dobbiamo avere l'accortezza di dichiararli tutti in cima al foglio di stile, subito dopo il reset e prima degli altri stili, per evitare che vengano renderizzati solo dopo i fallback standard, o peggio che non venga renderizzato nulla e non si leggano i testi per qualche secondo (FOUC).
Infine il consiglio è quello di utilizzare la libreria javascript Modernizr per generare una classe selettiva al body che ci tornerà utile per i browser che non supportano la direttiva @font-face come Opera Mobile o Firefox 3. Stileremo in modo gradevole quindi anche i font standard specificati in precedenza come fallback. Ecco un esempio:
.no-fontface h2 {
font-size: 42px;
font-weight: normal;
}Link utili
- Usare i web fonts nei CSS (HTML.it - fonte "A List Apart")
- Normalize CSS
- Foundation Framework
- Typekit
- Watch your font-weight
- Fontspring's bulletproof @font-face syntax
