Diciamo no al grassetto simulato

I browser possono fare delle cose orribili ai caratteri. Se il testo ha come stile bold o italic e la famiglia del carattere non include un font bold o italic, i browser compenseranno questa mancanza cercando di creare da soli degli stili bold e italic. Il risultato sarà una goffa imitazione del vero design del carattere. In questo articolo troverete dei modi per evitare di dare al browser questa seccatura.

Non potete dare la colpa al browser perché cerca di compensare questa mancanza: il testo è pensato per essere in grassetto o in corsivo e se non ci sono dati a disposizione il browser deve fare qualcosa. Pertanto, il grassetto appare come una versione poco precisa del glifo regolare e il corsivo appare come i glifi regolare ma forzati a posizionarsi in obliquo. Quello che i vostri utenti vedono può essere meglio o peggio a seconda del loro browser e dei font che avete usato. Alcuni browser, come Firefox, sbavano di più i bold, rendendo molto disordinata la visualizzazione del carattere. Altri browser, come Chrome, fanno poche sbavature ai bold, così poche che si perde la distinzione tra normale e grassetto. Nessuno di questi falsi caratteri si avvicina a quello che si può ottenere con un font reale.

Questi falsi stili per i caratteri non sono un grosso problema con la maggior parte dei font web-safe, dal momento che perlopiù tutti questi font includono gli stili bold e italic. Tuttavia, ultimamente appaiono sempre più siti con il grassetto simulato, a volte da parte di designer che dovrebbero essere a conoscenza di tale questione e che in effetti lo sono. In ogni caso, il principale responsabile è l’uso improprio dei font web. O il web font stesso non ha il carattere bold o italic, o le regole @font-face sono impostate nella maniera sbagliata. Questi problemi si possono risolvere. Vediamo come evitare che si verifichi il grassetto simulato (o faux bold) sul vostro sito.

Heading e font visualizzati con un solo carattere#section1

Considerate il caso in cui si usi un font web raffinato per gli heading. Supponiamo che Diplomata di Google Web Fonts catturi la vostra attenzione. Seguendo queste istruzioni, potete impostarne l’uso negli elementi h1:

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

  <style>
  h1 {
    font-family: 'Diplomata', serif;
  }
  </style>

  <h1>Yikes!

Con questo risultato in Firefox:

Fig. 1: Faux-bold Diplomata

Diplomata ha solo una “face”, quindi la regola @font-face che avete è impostata per font-weight: normal. Dal momento che gli heading di solito hanno un font-weight: bold, il browser espande i glifi nel tentativo di crearsi un bold. La preview del font che vedete aveva delle eleganti strisce nei tratti principali delle lettere ed era già sufficientemente in grassetto. Il grassetto simulato che viene creato dal browser nasconde questi dettagli.

Per Diplomata potete sistemare questa cosa aggiungendo font-weight: normal agli stili del vostro h1. Ma questa non è una buona soluzione quando il vostro web font non è disponibile e dovete tornare indietro attraverso l’elenco dei font che avete scelto. Una soluzione migliore è quella di aggiungere una regola @font-face aggiuntiva per il vostro web font single-face per indicare che il font-weight normale può anche essere usato per il bold. Poi usate l’effettivo font per i vostri heading ed il fallback per il bold quando si verifica il fallback.

Se seguite il link alle googleapi per Diplomata in Internet Explorer, potete vedere la regola @font-face cross-browser che Google fornisce. Potete usare quella regola @font-face ed aggiungerne una copia al vostro CSS, cambiando la proprietà font-weight a bold.

