Choisir la taille de la police de caractère

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 passons en revue les différentes solutions qui existent pour vous aider à choisir une taille de police adaptée à la densité de pixels (DPI).

  • Les facteurs qui déterminent le rendu d'une police
  • Les systèmes de mesure d'une police
  • Les tailles de polices 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 de police idéale 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 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.

Affichage en écran Retina vs écrans non Rétina

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ésolutions des écrans les plus utilisés pour accéder à Internet en France entre le 1 et 7 janvier 2013.

Résolution en pixels Pourcentage d'utilisation Diagonale (en pouces) Appareils PPI
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

128
1024×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.

Composition d'une police

Taille de 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”.

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

 

Partager :

    13 commentaires pour “Choisir la taille de la police de caractère”

    1. [...] By Pedro Hernández [...]

    2. Merci pour cet excellent résumé, précis et complet !

    3. Merci pour ce résumé complet !
      J’ajouterais autre chose sur la taille de la police et plus précisément sur les problématiques de définition : je me suis rendu compte que les polices google fonts ont un rendu complètement dégradé sous chrome, par rapport à Firefox. Il faudrait donc, en plus, ajouter ce détail à notre taille de police :)

    4. Le volume de texte à lire est à prendre en compte aussi. On ne lit pas autant de caractères sur rueducommerce ou sur wikipedia. Moi qui suit régulièrement sur ce dernier, à chaque fois mon premier reflexe est le même : passer à une taille d’écriture 16x. Pour le reste je bookmark l’article :)

    5. Merci pour ces commentaires ! Effectivement ça pourrait bien mériter un update de l’article avec ces dimensions ajoutées au tableau comparatif…

      @Alex Je suis d’accord, il faut aussi ajouter le détail du rendu de la police, mais pour cet article nous avons décidé de ne pas le traiter pour ne pas ajouter une troisième dimension au tableau. Mais effectivement il faut tester le rendu de la police sur plusieurs navigateurs.

      @Benoît As tu essayé les “nettoyeurs” d’articles (Instapaper ou Google mobilize) qui prennent le texte et l’affichent en version “simplifiée” ? Cela pourrait t’aider à lire plus facilement les articles plus longs.

      Si non, par rapport à la quantité de texte, un bon outil pour tester les polices est http://www.typetester.org/. Tu peux tester 3 tailles/familles de police en parallèle et voir qu’est-ce que ça donne avec beaucoup ou peu de texte.

    6. Bonjour et merci pour cet article. Il est déjà quasiment trop complexe pour moi… et pourtant j’aurais aimé y trouver un peu plus d’infos sur les polices les plus indiquées pour la lecture à l’écran.
      A une époque, les polices « de base » livrées avec le système d’exploitation variaient selon qu’on était de la chapelle Apple ou de l’obédience Windows (je parle des polices courantes, pas des polices fantaisie). En conséquence, il fallait choisir une police commune aux deux églises pour publier à coup sûr. Pour cette raison, je suis fidèle à Verdana – mais c’est lassant !
      Est-ce toujours un critère de choix ? Peut-on par exemple considérer qu’un texte en calibri, sur le web ou dans une newsletter, pourra être lu par tous ?
      Ma seconde question aurait dû venir en premier : pourquoi n’évoquez-vous pas plus les polices créées spécialement pour la lecture à l’écran, dont on peut penser qu’elles sont les plus appropriées ?
      A noter en particulier les polices créées par Micro$oft lors du lancement de Vista, qui décrites dans le détail dans la page : « A Comprehensive Guide to Windows Vista Fonts for Designers » http://sixrevisions.com/web_design/a-comprehensive-guide-to-microsoft-vista-fonts-for-designers/
      Quelqu’un a-t-il d’autres infos à ce sujet ?

    7. En terme de web marketing et de présentation de site internet, la police de caractère est d’une importance capitale.
      En entrant plus en détail la taille de ces polices est tout aussi importante. L’article est d’une précision redoutable.
      L’aspect taille de police en fonction du support de consultation d’une page Web est aussi très utile: faire le bon choix de taille est aujourd’hui un casse tête, leur choix sur des sites internet en responsive design mérite réflexion et consultation de ces précieuses informations.

    8. @Hervé
      Pour la question de choix des polices « de base » : Ça dépend de ton support final. Si tu prépares des interfaces pour le web, tu peux dans la feuille CSS déclarer une police principale (ta police affichée par default, i.e. Calibri) et ensuite une ou plusieurs polices secondaires (dont Verdana). Comme ça le navigateur va essayer d’afficher en premier temps la police principale et en suite les polices secondaires.

      @soliles
      L’article parle des tailles minimales calculées à partir des tailles minimales indiquées par la norme ISO 9241. Effectivement pour des raisons de comm et de marketing, la taille de police peut varier pour s’adapter aux chartes graphiques et aux objectifs commerciaux de l’interface. Tu as peut-être plus d’informations sur ce sujet ? Je suis preneur !

    9. Julien Cassagne

      Bonjour,
      Une remarque concernant le tableau proposé en conclusion.
      Il n’est pas possible de recommander une taille minimale de police en fonction d’une distance sans prendre en compte la définition et la taille de l’écran.
      Pour 50 cm de distance de visu, il est recommandé une taille de 2,8 mm (norme ISO). Pour traduire cette exigence en taille de police, il faut calculer combien mesure un pixel de hauteur. Ce calcul ne peut se faire qu’en connaissant la définition et la taille de l’écran. En effet, pour une même taille d’écran de 22 pouces par exemple (au format 16/10), si on a une définition de 1680×1050, 1px = 0,282 mm alors que si on a une définition de 1440×900, 1px = 0,329 mm. Ainsi, une taille de police en px n’aura pas la même taille physique suivant la définition et la taille de l’écran.
      En conséquence la taille minimale de police recommandée sera différente (2,8 mm pour 50 cm) : pour 1680×1050, elle sera de 10px alors que pour 1440×900, elle sera de 8,5px.
      Si on a une taille d’écran différente, le calcul est à refaire puisqu’un pixel aura une hauteur physique (en mm)différente.
      En espérant avoir été clair …

    10. @julien c’est le but de la colonne densité, la densité correspond au nombre de pixel par pouce² et donc plus il y a de pixels, plus ils sont petits.

    11. Julien Cassagne

      @Nickko
      Dans ce cas ce n’est pas 12px mais 10,5px si mes calculs sont bon.
      Car si on a 96ppp, 1px = 0,265mm donc pour couvrir 2,8mm, il nous faut une taille de 10,5px.
      J’ai l’impression qu’il y a une petite confusion dans cet article qu’on retrouve dans le tableau « Résolution de l’écran ». La résolution d’affichage (nb de px par pouce) est nécessairement liée à une définition + une taille d’écran or dans le tableau il est dit qu’on a 75ppi pour un écran en 1024×768 avec une taille entre 13 et 18 pouces. Si on prend la définition exacte d’une résolution, c’est faut ; elle varient en fonction de la taille de l’écran et pour une même définition d’écran (1024×768 par ex), elle sera différente si on a un écran 13 pouces ou 18 pouces.

      Un article qui traite du sujet : http://www.lesintegristes.net/2011/05/06/web-resolution-72dpi/

    12. Une petite remarque sur une erreur qui revient très souvent, et qui rebondi sur le commentaire de Julien Cassagne. Attention a l’emploi du terme « résolution », il est toujours employer à la place de définition.

      La définition est le nombre de pixels contenus dans la largeur et la hauteur de l’écran (ex : 1920×1080), que vous appelez « résolution » dans votre article.

      La résolution (appelé ici densité de pixel… pourquoi inventé un terme alors qu’il en existe déjà un ?) est le nombre de pixel affiché sur 1 pouce.

      La résolution d’un écran est donc non gérable est inchangeable, elle est juste issu du rapport entre la définition et la taille (physique) de l’écran.

    13. [...] aux services tels que Typekit permet aux designers de travailler  avec une palette de polices de caractères plus [...]

    Publier un commentaire





    Notifiez-moi les commentaires à venir via e-mail. Vous pouvez aussi vous abonner sans commenter.

    Highslide for Wordpress Plugin