Si l’on considère que le web design, c’est à 95% de la typographie (et c’est sans doute grandement vrai), le moteur de rendu du texte d’un navigateur devient un élément primordial dans le choix de ce dernier. Dans les navigateurs les plus répandus, il en existe un qui se démarque particulièrement dans ce domaine : Safari (que ce soit sous Windows ou Mac).

Un lissage confortable…

Le lissage des polices sous Safari est très accentué. Le confort de lecture qui en résulte est agréable pour la plupart des sites web. On arrive facilement à confondre le texte HTML avec le texte des images. Ce lissage est particulièrement intéressant pour les polices à empattement (comme celle de mon blog).

… qui a ses défauts

Le texte est plus “joli” sous Safari, mais peut facilement devenir un problème.

Du côté de l’internaute, le texte de faible taille peut paraître très “baveux”, à cause du manque de précision qu’offre le lissage. Je l’ai par exemple remarqué sur ma sidebar.

firefox-safari-textrender

Du côté du web designer, il arrive d’avoir des problèmes liés à ce lissage de police qui agrandit la taille de cette dernière. Il m’est arrivé par exemple qu’un menu horizontal se retrouve “explosé” sous Safari parce que le texte manquait d’espace. J’ai monté une page pour illustrer ce problème.

firefox-safari-textrender-menu

Comment régler ce problème ?

Il serait trop bête de réduire la taille du texte (ou de modifier l’espacement des mots) sous prétexte qu’il ne marche pas sous un seul navigateur, en l’occurence Safari. Alors comme pour IE6 dans ces cas là, il est possible d’utiliser un hack (bien moche je vous l’accorde) que j’ai trouvé chez giantisland pour établir une CSS personnalisée pour Safari et Chrome (oui, parce que le hack joue sur les navigateurs utilisant WebKit).

#nav li a{
[padding:2px 11px;
padding:2px 7px;
]padding:2px 11px;
}

En gros :

  • la première ligne est pour les vieux Firefox et Netscape
  • la seconde ligne est pour Chrome et Safari
  • la troisième ligne est pour IE7

Ces trois lignes doivent suivre la définition normale de la CSS. Pour plus d’informations, allez voir la source du hack.

Et voici le résultat corrigé :

firefox-safari-textrender-corrected