(Gli “a capo” sono indicati con » —Ed.)

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

  <style>
  @font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: bold;  
    src: url('http://themes.googleusercontent.com/static/fonts/ »
    diplomata/v1/8UgOK_RUxkBbV-q561I6kPY6323mHUZFJMgTvxaG2iE.eot'); 
    src: local('Diplomata'), local('Diplomata-Regular'), 
    url('http://themes.googleusercontent.com/static/fonts/diplomata/v1/ »
    8UgOK_RUxkBbV-q561I6kPY6323mHUZFJMgTvxaG2iE.eot') format('embedded »
    -opentype'), url('http://themes.googleusercontent.com/static/ »
    fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kD8E0i7KZn-EPnyo3HZu7kw.woff') 
    format('woff');
  }
 
  h1 {
    font-family: 'Diplomata', serif;
  }
  </style>

  <h1>Yikes!

Questo preserva il design del font che avete scelto:

Fig. 2: Diplomata senza il grassetto simulato

Dal momento che Diplomata è già abbastanza bold, va bene come heading con il font normal. Se altri font nello stack verranno usati al suo posto, gli heading avranno ancora un carattere bold. Questo trucco del duplicare le regole @font-face può funzionare anche con altri servizi di web font. In questo esempio ho duplicato la regola che utilizza Google, ma se state costruendo le vostre regole vi conviene controllare i consigli della regola @font-face su FontSpring, Font Squirrel o Paul Irish. Se il vostro sito usa un font single-face, potete evitare la simulazione di altri caratteri includendo delle regole @font-face aggiuntive.

Notate che la specifica CSS3-Fonts definisce una proprietà font-synthesis che potrebbe controllare se si verificano dei falsi grassetti o falsi corsivi per una singola regola @font-face, ma al momento non c’è alcuna implementazione di questa proprietà. Le regole @font-face duplicate sono il solo modo per controllare questo comportamento negli attuali browser.

Non fatevi ingannare dalla perdita del bold e dell’italico#section2

Il problema della mancanza dei caratteri bold e italic non è limitata ai web font single-face. Molti dei servizi di web font vi permettono di omettere casualmente dei font face. Alcuni sembrano essere impostati per incoraggiare i falsi caratteri, o creando tutte le proprie regole @font-face come normal o includendo di default un solo tipo di carattere.

Prendiamo ad esempio Lora di Google Web Fonts. Se seguite il default, vi dà solo un tipo di carattere per il font, che risulta in questa visualizzazione in Chrome per il testo di <strong> e <cite>:

Fig. 3: Grassetto e italico simulati in Lora

Non è brutto come l’heading di cui sopra, ma si riesce a vedere che il grassetto non è effettivamente così forte e che il corsivo non assomiglia affatto ai glifi arrotondati nella pagina di esempio di Lora. Il vostro testo potrebbe implicitamente o esplicitamente includere delle regole di stile bold o italic e se vi mancano quei caratteri il browser comincia a creare artefatti. Quello che volete ottenere in realtà ha questo aspetto:

Fig. 4: Lora con gli effettivi caratteri bold e italic

La Google Font UI in realtà avvisa l’utente di non includere troppi stili. Ecco i default per Lora, dove l’indicatore è praticamente sul giallo, così le cose appaiono belle.

Fig. 5: Web font UI è inadempiente con i caratteri mancanti

Se vi capita di notare che quello che state ottenendo non combacia con la pagina d’esempio e decidete di voler usare altri stili, l’indicatore diventa subito rosso.

Fig. 6: Web font UI con un pauroso segnale rosso

Se non siete sicuri di aver bisogno di quegli stili extra, il metro potrebbe indurvi a pensare che state facendo qualcosa di sbagliato includendoli! Ciò incoraggia la dipendenza da sbavature e da posizionamento in oblique invece che dai veri stili che questo font ha a disposizione.

Non è mia intenzione prendermela solo con Google Web Fonts. Almeno con quel servizio, se optate per gli stili bold e italic, imposta le regole @font-face correttamente. Altri servizi di web font impostano una regola @font-face separata per ciascun font nella famiglia di caratteri, ciascuna con l’impostazione font-weight: normal. Questo può causare il manifestarsi di tutti i problemi dei single-face anche quando sono disponibili i caratteri bold e italic.

Quindi, quando usate i servizi di web font, fate un piccolo sforzo e verificate in quanti più browser possibile che quello che state ottenendo sia quello che desideravate. Assicuratevi che le vostre regole @font-face si abbinino al peso e agli stili dei font e di avere una regola @font-face per ogni stile che viene utilizzato dal contenuto. Non presumete che il web font service vi stia dando tutto ciò di cui avete bisogno: se vi state prendendo il tempo di scegliere un bel font web per il vostro sito, assicuratevi che stiate usando davvero il web font e solo il web font per visualizzare il vostro carattere.

Illustrazioni: {carlok}