romy.tetue.net

Développement front et conception web
X-HTML, CSS, SPIP, sémantique et accessibilité

Paris-Web 2010, j’y vais ! (du 14 au 16 octobre).

Différence de lissage des caractères


11 juin 2007,
par Romy Duhem-Verdière

Partagez cet article : Voter pour cet artice sur hellocoton.fr Netvibes Yahoo myspace Technorati stumbleupon Digg Del.ico.us

Le rendu typographique d’une même page web diffère sensiblement selon l’ordinateur utilisé.

En affichant la même page web sur l’écran d’un Mac et sur celui d’un PC, on constate en général que la typo est plus douce, que les textes sont plus petits et que les couleurs sont plus claires et plus nuancées, sur le premier que sur le second. Vous l’ignorez trop souvent, mais la plate-forme utilisée pour surfer joue un rôle non négligeable dans l’affichage de la typographie d’une page web.

Une image vaut mieux qu’un long discours. Voyez donc comme les différences de rendu typographiques sont flagrantes sur ces deux captures d’écran d’un extrait de la même page affichée sur Mac puis sur PC :

JPEG - 52.1 ko
Sur Mac : doucement lissé
JPEG - 46.6 ko
Sur PC : nettement crénelé

Explication ? Le système d’exploitation du Mac comporte un utilitaire de lissage des caractères (anti-aliasing), qui affiche des textes doucement lissés (au risque du flou dans les très petites tailles) [1]. Par contre le système d’exploitation du PC ne sait pas lisser les caractères en dessous d’une certaine taille, ce qui affiche des caractères nets, mais crénelés [2].

Et on n’y peut pas grand chose. Le seul moyen d’éviter ces différences d’affichage et d’utiliser une image et non du texte. C’est le cas dans l’exemple ci-dessus, où seul le cartouche « NOUVEAUTÉ » s’affiche identiquement sur les deux systèmes, puisqu’il s’agit d’une image.

Rappelons d’ailleurs qu’il est utopique de souhaiter contrôler l’affichage typographique précisement, de façon à ce qu’il soit partout identique, puisqu’il est fonction non seulement du système utilisé mais aussi de l’outil de navigation, de la résolution de l’écran et même des paramétrages... de chaque utilisateur.

[1] Ne regardez surtout pas votre site dans Safari, le navigateur de Mac OS X : il vous semblera si magnifiquement beau que vous auriez peine à retourner à votre navigateur habituel. C’est très sérieusement pour cette raison que je boycotte Safari : trop performant, il n’est pas représentatif des conditions réelles de navigation de la majorité des internautes et induit le graphiste Web en erreur.

[2]  Il y a ceux qui savent, et ceux qui ne savent pas. Sous Windows XP le lissage des polices à l’écran n’est pas configuré par défaut. Il faut suivre les conseils que donne joyeusement Microsoft pour régler votre système d’exploitation. Ça a l’air facile, faut-t-il encore que vous passiez le Rubicon. Lisez attentivement les instructions dispensées sur le site de Microsoft.
Lu sur le blog design et typo de Peter Gabor : « Polices lissées sous Windows XP », septembre 2006.

Vos commentaires

  • Le 11 juin 2007 à 14:26, par Pieropaolo

    Et ce site est bien plus beau vu d’un Mac aussi... Mais il n’y a pas que le lissage qui joue, il y a ausssi le choix parmis les polices installées par défaut avec les systèmes : OS X offre des familles de polices plus variées (variété qui exige sans doute un bon lissage aussi). Ainsi, ce site dispose d’une très élégante police de titraille qui n’est, hélàs, pas visible sous Win XP.
    Par ailleurs, j’en profite pour souligner que le lissage sous Win XP est moins fin et produit un leger effet de bavures, c’est sans doute pour cela qu’il est désactivé par défaut.

  • Le 23 février 2009 à 20:27, par Chez Tine

    et bien ! mazette, c’est compliqué ... sur pc ... va falloir que j’imprime les explications pour les suivre convenablement ; j’espère juste ne pas me tromper ; ah ! comme le mac me manque ...
    merci pour cette information précieuse
    Tine

Un message, un commentaire ?

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d'abord sur gravatar.com (gratuit et indolore) et n'oubliez pas d'indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom



© 2000-2010 Romy Duhem-Verdière | Certains droits réservés | Qui suis-je ? | Contact | Aide | Top ↑
Vérifiez vous-même la qualité du code de cette page en la soumettant aux validateurs XHTML et CSS.