Créneler le texte pour un meilleur rendu

Étant de nature à écrire beaucoup et sans doute même trop, je cherche toujours à améliorer la mise en forme du texte sur mon blog. À défaut de me forcer à écrire moins, je peux au moins faciliter la lecture des textes. Et dans ce domaine, la référence reste pour moi Medium qui propose des mises en page très agréables.

Et j’ai (re)découvert un peu par hasard une option en CSS qui améliore à mon avis le rendu du texte : le crénelage, ou antialiasing en anglais. Les explications techniques sont un peu trop complexes, mais disons simplement qu’il s’agit d’adapter les polices pour avoir un rendu meilleur sur nos écrans composés d’une grille de pixels carrés. Les polices étant souvent rondes, il y a plusieurs options pour afficher chaque caractère et le crénelage peut offrir un rendu de meilleure qualité.

Avec la police choisie sur mon blog (Georgia), le rendu est très différent et le texte, comme on peut le voir sur l’illustration, est plus fin avec le crénelage (gauche) que sans l’option activée (droite). J’ai un peu hésité à activer le crénelage par peur que ce soit moins lisible, mais j’ai trouvé une solution pour éviter un côté trop clair : foncer légèrement la police. Le texte n’est pas en noir, mais en gris foncé et j’ai simplement opté pour une couleur un petit peu moins grise.

Crénelage à activé à gauche, inactif à droite

Crénelage à activé à gauche, inactif à droite (clic pour la taille originale)

Je suis plutôt satisfait du résultat, même si on est encore loin de mon objectif, mais c’est un pas dans la bonne direction.

Si vous voulez activer cette option sur votre blog, voici les trois lignes à ajouter aux blocs de textes concernés en CSS. La première active la fonction sur Safari (iOS et OS X), la deuxième sur Firefox (OS X) et la troisième sur la majorité des navigateurs sous Windows et Linux.

p {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering: optimizeLegibility;
}

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s