Rgaa et font size (taille du texte) en pt ou pourcentage ?

Salut,

Le point (pt) est une unité absolue, qui ne permet pas l'agrandissement du texte. C'est pourquoi son usage n'est pas recommandé pour les feuilles de style destinées à l'affichage sur écran et invalide les critères d'accessibilité à ce sujet, notamment le critère 10.4 du référentiel Accessiweb 2.2 et le test 7.14 du RGAA (même si ce dernier restreint, curieusement, son champ d'application aux éléments de formulaire).

Par conséquent, c'est le webdesigner qui aurait besoin d'être sensibilisé à l'accessibilité.

Quant aux correspondances, il vaut mieux que le webdesigner utilise le pixel dans ses maquettes graphiques, le pixel étant plus facile à convertir en pourcentage ou, mieux, en em (une unité relative davantage utilisée que le pourcentage pour définir la taille de police, même si le pourcentage reste parfaitement valide du point de vue de l'accessibilité). Cela dit, la conversion du pixel en pourcentage ou en em oblige à tenir compte, pour les calculs, de la taille en pixels du plus proche ancêtre à taille définie ; mais, ça, ton intégrateur est sensé le savoir (au pire, il pourra toujours jeter un œil aux styles calculés dans Firebug ou tout autre inspecteur d'élément fourni par son navigateur préféré).

Bonjour Victor,

Merci beaucoup pour ta réponse vraiment instructive.

Le designer a fourni des fichiers psd en pixel pourtant mais des fichiers png avec les spécifications en pt à l'intégrateur.

Mais du coup je n'arrive pas a comprendre comment je peux voir une "correspondance" entre les pt et les pourcentages...

En fait j'aimerais dire à l'intégrateur -qui pour le coup a bien fait -, à la place de 13pt il faut "tant de %",à la place de 15pt il faut "tant de %" et ainsi de suite... Penses tu qu'il y a une solution pour ça ?

à bientôt j'espère

Chris

Bonjour,

c'est pas plutôt l'affichage de Photoshop et/ou Fireworks qui est mal fichu et en fait il n'y a aucun souci ?
Perso, il m'arrivait régulièrement d'ouvrir un PSD, de voir des tailles de police en pt (ex: 13pt) mais en fait je mettais dans mes règles CSS la même valeur en pixels (ici: font-size: 13px) et résultat, le texte faisait exactement la même hauteur dans une page web que dans le PSD. C'était en pratique 1px=1pt et basta.

La vérification la plus simple est d'ouvrir un PSD avec Photofiltre si on a pas Photoshop, de mesurer la hauteur en pixels des majuscules et minuscules à quelques endroits et de comparer ave la page web (on peut en faire une capture d'écran avec Alt+Impr Ecran à coller via un clic droit dans Photofiltre ou utiliser une extension comme MeasureIt dans Firefox).

Pour les line-height, si c'est 15(même unité), il faut fixer 15/13 = 1.154 (pas besoin d'unité mais ce n'est pas faux de mettre 115.4%). Note : on recommande pour du texte et titres un interlignage de 1.5 minimum.

Felipe a écrit :

c'est pas plutôt l'affichage de Photoshop et/ou Fireworks qui est mal fichu et en fait il n'y a aucun souci ?
Perso, il m'arrivait régulièrement d'ouvrir un PSD, de voir des tailles de police en pt (ex: 13pt) mais en fait je mettais dans mes règles CSS la même valeur en pixels (ici: font-size: 13px) et résultat, le texte faisait exactement la même hauteur dans une page web que dans le PSD. C'était en pratique 1px=1pt et basta.

Pour ce qui est de photoshop, il peut afficher les tailles des textes en points, en pixels ou en millimètres. C'est un réglage de Photoshop, et il n'est pas sauvegardé dans un fichier PSD. Pour un intégrateur il conviendra donc d'effectuer ce réglage sur son photoshop (préférences > unités & règles > textes. Pour bien comprendre comment fonctionne la bête:
– Photoshop convertit 1pt en 1px à 72dpi. Avec une autre résolution la conversion sera bien différente.
– Photoshop est un logiciel qui fonctionne en grille de pixels de base. Autrement dit, à l’interne, les tailles sont stockées en pixels mais peuvent être affichées en points, ce qui fait que changer la résolution de l'image uniquement changera les tailles en points mais pas celles en pixels. Ce qui est une bonne nouvelle pour l’intégrateur, vu que cela permet d’en avoir rien à braire de la résolution.
– En sachant cela, l'affichage des tailles en pixels dans photoshop nous fournit des valeurs solides. Avec firebug, ou un outil similaire on peu consulter la taille générée finale de la police en pixels, et la comparer avec la taille en pixels de Photoshop. Les autres bricoles à base de print screen sont donc inutiles.

Pour en revenir à la question originale, généralement, si j'ai une demande tatillonne sur la taille (en pixels) et que je dois m’y conformer, j'utilise des em pour atteindre ces objectifs, en me basant sur la taille de texte par défaut de 16px, qui sera le cas de la grande majorité de la navigation «desktop»: par exemple:

body {
  font-size: 0.8125em; /** 13px/16px **/
}

Si les specs fournies donnent des tailles en points, je demande toujours la validation de la méthode de transcription en pixels au designer.

Comme Felipe, attention à des hauteurs de lignes trop basses, 1.154 aura de fortes chances d’être trop faibles. Je ne connais pas les RGAA mais les WCAG demandent en effet un interlignage de 1.5 minimum. Dans la pratique 1.5 est une valeur «sécurité» les hauteurs de lignes nécessaires pouvant varier selon différents critères (police, taille, contrastes, etc.). Sans rentrer dans les détails, pour du textes de contenu de base, 1.4 est souvent plus réaliste (valeur utilisée par Alsacréations par exemple). Par contre, 1.154 risque de poser des problèmes de lisibilité évidents.
Modifié par kustolovic (25 Dec 2013 - 01:18)

kustolovic a écrit :
Je ne connais pas les RGAA mais les WCAG demandent en effet un interlignage de 1.5 minimum.

Et encore, au niveau AAA.