Éducation, société et technologie
CSS

CSS - Les polices : quelle taille choisir ?

mardi 6 janvier 2004 par André Vincent

Pour contrôler la taille des caractères (en typographie : le corps) par CSS, il existe plusieurs approches, certaines semblables, d’autres forts différentes l’une de l’autre. Voici quatre méthodes. parmi les plus utilisées présentement.

 La méthode relative DU CADRATIN (em)

C’est l’approche recommandée par le World Wide Consortium (W3) et que l’on pourrait qualifier de méthode relative DU CADRATIN (em). Elle consiste en ceci :

  • Ne pas fixer de corps de base. Le corps de base étant déterminé par le
    visiteur (dans les préférences de son logiciel de navigation).
  • Fixer tous les autres corps en valeurs proportionnelles au corps de base
    (de préférence en cadratin - em).
    Ainsi, en assignant 1.5em à H2, les intertitres de niveau 2 auront une fois et demi le corps de base fixé par les préférences du visiteur. Si les préférences du visiteur sont réglées à 16 pixels dans son logiciel de navigation, on obtiendra la valeur de 24 pixels pour H2.

Cette méthode a plusieurs avantages, notamment de s’adapter aux préférences (ou handicaps visuels) des visiteurs ; certains qualifient cette approche de la seule méthode conforme aux normes d’accessibilité. Elle permet aussi de s’adapter à tout média (pas seulement l’écran). Toutefois, ça ne fonctionne que dans les logiciels qui ont correctement implantés les spécifications du W3. Ce qui exclut bon nombre de logiciels dont Netscape 4.x et Explorer 4.x
et 5.x (pour Windows) encore en usage dans une proportion non négligeable. C’est de loin la méthode qui a le plus d’avenir... Dans l’avenir.

La méthode du pourcentage (%) est un équivalent du cadratin.

 La méthode absolue DU PIXEL (px)

L’approche de Zeldman (exposée et défendue par Jeffrey Zeldman, considéré comme l’un des gourous du CSS) que l’on qualifierait de méthode absolue DU PIXEL OU RIEN. Cette approche, reconnaissant les bugs d’interprétation des spécification CSS, relativement à la taille des
caractères, dans de nombreux logiciels de navigation encore largement utilisés par les visiteurs, recommande de fixer TOUS les corps des caractères en valeurs absolues et plus précisément en pixels. Selon Zeldman, c’est la seule méthode qui fonctionne toujours, tout le temps en toute circonstance, dans la très vaste majorité logiciels de navigation encore en usage.

Elle présente toutefois un inconvénient MAJEUR. Tous les logiciels de navigation modernes disposent d’un menu et parfois même de raccourcis au clavier permettant à l’usager d’augmenter ou la réduire proportionnelement la taille de tous les caractères dans une page, pour l’adapter à ses préférences de lecture. La vaste majorité des logiciels de navigation respectent ce choix des usagers, quelque soit l’unité de mesure utilisé dans les feuilles de styles, SAUF Internet Explorer pour Windows qui ne respecte ce choix des usagers que SI et seulement SI la feuille de style utilise une unité de mesure relative ou proportionnelle (em, pourcentage ou mot-clé). En conséquence, sous IE pour Windows la taille des polices déterminés en pixels resteront fixes et ne respecteront pas le choix des usagers, alors que les autres logiciels respecteront le choix des usagers.

C’est pourquoi, cette méthode est de plus en plus abandonnée afin de respecter les normes d’accessibilité, notamment pour les handicapés visuels. Tous les organismes de normalisation concernés par l’accessibilité considèrent cette méthode fautive.

  • Voir : Give me Pixels or Give me Death (en anglais) - Si quelqu’un connaît une documentation aussi complète en français, j’apprécierais qu’on me la communique.

 La méthode relative par MOT-CLÉ

C’est l’approche préconisée par Fahrner et Pilgrim et que l’on pourrait qualifier de méthode relative par MOT-CLÉ (keywords). Cette méthode, superbement exposée par Todd Fahrner (CSS Design : Size Matters) et Mark Pilgrim (Using relative font sizes) puis traduit par Kal Dubost (Utilisez des tailles de police relatives) reprend essentiellement l’approche relative recommandée par le W3, mais utilise des mots-clés du type small et x-small pour fixer le corps de base ainsi que des filtres pour tenter de corriger les bugs de certains des logiciels de navigation encore en usage (anciennes versions de Netscape, Explorer et Opera). Cette méthode tente donc de conserver les avantages de la première méthode, tout en recherchant la même universalité que la seconde méthode. Cette dernière approche fort prisée par certains concepteurs de sites professionnels pour contourner les limites des deux précédentes méthodes est aussi aujourd’hui en voie d’abandon car elle repose sur l’activation d’un bug pour en contourner un autre.

C’est sans doute la méthode la plus tordue à mettre en oeuvre, sans garantie absolue de succès dans l’avenir.

Les mots-clés : xx-small, x-small, small, medium (défini par les préférences du navigateur), large, x-large, xx-large.

Notez que Internet Explorer 5 et 5.5 pour Windows ainsi que la version 6.0 en mode non-standard (quirk), interprètent les mots-clés un format plus grand.

 La méthode relative par POURCENTAGE et CADRATIN

La méthode proposée par Owen Briggs et documentée dans son article « Sane CSS Sizes » et « Incremental Differences » est très semblable à la précédente, mais ne fait appel à aucune bidouille tordue. Elle propose de fixer la taille de base à 76% des préférences du visiteur et d’ajuster, sur cette base, toutes les autres tailles en valeurs relatives définies en cadratin (em) égales ou supérieures à 1em, mais JAMAIS inférieures à 1em (car certains logiciels de navigation, dont IE pour Windows, interprètent TRÈS incorrectement la taille d’une police définie sous 1em).

C’est présentement la méthode qui semble offrir le meilleur résultat et la plus grande compatibilité de rendu dans la vaste majorité des logiciels de navigation encore en usage.

Exemple :

Une variante de cette méthode est expliquée dans l’article Comment définir la taille du texte en ems, une traduction de l’article de Richard Rutter (How to size text using ems) ; lire aussi le commentaire de Patrick H Lauke sur une méthode pour contourner chez IE pour Windows le bogue concernant le calcul des taille en em .

 Attention à l’héritage

Un élément « enfant » hérite des propriétés des éléments « parents ». Ainsi, le font-size d’un élément réglé en valeur relative (em ou %) hérite toujours de la valeur de l’élément parent — ce qui n’est pas le cas, lorsque défini par mot-clé. Ainsi, dans l’exemple suivant, si on applique la feuille de style définie dans l’exemple précédent :

  • Bienvenue aura une valeur de 83,6% (76% x 1.1)
  • Allo aura aussi une valeur de 83,6%
  • Mais Bonjour, aura une valeur de 91,6% (76% x 1.1 x 1.1)

Pour maintenir la taille de Bonjour à 83,6%, il faudrait ajouter la règle suivante dans les feuilles de style :

Ce qui nous donnerait maintenant : Bonsoir = 83,6% (76% x 1.1 x 1.0)

Attention aussi aux autres propriétés CSS héritées : color, font, letter-spacing, line-height, list-style, text-align, text-transform, word-spacing, white-space.

Voir aussi en complément :


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 61452 / 1816296

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web statiques  Suivre la vie du site CSS - Feuilles de styles   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 6