Il y a eu une résurgence d'intérêt bienvenue pour la typographie du web ces dernières années, avec de nombreux articles et de nombreuses conférences et discussions proposant des techniques et des théories. Il a été souvent affirmé qu'une bonne typographie nécessite un contrôle précis de la taille des fontes et de la hauteur de ligne. Mais on est sur le web : c'est un media spécial, où le lecteur peut avoir autant de contrôle que le designer - ce qui implique qu'un texte sur le web, tout en se pliant à la volonté du designer, doit aussi être redimensionnable de façon fiable quel que soit le navigateur et quelle que soit la plateforme.

Dans cet article, nous voulons réconcilier l'exigence de précision du designer avec le besoin de l'utilisateur de redimensionner le texte à la demande, pour arriver à la meilleure pratique qui doit satisfaire les designers et les utilisateurs et doit fonctionner quel que soit le navigateur et la plateforme.

Nous allons atteindre notre objectif par la méthode traditionnelle des essais et des erreurs. Je suis redevable des travaux de pionnier d'Owen Briggs en 2002, grâce à quoi j'ai créé un cas de base avec six itérations et 161 captures d'écran. Vous me suivez ?

Le contenu utilisé pour les tests était une mise en page sur deux colonnes avec un bloc hérité du body à gauche et une barre latérale à droite. Le texte était en Arial pour faciliter la constance du résultat entre les systèmes d'exploitation et les plateformes.

Les navigateurs utilisés pour le test étaient Safari 2, Firefox 2 et Opera 9.5a sous Mac OS X Tiger, ainsi que Internet Explorer 6 (IE6) et Internet Explorer 7 (IE7) sous Windows XP avec ClearType activé. Il est clair que ce n'est pas une liste exhaustive de navigateurs, de systèmes d'exploitation ni de moteurs de rendu, mais elle couvre la majorité des utilisateurs à ce jour.

Chaque système d'exploitation et navigateur a été utilisé avec ses réglages par défaut. Chaque itération a été testée pour voir comment chaque navigateur rendait le texte aux tailles petite, moyenne, grande et maximale, aux niveaux de zoom 90%, 100%, 110% et 120%, quand c'est possible.

En premier lieu, il était nécessaire de vérifier que les navigateurs fournissent une ligne de base constante au départ. Le cas de base montre que dans chaque navigateur, la taille de texte par défaut constamment est 16px quand aucun style n'est appliqué (autre que les réglages par défaut du navigateur), et le texte se dimensionne de façon bien constante.

La taille de texte par défaut du cas de base est un bon point de départ, mais pour la plupart des gens (designers, clients, et leurs utilisateurs), 16px est trop grand pour le corps de texte. Dans notre exemple, le corps de texte a été réduit à 14px, avec la barre latérale à 12px. Cette première itération ne fait que régler les fontes en pixels :

.bodytext p 
{
    font-size:14px;
}

.sidenote 
{
    font-size:12px;
}
            

Le résultat est que Safari et Firefox redimensionnent le texte, alors que IE6 et IE7 ne le font pas. On peut redimensionner le texte sous Opera et IE7 en utilisant l'outil de zoom qui aggrandit la mise en page, le texte et les images.

Bien que les parts de marché des navigateurs diffèrent d'un site à l'autre, et que les statistiques des parts de marché des navigateurs soient écrites sur du sable, on peut affirmer que IE6 est toujours utilisé par beaucoup de personnes. Aussi, régler un texte en pixels empêcherait beaucoup de personnes de le redimensionner. On peut aussi avancer l'argument que les utilisateurs d'IE7 devraient être capables de redimensionner un texte sans être forcés d'utiliser le zoom.

L'unité suivante pour essayer de redimensionner les textes est em. em est une authentique unité typographique, recommandée par le W3C, et autorise une précision dont les mots-clefs manquent. En travaillant avec un réglage par défaut de 16px, les styles suivants devraient donner les tailles de texte que l'on désire :

.bodytext p 
{
    font-size:0.875em; /* 16x.875=14 */
}

.sidenote 
{
    font-size:0.75em; /* 16x0.75=12 */
}
            

Les résultats montrent que, parmi tous les navigateurs, le texte au réglage moyen du navigateur est rendu de façon identique au texte réglé en pixels. Ils démontrent aussi que le texte dimensionné en em peut être redimensionné dans tous les navigateurs. Toutefois, IE6 et IE7 exagèrent de façon inacceptable la réduction et l'augmentation du texte redimensionné.

Une solution à l'exagération du redimensionnement de texte sous IE6 et IE7 est de dimensionner le corps de texte avec un pourcentage. Aussi, en retenant les em de notre contenu, on a testé les styles suivants :

body 
{
    font-size:100%;
}

.bodytext p 
{
    font-size:0.875em;
}

.sidenote 
{
    font-size:0.75em;
}
            

Les résultats montrent que la différence entre les réglages petits et grands du navigateur sous IE6 et IE7 est désormais moins prononcée, ce qui signifie qu'à présent, tous les navigateurs rendent le texte à une taille identique pour leur réglage moyen et redimensionnent le texte de façon constante.

Des articles récents de typographie du web, tels que “Setting Type on the Web to a Baseline Grid” (A List Apart, Avril 2007) insistent sur le fait qu'une bonne typographie exige une grille verticale, c'est à dire un rythme vertical régulier réalisé avec une hauteur de ligne constante et mesurée. Cela implique de façon déterminante que la hauteur de ligne doit être la même quelle que soit la taille du texte (de sorte que la hauteur de ligne, ou la grille verticale, reste constante quelle que soit la taille de la fonte).

