Choisir la bonne taille pour les textes sur son site web peut vite devenir un casse tête. Heureusement, il existe des méthodes simple pour garder une cohérence et améliorer la lisibilité des textes.
Vous trouverez ici un guide pratique et rapide basé sur mon expérience et mes recherches.
Choisir la bonne unité de mesure des polices :
Pour commencer, vous allez devoir choisir une unité de mesure. Il y en a plusieurs mais toutes ont leurs spécificités.
Voici les unités de mesure plus courantes :
- Pixel (px)
- Pourcentage (%)
- Emphemeral Unit (em)
- Root Emphemeral Unit (rem)
- Point (pt)
- Viewport width (vw)
Je ne vais pas rentrer dans les détails techniques de chacune de ces unités mais l’unité de mesure à privilégier pour la taille des polices sur le web est le Root Emphemeral Unit (rem).
Cette unité permet de s’adapter aux préférences des utilisateurs (dans les réglages de leurs navigateur) et est donc plus accessibles pour un plus grand nombre de personnes.
Quelles tailles de police utiliser ?
Maintenant que vous avez choisit la bonne unité de mesure, il va falloir utiliser les bonnes tailles.
Je choisissait les taille des typographies à l’œil avant de connaitre les tailles recommandés… ce n’est clairement pas la bonne manière de faire.
Voici des tailles couramment utilisé, qui vous garantirons une bonne lisibilité :
- Grand titre : 2,25 rem à 3 rem
- Titre moyen : 1,75rem à 2,25rem
- Petit titre : 1.25rem à 1.75rem
- Paragraphe : 0,8 et 1,2 rem
Vous connaissez désormais la bonne unité et les tailles recommandées, mais il reste une chose qui fera toute la différence entre vous et les autres.
Utiliser une échelle de police :
C’est ce qui à vraiment fait une différence pour moi et à contribué à faire de mes site web, des sites professionnels.
L’échelle de police consiste à lister tous les types de textes que vous allez utiliser sur votre site web, puis à définir précisément les paramètres de chaque type de texte (taille, typographie, graisse, décoration, interlignage, interlettrage etc…)
L’échelle de police permet de garder une vraie cohérence sur l’ensemble de votre site. C’est un outils précieux, facile à mettre en place et pourtant beaucoup le néglige.
Voici un exemple d’échelle de police pour un site web :
| Élément | Taille (rem) | Graisse | Interligne (em) |
|---|---|---|---|
| H1 | 3.75 | 700 | 1.1 |
| H2 | 2.25 | 700 | 1.25 |
| H3 | 1.5 | 700 | 1.2 |
| H4 | 1.25 | 600 | 1.2 |
| H5 | 1.125 | 600 | 1.2 |
| H6 | 1.125 | 400 | 1.2 |
| Paragraphe | 1 | 400 | 1.5 |
| Petit texte | 0.874 | 400 | 1.5 |
| Bouton | 1 | 500 | 1.5 |
Vous pouvez utiliser cette outils « Type Scale Calculator » pour composer vos échelles de polices
Mon dernier conseil pour gérer vos tailles de polices
Vous l’aurais compris, il fait définir son unité de mesure, puis choisir la taille de sa police et enfin le faire pour chaque type de texte qui sera présent sur votre site web.
Mais le plus important c’est de s’y tenir.
J’ai longtemps fait l’erreur de mettre des tailles différentes un peu de partout sur mes sites… On se retrouve vite dans un espace peu lisible.
Gérer correctement vos taille de police va grandement contribuer à améliorer l’expérience de vos utilisateur et leurs donnerons envie de rester et de lire les contenus sur votre site web.
Aller plus loin, liens utiles :
- Google Fonts pour trouver vos polices libres de droits et compatibles pour le web
- TypeScale, un outils pour vous aider à définir les tailles idéales de vos polices
- Article de blog plus poussé sur : La meilleure taille de police pour un site Web et son impact sur l’UX et les conversions