Avec l’avènement des nouveaux appareils numériques, nous sommes confrontés à une multitude de résolutions d’écran et de densités de pixels. Dans cet article, nous allons explorer les différentes solutions qui vous aideront à choisir la taille de police idéale en fonction de la densité de pixels (DPI).
Lire aussi cet article très complet : Choisir la taille de la police de caractère
Les facteurs qui influent sur la lisibilité des polices
Contrairement au papier, les polices affichées sur un écran peuvent apparaître différemment d’un appareil à l’autre, voire même d’un écran à l’autre. Plusieurs facteurs influencent l’affichage des polices :
1. Densité de pixels
La densité de pixels représente le nombre maximal de pixels affichés par pouce (ou centimètre). Cela signifie que la quantité de pixels nécessaire pour afficher un objet peut varier d’un écran à un autre. Par exemple, les écrans Retina affichent plus de pixels par pouce que les écrans non Retina.
2. Résolution de l’écran
La résolution de l’écran mesure la quantité totale de pixels contenue dans l’écran. Cette résolution est calculée en multipliant la quantité de pixels en largeur par la quantité de pixels en hauteur. Par exemple, un écran avec une résolution de 1366×768 a 1366 pixels en largeur et 768 pixels en hauteur.
3. Distance de lecture
La distance entre l’utilisateur et l’écran est un facteur clé qui affecte la lisibilité. La distance moyenne pour lire sur un écran est d’environ 45 à 60 centimètres. Pour les appareils mobiles, les liseuses et les tablettes, cette distance est réduite à environ 30 centimètres.
4. Composition de la police
Pour ceux qui ne sont pas familiers avec la typographie, voici un bref rappel des éléments qui composent une police :
- Hauteur d’X : la hauteur des lettres minuscules.
- Jambage : la « patte » des lettres, comme la courbe descendante dans la lettre « j » ou « g ».
- Hampe : la distance ascendante de certaines lettres (comme « b », « d », « h », « l », « t », etc.). Souvent utilisée pour déterminer la hauteur des majuscules.
5. Taille de police
La taille de la police est un facteur crucial à considérer lors du choix de la police. En général, la taille de la police représente la distance entre le sommet de la hampe et le bas du jambage.
|
Distance en cm |
Taille minimale | Densité de l’appareil | Taille minimale |
| 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 |
Tableau comparatif entre les différentes résolutions, densités de pixels et tailles de polices recommandables en fonction de la distance de lecture dite “normale”.
Recommandations pour choisir la bonne taille de police
Voici quelques recommandations pour choisir la taille de police idéale en fonction des facteurs mentionnés ci-dessus :
- Choisissez des polices avec une hauteur d’X moyenne ou grande, comme Verdana ou Trebuchet MS.
- Pour les textes longs, privilégiez des polices rondes et larges pour aérer le texte et faciliter la lecture. En revanche, pour les textes courts, vous pouvez opter pour des polices plus étroites.
Systèmes de mesure de la police
La taille de la police peut être mesurée en utilisant différentes échelles. Voici un aperçu de deux échelles fixes (pixels et points) et deux échelles variables (em et pourcentage), ainsi que leurs avantages et inconvénients :
1. Pixels
Cette échelle mesure la taille de la police en pixels à l’écran. Cela signifie que la taille de la police est fixe, mais la taille réelle affichée dépend de la densité de pixels de l’écran. C’est une mesure compréhensible par tous les navigateurs, mais elle ne s’adapte pas aux différentes densités de pixels et ne peut pas être redimensionnée par les anciens navigateurs.
2. Points
L’unité du point est un héritage de l’imprimerie, où un point équivaut à 1/72 d’un pouce (environ 0,03 cm). Les points offrent un contrôle relatif sur le résultat final, mais ils ne s’affichent pas de la même manière sur tous les appareils. Par conséquent, les points ne sont pas idéaux pour les mises en page flexibles.
3. Em
L’unité « em » est relative à la taille de la police par défaut. Par exemple, 1 em est égal à la taille de police standard de votre navigateur. Les « em » sont adaptatifs et permettent de créer des mises en page flexibles. Ils sont bien pris en charge par la plupart des navigateurs, y compris les anciennes versions.
4. Pourcentage
Mesurer la taille de la police en pourcentage permet de créer des mises en page fluides et adaptables. Cependant, cela peut être plus complexe à gérer que les autres unités, car la taille de la police est déterminée en pourcentage de la taille de police par défaut.
Typographie Web : Guide complet pour choisir la police d’écriture parfaite – 2020 Happy.webacademy
Les médias query pour la taille de la police
Les Media Queries, ou requêtes média, sont des outils puissants pour la conception web réactive. Vous pouvez les utiliser pour ajuster la taille de la police en fonction de la résolution de l’écran. Les Media Queries vous permettent d’offrir une expérience utilisateur optimale en adaptant la taille de la police à différents appareils.
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 télé.
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
Conclusion
Le choix de la bonne taille de police pour vos textes en ligne est essentiel pour garantir une expérience de lecture agréable pour vos utilisateurs. En tenant compte de la densité de pixels, de la résolution de l’écran, de la distance de lecture et de la composition de la police, vous pouvez créer des mises en page lisibles et adaptatives. L’utilisation d’unités comme « em » et les Media Queries peut grandement améliorer la flexibilité de vos conceptions web.
N’oubliez pas que la lisibilité est essentielle, et la taille de la police en est un élément clé. Prenez le temps de tester différentes tailles et unités pour vous assurer que vos textes sont faciles à lire sur une variété d’appareils.
Lire aussi :
- Le Mockup, outil essentiel pour concevoir des interfaces remarquables
- Prototypage: la clé du développement itératif d’applications
- Une conception participative : la co-conception
Image à la UNE : illustration de Tamanna Mundhra – Dribbble
