Tailles des polices pour le Web Design et l’App Design.
Les unités de taille pour les textes en CSS.
px (pixels) : La taille est fixe et ne change pas en fonction des autres paramètres. Idéal pour un contrôle précis, mais moins flexible pour les différents appareils.
pt (points) : Utilisé principalement pour l’impression. 1 point = 1/72 de pouce.
em : Relatif à la taille de la police de l’élément parent. Utile pour créer des mises en page proportionnelles. Si la taille de police de l’élément parent est différente de celle de l’élément html, alors 1em = taille police du parent *1, 2em = taille police du parent *2, etc…
rem : Relatif à la taille de la police de la racine (généralement le <html>). Permet une meilleure cohérence globale. Si la taille de police du document html est de 16px, alors 1 rem=16px, 2rem=32px, etc…
Bonnes pratiques pour les tailles de textes.
- Utiliser des unités relatives : Pour une meilleure adaptabilité aux différents appareils et tailles d’écran, préférez
rem. - Consistance : Maintenez une taille de base cohérente pour le texte principal et ajustez les autres éléments en conséquence.
- Accessibilité : Assurez-vous que le texte est lisible sur tous les appareils. Évitez des tailles trop petites.
Voici un tableau indiquant les tailles de polices et les graisses que vous pouvez utiliser, pour un projet web.
Attention, si vous n’avez pas l’âme d’un designer, il est fortement conseillé de laisser les valeurs par défaut et de ne pas modifier la taille et la graisse de vos textes. Les paramètres par défaut sont standards et sont conformes aux bonnes pratiques d’utilisation, d’accessibilité, etc.
Element | Graisse | Taille (rem) | Interligne (rem) | |
Titre 1 | Normal | 3 | 1.25 | |
Titre 2 | Normal | 2.5 | 1.5 | |
Titre 3 | Normal | 1.5 | 1.5 | |
Sous-titre principal | Semi Bold | 1 | 24 | |
Sous-titre secondaire | Semi Bold | 0.8 | 20 | |
Corps principal | Normal | 1 | 1.75 | |
Corps secondaire | Normal | 0.8 | 1 | |
Bouton | Semi Bold | 1 | 1.5 | |
Légende | Normal | 0.6 | 1 | |
Label | Semi Bold | 0.6 | 1 |