Dans notre exemple, 18px est une hauteur de ligne adéquate qui sera appliquée au corps de texte comme suit :

body 
{
    font-size:100%;
    line-height:18px;
}

.bodytext p 
{
    font-size:0.875em;
}

.sidenote 
{
    font-size:0.75em;
}
            

Les résultats montrent que la hauteur de ligne 18px est récupérée par tout le texte de la page — Notez comment le texte de la barre latérale a le même rythme régulier que le corps de la page. Spécifier une unité (px dans ce cas) quand on règle la hauteur de ligne permet de transmettre la valeur partout dans la page. Si une hauteur de ligne sans unité a été spécifiée, le coefficient multiplicateur sera hérité, d'où des hauteurs de ligne rendues proportionnellement à la taille de texte, donc une rupture du rythme vertical.

Malheureusement, les résultats montrent que la hauteur de ligne de 18px n'est pas redimensionnée par IE6 ni par IE7 quand le texte est redimensionné, ce qui signifie que la taille maximale semble écraser le texte.

Là où les pixels ont échoué, nous sommes passés aux em. En reprenant la même logique, on obtient les styles suivants :

body 
{
    font-size:100%;
    line-height:1.125em; /* 16×1.125=18 */
}

.bodytext p 
{
    font-size:0.875em;
}

.sidenote 
{
    font-size:0.75em;
}
            

Les résultats montrent un texte et une hauteur de ligne redimensionnés de façon précise et constante sous tous les navigateurs. Parfait. Ou presque.

Les plus observateurs parmi vous auront noté un tout petit problème dans les captures d'écran Safari : la fonte à chasse fixe incluse dans le corps de texte est rendue de façon inconstante. Pour un texte réglé en pixels, Safari rend la fonte à espacement unique à la même taille que le texte à espacement proportionnel qui l'entoure. Toutefois, quand le texte est réglé en em, Safari rend le texte à chasse fixe beaucoup plus petit que le texte qui l'entoure. L'inconstance semble provenir des tailles de texte par défaut de Safari, qui sont 16px pour les “fontes standard” et 13px pour les “fontes à largeur fixe”. Safari 3a sous OS X ne semble pas avoir ce problème.

Vous pourriez décider que le sous-dimensionnement du texte à chasse fixe sous Safari est quelque chose dont vous et vos lecteurs peuvent s'accomoder, et comme Safari 3 est inclus dans OS X Leopard et dans la dernière mise à jour de Tiger, il ne faudra pas beaucoup de temps avant que ce problème disparaisse. Pour les obsédés du contrôle qui ne peuvent pas attendre, une solution alternative consiste à envoyer à Safari un texte dimensionné en pixels.

Le code suivant affecte un commentaire conditionnel downlevel-revealed à vos styles, de sorte que des pixels sont envoyés à tous les navigateurs excepté IE6 et IE7 (notez la syntaxe [if !IE] qui ordonne à IE/Win d'ignorer le balisage qui suit).

<style type="text/css">
body 
{
    font-size:100%;
    line-height:1.125em;
}

.bodytext p 
{
    font-size:0.875em;
}

.sidenote 
{
    font-size:0.75em;
}
</style>

<!--[if !IE]>-->
<style type="text/css"^>
body 
{
    font-size:16px;
}
</style>
<!--<[endif]-->
            

Les résultats montrent un texte et une hauteur de ligne redimensionnés de façon constante quel que soit le navigateur, y compris le texte à espace unique sous Safari 2.

Les commentaires conditionnels font l'objet de controverses, avec de nombreux détracteurs et de nombreux partisans, mais je crois que cette approche convient dans ce cas, car nous utilisons une caractéristiques des navigateurs (les commentaires conditionnels) pour traiter un comportement des navigateurs (le non-redimensionnement des pixels). Il faut aussi noter que, pour plus de clarté, le code ci-dessus présente des règles CSS dans les éléments de style; la meilleure pratique vous imposerait d'utiliser à la place des feuilles de style liées.

Notre tâche était de trouver une façon de dimensionner les textes qui permette aux designers de garder un contrôle précis de la typographie sans sacrifier la capacité de l'utilisateur d'ajuster son environnement de lecture. Nous avons testé différentes unités sous les navigateurs usuels. Il s'est avéré que dimensionner le texte et la hauteur de ligne en em, avec un pourcentage spécifié sur le corps de texte (et un rajout en option pour Safari 2) fournit un texte dimensionnable de façon précise sous tous les navigateurs en usage aujourd'hui. C'est une technique que vous pouvez inclure dans votre kit et utiliser comme meilleure pratique pour un dimensionnement des textes en CSS qui satisfasse à la fois les designers et les lecteurs.

Il peut être délicat de travailler avec les unités em, en particulier avec des éléments étroitement imbriqués, car il peut être difficile de garder les calculs en mémoire. Toutefois, bien commenter les feuilles et les éléments de style du corps de texte peut rendre les choses plus faciles à suivre. Cet exemple plus complexe et sa feuille de style associée démontrent comment dimensionner des éléments imbriqués en utilisant le corps de texte comme point de départ.

Tous mes remerciements à Bovino pour sa relecture.