Tailles de texte pour page web

lun 03 septembre 2007

Plusieurs unités sont disponibles pour définir la taille des textes d’un site internet, parmi lesquelles: pt, px, et em. Regardons un peu en détail leurs différences.

On ne peut parler de taille de texte sans parler du support sur lequel on veut afficher le texte. Pour un site, le support primaire est l’écran. Ce dernier existe en différent:

  • format (4/3, 16/9, …)
  • taille physique, mesurée par sa diagonale et
  • taille en pixels, le nombre de points lumineux (résolution).

Le ratio de pixels par unité de mesure (pixel/pouce ou pixels par mm) définit la capacité de l’écran à afficher des détails. On utilise souvent le dpi (dot per inch) que se traduit mal en français car le mot « point » fait référence à autre chose dans le monde typographique.

Il est important de comprendre qu’avec une même résolution un même nombre de pixels, deux moniteurs peuvent être de taille physique différente et le dpi aussi. En effet, même nombre de pixels mais surfaces différentes.

Le support secondaire d’un site internet est le papier lors de l’impression d’une page. Ce support est décrit par:

  • la taille de la page (A4, A3, letter…),
  • la résolution de l’imprimante, donnée en dpi.

La résolution permet de définir le détail minimum imprimable sur du papier. La qualité de ce dernier joue aussi un râle non négligeable dans l’exploitation de haute résolution (photo par exemple).

Le même raisonnement s’applique pour l’écran.

Le point – pt

Le point a eu plusieurs définitions différentes en fonction du temps et du lieu. Actuellement, lorsqu’il est fait référence au point, il représente 1/72 d’un pouce et c’est une valeur fixe. Pour cette raison cette unité n’a de sens que pour les supports dont on contrôle les dimensions physiques (papier en particulier). Cette unité permet d’être sûr qu’un texte d’une taille de 72 pt sera imprimé avec une hauteur de 2.54 cm (~un pouce) quelle que soit la taille du papier.

Elle est donc déconseillé pour le web car elle dépend d’une mesure physique (inch – pouce) alors que peu de gens ont le même écran.

Le pixel – px

Le pixel tient son nom de « picture element », c’est l’élément le plus petit d’une image digitale. Cette unité est pratique dans un univers de résolutions connues. Les résolutions les plus courantes sont identifiées et invariables (1024×768, 1280×1024…). L’unité convient pour le placement à l’écran. Par contre pour le support papier, il est difficile de savoir à quoi correspond un pixel en unité de distance.

% et em

Le em a longtemps été défini comme la dimension de la lettre M majuscule.

Or cette définition n’est pas tout à fait correcte. En fait, 1 em (ou 100 %) correspond à la taille de la police par défaut sur le système (le browser ou la page). L’attrait de ce type d’unité, est qu’on ne gère les différences entre police, espacement qu’en termes relatifs.

Ce système permet une accessibilité élevée car il ne contraint pas le design. Il est vrai que la plupart des browsers actuels gèrent l’accessibilité sur des sites ayant les tailles de police définie en px en permettant d’agrandir les caractères mais les espacements et marges, aussi définies en px gardent les mêmes dimensions. Ceci provoque parfois des situations (dégradation je devrais dire) cocasse d’un point de vue de la mise en page. (onglet ou menu de taille fixe alors que le texte dépasse les bords).

que choisir ?

Le choix est presque religieux et dépend de ce qu’on cherche à obtenir. Si on veut tout contrôler du design graphique d’un site, on veillera à proposer plusieurs tailles de caractère différentes pour en garantir l’accessibilité. Dans les autres cas, il semble évidant que l’approche en em est séduisante, elle a surtout l’avantage de diminuer le nombre de contraintes pour la mise en page.

Bien évidemment, il n’est pas nécessaire de mettre des tailles en em partout. La taille du site, si le design n’est pas liquide, peut rester en px.

On fera particulièrement attention à ne pas utiliser de taille en px pour :

  • la hauteur des boites de texte,
  • les dimensions (height et/ou width) des onglets ou menu.
  • tout autre mesure créant une sur-contrainte dans le cas où le texte « grandit »

Category: web Tagged: informatique ux web

comments

Page 1 of 1