{"id":268,"date":"2012-05-22T21:40:20","date_gmt":"2012-05-22T19:40:20","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/diciamo-no-al-grassetto-simulato\/"},"modified":"2012-05-22T21:40:20","modified_gmt":"2012-05-22T19:40:20","slug":"diciamo-no-al-grassetto-simulato","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/diciamo-no-al-grassetto-simulato\/","title":{"rendered":"Diciamo no al grassetto simulato"},"content":{"rendered":"
\n

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\u00e0 una goffa imitazione del vero design del carattere. In questo articolo troverete dei modi per evitare di dare al browser questa seccatura.<\/p>\n

Non potete dare la colpa al browser perch\u00e9 cerca di compensare questa mancanza: il testo \u00e8 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\u00f2 essere meglio o peggio a seconda del loro browser e dei font che avete usato. Alcuni browser, come Firefox, sbavano di pi\u00f9 i bold, rendendo molto disordinata la visualizzazione del carattere. Altri browser, come Chrome, fanno poche sbavature ai bold, cos\u00ec poche che si perde la distinzione tra normale e grassetto. Nessuno di questi falsi caratteri si avvicina a quello che si pu\u00f2 ottenere con un font reale.<\/p>\n

Questi falsi stili per i caratteri non sono un grosso problema con la maggior parte dei font web-safe, dal momento che perlopi\u00f9 tutti questi font includono gli stili bold e italic. Tuttavia, ultimamente appaiono sempre pi\u00f9 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 \u00e8 l’uso improprio dei font web. O il web font stesso non ha il carattere bold o italic, o le regole @font-face<\/code> 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.<\/p>\n

Heading e font visualizzati con un solo carattere<\/h3>\n

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


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

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

  <h1>Yikes!
<\/code><\/pre>\n
Con questo risultato in Firefox:<\/p>\n
\"Faux-bold<\/p>\n
Fig. 1: Faux-bold Diplomata<\/p>\n<\/div>\n
Diplomata ha solo una \u201cface\u201d, quindi la regola @font-face<\/code> che avete \u00e8 impostata per font-weight: normal<\/code>. Dal momento che gli heading di solito hanno un font-weight: bold<\/code>, 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\u00e0 sufficientemente in grassetto. Il grassetto simulato che viene creato dal browser nasconde questi dettagli.<\/p>\n
Per Diplomata potete sistemare questa cosa aggiungendo font-weight: normal<\/code> agli stili del vostro h1<\/code>. Ma questa non \u00e8 una buona soluzione quando il vostro web font non \u00e8 disponibile e dovete tornare indietro attraverso l’elenco dei font che avete scelto. Una soluzione migliore \u00e8 quella di aggiungere una regola @font-face<\/code> aggiuntiva per il vostro web font single-face per indicare che il font-weight normale pu\u00f2 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.<\/p>\n
Se seguite il link alle googleapi per Diplomata in Internet Explorer, potete vedere la regola @font-face<\/code> cross-browser che Google fornisce. Potete usare quella regola @font-face<\/code> ed aggiungerne una copia al vostro CSS, cambiando la propriet\u00e0 font-weight<\/code> a bold.<\/p>\n
(Gli \u201ca capo\u201d sono indicati con \u00bb \u2014Ed.<\/em>)<\/p>\n
  <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\/ \u00bb
    diplomata\/v1\/8UgOK_RUxkBbV-q561I6kPY6323mHUZFJMgTvxaG2iE.eot'); 
    src: local('Diplomata'), local('Diplomata-Regular'), 
    url('http:\/\/themes.googleusercontent.com\/static\/fonts\/diplomata\/v1\/ \u00bb
    8UgOK_RUxkBbV-q561I6kPY6323mHUZFJMgTvxaG2iE.eot') format('embedded \u00bb
    -opentype'), url('http:\/\/themes.googleusercontent.com\/static\/ \u00bb
    fonts\/diplomata\/v1\/8UgOK_RUxkBbV-q561I6kD8E0i7KZn-EPnyo3HZu7kw.woff') 
    format('woff');
  }
 
  h1 {
    font-family: 'Diplomata', serif;
  }
  <\/style>

  <h1>Yikes!
<\/pre>\n
Questo preserva il design del font che avete scelto:<\/p>\n
\"Diplomata<\/p>\n
Fig. 2: Diplomata senza il grassetto simulato<\/p>\n<\/div>\n
Dal momento che Diplomata \u00e8 gi\u00e0 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<\/code> pu\u00f2 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<\/code> su FontSpring<\/a>, Font Squirrel<\/a> o Paul Irish<\/a>. Se il vostro sito usa un font single-face, potete evitare la simulazione di altri caratteri includendo delle regole @font-face<\/code> aggiuntive.<\/p>\n
Notate che la specifica CSS3-Fonts<\/a> definisce una propriet\u00e0 font-synthesis<\/code> che potrebbe controllare se si verificano dei falsi grassetti o falsi corsivi per una singola regola @font-face<\/code>, ma al momento non c’\u00e8 alcuna implementazione di questa propriet\u00e0. Le regole @font-face<\/code> duplicate sono il solo modo per controllare questo comportamento negli attuali browser.<\/p>\n
Non fatevi ingannare dalla perdita del bold e dell’italico<\/h3>\n
Il problema della mancanza dei caratteri bold e italic non \u00e8 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<\/code> come normal o includendo di default un solo tipo di carattere.<\/p>\n
Prendiamo ad esempio Lora<\/a> di Google Web Fonts. Se seguite il default, vi d\u00e0 solo un tipo di carattere per il font, che risulta in questa visualizzazione in Chrome per il testo di <strong><\/code> e <cite><\/code>:<\/p>\n
\"Faux<\/p>\n
Fig. 3: Grassetto e italico simulati in Lora<\/p>\n<\/div>\n
Non \u00e8 brutto come l’heading di cui sopra, ma si riesce a vedere che il grassetto non \u00e8 effettivamente cos\u00ec 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\u00e0 ha questo aspetto:<\/p>\n
\"Lora<\/p>\n
Fig. 4: Lora con gli effettivi caratteri bold e italic<\/p>\n<\/div>\n
La Google Font UI in realt\u00e0 avvisa l’utente di non includere troppi stili. Ecco i default per Lora, dove l’indicatore \u00e8 praticamente sul giallo, cos\u00ec le cose appaiono belle.<\/p>\n
\"Web<\/p>\n
Fig. 5: Web font UI \u00e8 inadempiente con i caratteri mancanti<\/p>\n<\/div>\n
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.<\/p>\n
\"Web<\/p>\n
Fig. 6: Web font UI con un pauroso segnale rosso<\/p>\n<\/div>\n
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\u00f2 incoraggia la dipendenza da sbavature e da posizionamento in oblique invece che dai veri stili che questo font ha a disposizione.<\/p>\n
Non \u00e8 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<\/code> correttamente. Altri servizi di web font impostano una regola @font-face<\/code> separata per ciascun font nella famiglia di caratteri, ciascuna con l’impostazione font-weight: normal<\/code>. Questo pu\u00f2 causare il manifestarsi di tutti i problemi dei single-face anche quando sono disponibili i caratteri bold e italic.<\/p>\n
Quindi, quando usate i servizi di web font, fate un piccolo sforzo e verificate in quanti pi\u00f9 browser possibile che quello che state ottenendo sia quello che desideravate. Assicuratevi che le vostre regole @font-face<\/code> si abbinino al peso e agli stili dei font e di avere una regola @font-face<\/code> per ogni stile che viene utilizzato dal contenuto. Non presumete che il web font service vi stia dando tutto ci\u00f2 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.<\/p>\n
Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
I browser possono fare cose terribili ai caratteri. Se il testo ha come stile bold o italic e la famiglia del carattere non include un font bold o italico, i browser compenseranno questa mancanza cercando di crearsi da soli degli stili bold e italic. Il risultato sar\u00e0 una goffa imitazione del design del carattere reale e pu\u00f2 diventare particolarmente atroce con i font web. Alan Stearns di Adobe condivide con noi delle tecniche e ci d\u00e0 dei suggerimenti su come essere sicuri che le regole @font-face corrispondano al font-weight e agli stili dei font e che ci sia una regola @font-face per ciascuno stile utilizzato dal contenuto. Se state passando parte del vostro tempo a scegliere un bel web font per il vostro sito, dovete a voi stessi e ai vostri utenti l’essere sicuri che stiate effettivamente usando un web font – e solo un web font – per visualizzare il contenuto del vostro sito in tutta la sua gloria.<\/p>\n","protected":false},"author":818,"featured_media":7000657,"comment_status":"open","ping_status":"open","template":"","categories":[242,244,247,66,275],"tags":[],"coauthors":[363],"class_list":["post-268","article","type-article","status-publish","has-post-thumbnail","hentry","category-browser","category-css","category-html","category-numero-51-22-maggio-2012","category-tipografia-web-font"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=268"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000657"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=268"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}