Avec la nouvelle vague d'appareils digitaux, nous sommes confrontés à une gamme très vaste de résolutions d'écrans et de densités de pixels.
Dans cet article, nous allons passer en revue les différents problèmes qui se posent lorque l'on doit choisir une taille de police et une densité de pixels (DPI) selon un type d'appareil.
- Les facteurs qui déterminent le rendu d'une police
- Les systèmes de mesure d'une police
- Les tailles minimales recommandées
Ces différents sujets, entre autres, sont abordés dans la formation Design Graphique, idéale pour acquérir les bons réflexes de conception graphique d'une interface.
En fin d'article, vous trouverez un tableau d'équivalences dans lequel nous affichons la taille idéale d'une police par rapport à sa distance de lecture et son support.
Facteurs déterminant le rendu d'une police
Contrairement à ce qui se passe sur le papier, les polices à l'écran peuvent s'afficher différemment d'un appareil à un autre, voir même d'un écran à un autre. Plusieurs facteurs affectent cet affichage de polices :
- Densité de pixels
- Résolution de l'écran
- Distance de lecture
- Composition d'une police
- Taille de la police
Densité de pixels
La densité de pixels représente la quantité maximale de pixels affichés par pouce (ou centimètre). Cela veut dire que la quantité de pixels nécessaire pour présenter un même objet peut varier d'un écran à un autre.
La densité de pixels est une caractéristique de l'écran physique et ne peut donc être modifiée par les différents sites web ou applications, contrairement à la résolution de l'écran.
Résolution de l'écran
La résolution de l'écran est la quantité de pixels contenue dans la totalité de l'écran.
Résolution de l'écran = Quantité de pixels à l'horizontale × Quantité de pixels à la verticale.
Ci-dessous un résumé des résolutions et des densités de pixels pour les écrans les plus courants. Ces données sont calculées sur le site statscounter.com.
Ce tableau indique les résolutuins des écrans les plus utilisés pour accéder à Internet en France entre le 1 et 7 janvier 2013.
Bureau
1366×768 18.33 10 ≈ 15 Sony Vaio séries X, Y et Z ; Asus Eee PC 1101 100
1600×900 10.7 13 ≈ 17 Dell Inspiro série 14 ; Sony Vaio série F 92
1280×800 10.61 ≈ 13
Apple Macbook Pro 13” ; Asus Eee Pad
1281024×768 7.97 13 ≈ 18 Moniteurs génériques 75
Mobile
320×480 38.32 3.5 iPhone 3 ; HTC Dream 180
720×1280 8.14 4.5 HTC Rezound ; Galaxy Nexus 342
480×800 7.01 3.5 Nokia N900 ; HTC Touch Diamond 2 ; Samsung Wave 2 267
320×568 6.96
320×240 1.69 Samsung Galaxy Y ; HTC Tattoo 154
Distance de lecture
Autre facteur important, la distance entre l'utilisateur et l'écran affecte également la lisibilité.
La distance moyenne pour lire sur un écran est entre 45 et 60 centimètres. Pour les mobiles, liseuses et tablettes, cette distance se réduit à environ 30 cm.
Composition d'une police
Pour ceux qui connaissent mal la typographie, nous allons brievement rappeler les différentes parties formant une police :
- Hauteur d'X : la hauteur des lettres minuscules.
- Jambage : la "patte" des lettres, par exemple, la courbe descendante dans le j ou le g.
- Hampe : la distance ascendante de certaines lettres (b, d, h, l, t, etc.). Souvent réutilisée pour la hauteur des majuscules.
Taille de la police
La taille de la police est également un facteur à considérer au moment du choix de la police. De manière générale la taille de la police représente la distance entre le haut de la hampe, jusqu'au bas du jambage.
Recommandations
- Choisissez des polices possédant une hauteur d'X moyenne ou grande (i.e. Verdana, Trebuchet MS).
- Pour des textes longs, préferez des formes de polices rondes, larges qui aéreront le texte et faciliteront la lecture. A l'inverse, pour des textes courts, il est possible d'opter pour des polices "étroites".
Les systèmes de mesure
La hauteur de la police peut être mesurée en utilisant différentes échelles. Ici nous verrons deux échelles fixes (pixels et points) et deux échelles variables (em et pourcentage). Nous analyserons brièvement les avantages et les inconvénients de ces échelles.
Pixels
Cette échelle décrit la taille des polices en utilisant les pixels à l'écran. Cela veut dire que cette taille de police est fixe et aussi que la taille réelle affichée de la police dépendra de la densité de pixels de l'écran.
Avantages :
- Mesure à taille fixe, contrôle complet sur le résultat final
- Mesure compréhensible par tous les navigateurs
Inconvénients :
- Pas adaptable aux différentes densités de pixels
- Ne peut pas être rédimensionée par les anciens navigateurs (IE6, IE7)
Points
L'unité du point est un héritage du secteur de l'imprimerie. Traditionnellement un point est l'équivalent de 1/72 d'un pouce (0.03 cm).
Avantages :
- Mesure à taille fixe, contrôle relatif sur le résultat final
- Échelle utilisée par défaut pour les applications client lourd
- S'adapte nativement à la taille de police de chaque appareil
Inconvénients :
- Système de mesure non natif pour écran, héritage de la typographie du secteur de l'imprimerie
- Ne s'affiche pas de la même manière d'un système à l'autre (différences entre OS X et Windows par exemple)
- La taille de la police n'évolue pas lors de l'utilisation du zoom du navigateur
EM
L'em et le rem (root em) sont des échelles relatives à une taille d'origine. Cela veut dire que le développeur du site ou de l'application doit paramétrer une taille de police par défaut et ensuite décliner les tailles de la police à partir de cette taille initiale.
Par exemple, disons que nous définissons une taille initiale de 16 px. Cela veut dire que 1em = 16px, 0.5em = 8px, 0.9em = 14px, etc.
Avantages :
- S'adapte nativement aux changements de résolution
Inconvénients :
- Au moment de la rédaction de cet article, l'échelle em n'est utilisable que sur le web
- Certains navigateurs peuvent avoir des problèmes pour l'interpréter
Pourcentage
Le pourcentage est aussi une échelle relative. Celle-ci s'adapte à la taille de la police utilisée par le navigateur.
Par exemple, si le navigateur est configuré avec une police de 12px, 100% de l'échelle correspondra à ces 12px.
Avantages :
- S'adapte nativement aux changements de résolution
Inconvénient :
- Au moment de la rédaction de cet article, l'échelle em n'est utilisable que sur le web
Résumé et recommandations
- Pour le web, la meilleure option est le pourcentage afin d'adapter facilement les tailles de polices en fonction des capacités de l'appareil et ainsi obtenir un rendu optimal
- Pour résumer, voici une correspondance entre les différentes échelles mentionnées ci-dessus : 1em = 12pt = 16px = 100%
Taille minimale recommandée
Norme ISO 9241-300
La norme AFNOR 9241-300 spécifie les règles à respecter lors de la conception des interfaces sur écrans mobiles, desktop ou tv, etc. Dans le cadre de cet article, nous allons nous limiter exclusivement aux recommandations concernant la taille de police.
La norme ISO recommande une hauteur de police de 2,8 mm pour une distance de lecture de 50 cm. Autrement dit, la taille totale de la police (de sa hampe jusqu'au jambage) doit faire 2,8 mm si l'utilisateur lit à une distance d'environ 50 cm.
On aura ainsi ces équivalences :
- 2,8 mm pour d=50 cm
- 3,5 mm pour d=60 cm
- 4 mm pour d=70 cm
Tailles proportionnelles
Certains auteurs ont essayé de simplifier notre façon de penser la relation entre la taille de police et la distance de lecture. Ils proposent simplement de penser en fonction de trois distances :
- Courte (entre 10 et 30 cm) : distance à laquelle nous tenons le portable dans le bus ou dans le métro, la distance à laquelle on lit quand on est allongé, etc.
- Moyenne (entre 30 et 50 cm) : distance à laquelle on lit sur une tablette ou un livre posé sur nos genoux.
- Éloignée (entre 50 et 70 cm) : distance à laquelle se trouve (en moyenne) l'ordinateur sur un bureau.
Il faut dire que les auteurs qui ont pensé ce système tri-dimensionnel sont des auteurs qui travaillent notamment dans le “responsive design”, où la relation entre les différentes résolutions est un des éléments clés pour réussir le passage entre les différentes devices.
Conclusions
Nous conclurons cet article en vous proposant un comparatif entre les différentes résolutions, densités de pixels et tailles de polices recommandables en fonction de la distance de lecture “normale”.
30 (mobile) 1,68 mm 264 25px ≈ 12pt
40 (tablette sur jambes) 2,2 mm 264 33px ≈ 16pt
50 (ordinateur de bureau) 2,8 mm 96 12px ≈ 9pt
60 (ordinateur de bureau) 3,4 mm 96 13px ≈ 10pt
70 (ordinateur de bureau) 4 mm 96 15px ≈ 11pt
80 (ordinateur de bureau) 4,5 mm 96 17px ≈ 13pt