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).
Voir cette vidéo récapitulative de l’article
Voir une présentation audio
Sommaire
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 (PPI/DPI)
La densité de pixels (Pixels Per Inch) définit la finesse du rendu.
- Le défi de l’aliasing : Sur un écran à faible densité, les courbes des lettres peuvent paraître « crantées » (effet d’escalier). Les écrans haute densité (Retina, Quad HD) permettent d’afficher des polices plus fines ou plus légères sans qu’elles ne disparaissent ou ne deviennent floues.
- L’unité relative : C’est à cause de cette variation qu’on utilise le pixel logique (ou dp sur Android, pt sur iOS) plutôt que le pixel physique pour garantir qu’un texte garde la même taille visuelle partout.
2. Résolution de l’écran
Plus qu’une simple multiplication, la résolution influence l’espace de travail disponible.
- Rapport de taille : Sur une petite résolution, une police de 16px prendra une place immense à l’écran, limitant le nombre de mots par ligne. Sur un écran 4K, cette même police peut devenir illisible car minuscule si elle n’est pas mise à l’échelle.
- Contexte de rendu : La résolution définit souvent si l’utilisateur verra votre texte dans une mise en page à une ou plusieurs colonnes.
3. Distance de lecture
C’est le facteur qui dicte la taille minimale exploitable.
- Angle de vision : Plus l’œil est loin, plus la lettre doit être grande pour occuper le même angle visuel.
- Hiérarchie mobile vs Desktop : Sur mobile (30 cm), on peut se permettre des polices légèrement plus petites (ex: 14px) car l’écran est proche. Sur une télévision (usage « 10-foot UI »), le texte doit être massif pour rester lisible.
4. Composition de la police (Anatomie)
L’anatomie d’une lettre impacte directement la vitesse de reconnaissance par le cerveau.
- L’importance de la Hauteur d’X : À taille égale, une police avec une grande hauteur d’X (comme l’Helvetica ou la Verdana) paraîtra plus grande et sera plus lisible sur écran qu’une police avec une petite hauteur d’X (comme le Garamond).
- Ouvertures : Les espaces blancs à l’intérieur des lettres (comme le trou dans un ‘e’ ou un ‘c’) sont vitaux. S’ils sont trop petits, la lettre se transforme en « tache » sombre sur les écrans de basse qualité.
5. Taille de police et Interlignage
La taille ne fait pas tout, c’est son rapport avec l’espace environnant qui crée le confort.
- Interlignage (Line-height) : Pour le web, on recommande souvent un interlignage de 1.5 fois la taille de la police. Un texte trop serré fatigue l’œil car il est difficile de retrouver le début de la ligne suivante.
- Contraste : Sur écran, la taille doit être compensée par le contraste. Une police fine (Light) nécessite une taille plus grande ou un contraste de couleur plus élevé (noir sur blanc) pour rester accessible.
|
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 :
1. Privilégier une hauteur d’X généreuse
La hauteur d’X (la taille des minuscules comme le « x », « a », « e ») est le facteur n°1 de lisibilité sur écran. Plus elle est grande, plus la lettre paraît ouverte et facile à déchiffrer, même en petite taille.
Pourquoi ? Sur un écran, les détails fins des hampes (le haut du « b ») et des jambages (le bas du « g ») peuvent se perdre. Une grande hauteur d’X stabilise l’œil sur la ligne.
Exemples de polices à grande hauteur d’X :
- Verdana : Conçue spécifiquement pour l’écran, elle possède une hauteur d’X massive.
- Roboto (Google) : Très équilibrée, elle reste lisible sur des résolutions mobiles variées.
- Helvetica Now : Une version moderne optimisée pour le numérique.
À éviter pour le corps de texte : Les polices « anciennes » comme le Garamond, qui ont une petite hauteur d’X, ce qui les rend minuscules et fatigantes à lire sur un écran standard.
2. Textes longs : Polices rondes et aérées
Pour un article de blog ou un rapport, l’objectif est de réduire la fatigue oculaire. On cherche des polices qui « respirent ».
Le principe : Les polices avec des ouvertures larges (l’espace ouvert dans un « c », un « e » ou un « s ») empêchent les lettres de se transformer en taches noires lorsque l’utilisateur plisse les yeux.
Exemples recommandés :
- Open Sans : Très ronde, extrêmement lisible grâce à ses formes ouvertes.
- Montserrat : Très géométrique et large, elle donne un aspect moderne et aéré.
- Georgia : Si vous préfévez une police à empattements (Serif), c’est la reine de la lisibilité sur écran pour les longs récits.
3. Textes courts : Polices étroites et denses
Pour des éléments d’interface (boutons, barres de navigation, notifications), l’espace est souvent limité. On peut alors utiliser des polices plus condensées.
Le principe : On privilégie la reconnaissance de la forme globale du mot plutôt que la lecture fluide.
Exemples recommandés :
- Oswald : Une police condensée parfaite pour des titres percutants ou des boutons.
- Archivo Narrow : Idéale quand on a beaucoup d’informations à faire tenir dans une petite largeur d’écran (tableaux de bord).
- Inter : Bien que polyvalente, elle est très efficace dans les petits espaces d’interface utilisateur (UI).
Tableau récapitulatif des usages
| Type de texte | Caractéristique recherchée | Exemples types |
| Corps de texte (Long) | Hauteur d’X grande, lettres larges | Verdana, Open Sans, Lato |
| Titres (H1, H2) | Personnalité, contraste fort | Playfair Display, Montserrat |
| Interface (Boutons) | Clarté immédiate, économie d’espace | Roboto, Inter, San Francisco |
| Lecture « Confort » | Empattements (Serif) robustes | Georgia, Merriweather |
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
La taille de la police, le garant de la lisibilité
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 :
Image à la UNE : illustration de Tamanna Mundhra – Dribbble