Pourquoi faire attention· Bonnes pratiques · En savoir plus·
Index des conseils· Page d'accueil QA· QA IG· Validation· QA-dev·
2005-04-25 : Cette page est la traduction française par Patrick Blanchenay du document intitulé Care With Font Size disponible à l'adresse : http://www.w3.org/QA/Tips/font-size. Même si le document original n'a pas valeur normative, il reste la seule référence, notamment parce qu'il est susceptible d'évoluer. Par ailleurs, des erreurs de traduction ont pu survenir.
Certains designers croient qu'un texte écrit petit donne un aspect soigné à la page Web et laisse plus de place par "page" pour le contenu. Cette mode les incite à utiliser des polices bien trop petites.
Malheureusement, cette pratique s'accomode mal de la diversité des plateformes utilisées pour accéder au Web — qui peuvent aller des appareils portables et leurs petits écrans, aux projecteurs couplés à des ordinateurs. Et sur une même plateforme, la configuration du texte peut varier.
Ce problème relève simplement de la convivialité [NdT : usability] et de l'accessibilité : un bon design doit être beau sans exiger de l'utilisateur qu'il augmente ou diminue la taille de police.
Pour configurer la taille du texte affiché sur une page de manière correcte et moderne, il faut utiliser les feuilles de styles CSS (Cascading Style Sheets). C'est fortement conseillé, plutôt que d'utiliser la balise HTML <font> : le CSS est plus flexible, plus facile à maintenir et il permet d'économiser de la bande passante. Il serait hors de propos de s'étendre ici sur les avantages du CSS par rapport aux balises <font> ; les lecteurs souhaitant plus d'information à ce sujet pourront interroger leur moteur de recherche favori… Nous nous attacherons plutôt à décrire le bon usage de la technique CSS pour créer des pages Web lisibles.
Voici quelques règles simples que l'on doit suivre pour créer des pages (relativement) faciles à lire, grâce aux propriétés font en CSS.
font-size)
en points (pt),
ou toute autre unité
de longeur (length
units) absolue. Ces
unités apparaissent différemment selon les
supports et elles ne peuvent pas être
redimensionnées par l'agent utilisateur (par ex. le
navigateur).em,
ou encore mieux
: précisez la taille de police de base pour le document et
utilisez des tailles
absolues (absolute
size) ([ xx-small |
x-small | small | medium | large |
x-large | xx-large ]) ou des tailles
relatives (relative
size) ([ larger |
smaller ]) pour définir la taille de police d'un
élément en particulier.em
inférieures à 1em
pour le corps du texte, sauf peut-être pour des mentions de
copyright et autres mentions en petits caractères.font-size),
préférez une famille de police (font-family)
lisible avec une forte valeur d'aspect (voir la section sur font-size-adjust
dans la spécification CSS2 et l'explication de la valeur
d'aspect) ; elle sera plus lisible dans les petites tailles.font-family)
afin de laisser le système choisir la meilleure police
disponible dans une liste, vous pouvez utiliser la
propriété font-size-adjust
pour forcer une valeur d'aspect particulière.Certains conseils sont différents des nôtres. "Corpus 1em, nihil minor" —Bert Bos d'après Caton.
Date de
création: 2003-07-30 par Olivier
Thereaux et Susan Lesch