Pendant que vous concevez votre site internet, vous ferez un clin d’œil à la typographie pour un rendu professionnel de vos textes. A la fois un art et une technique, elle organise les lettres et les mots pour rendre un message lisible, compréhensif et attractif.
Partie intégrante de l’expérience utilisateur (UX), elle facilite la lecture et l’assimilation de vos textes en ligne. La typographie améliore l’accessibilité, la lisibilité, la convivialité, l’esthétique et l’image de marque. Les polices en constituent l’un des aspects les plus connus.
Les polices, ça ne sert pas qu’à faire joli…
Les polices consistent à choisir les caractères, l’espacement des lettres, les tailles des ponctuations et la longueur des lignes. Bien sélectionnées, les polices vous donnent une allure professionnelle et inspirent confiance à l’acheteur. Elles impactent profondément et durablement les performances SEO du site internet.
Des polices optimisées réduisent le temps de chargement du site internet. De plus, elles entraînent une meilleure fidélisation de l’audience.
Enfin, les polices améliorent la lisibilité du contenu sur les terminaux mobiles. En conséquence, elles constituent un atout charnière pour l’ergonomie mobile-first de Google.
Comment dénicher la perle rare parmi les nombreuses polices existantes ?
La police d’un site internet doit être lisible et transmettre votre identité de marque. Elle doit équilibrer les contrastes et hiérarchiser visuellement vos contenus.
Pas plus de 3 polices pour un site internet, c’est le bon ratio. De plus, elles doivent être sécurisées, fiables et accessibles, y compris pour les technologies d’assistance. Les ratios :
Police avec empattement (avec Serif) = imprimerie
Police sans empattement (sans Serif) = écrans numériques
Pour le corps de texte, choisissez de préférence une police sans empattement et équilibrez l’espacement entre les lignes selon la formule :
La hauteur de ligne = la taille de police X 1,5
20 à 30 px entre les paragraphes
Enfin, elle doit être configurée à la bonne taille. Pas trop grande, elle doit prendre sa place de manière équilibrée dans l’espace du contenu. Pas trop petite, elle doit rester lisible pour les recherches sur smartphones et les clics sur mobile.
Des polices correctement optimisées sont attractives et transmettent avantageusement le ton général de votre message de marque.
Les types de caractères de base de la typographie à connaître
Serif :
- Présence de traits décoratifs aux extrémités (Serifs)
- Guide efficace pour le regard du lecteur
- Adapté aux textes longs
- Adapté aux contextes professionnels
- Apparence classique et intemporelle
- Exemples : Georgia, Times New Roman et Garamond
Caractères sans empattement :
- Sans traits décoratifs
- Lignes simples, épurées
- Adaptés aux titres et les blocs de texte
- Faciles à lire d’un coup d’œil
- Adapté conforme aux exigences ADA de WordPress
- Excellent pour les écrans de basse résolution
- Exemples : Arial, Verdana et Helvetica
Caractères avec empattement :
- Présence de traits décoratifs épais aux extrémités
- Aussi appelés “polices égyptiennes”
- Plus traditionnels que les caractères sans empattement
- Adaptés aux imprimés
- Adaptés aux titres sur les écrans numérique
- Diffusent un sentiment de stabilité chez le lecteur
- Exemples : Courrier New et Rockwell
Caractères script :
- Imitent l’écriture manuscrite
- Adapté aux projets créatifs
- Adapté aux logos et aux invitations
- Apparence formelle et élégante
- Exemples : Lucida Handwriting, Brush Script et Freestyle Script
Quelques polices optimisées pour les professionnels
| Avantages SEO | Popularité estimative | Avantages | |
| Open Sans | Neutre Visibilité excellente | 25% | Neutralité Empathique Lisibilité sous plusieurs angles Complémentaire par défaut pour la majorité des polices Fiable pour les imprimés, le web et les mobiles |
| Montserrat | Un design qui attire l’œil Audace scripturale | 15% | Accrocheur Adapté au minimalisme Utile pour les grands titres Design moderne Reste lisible, même en petite taille |
| Nunito Sans | Convivial Attrayant Engageant | 7% | Accueillant Adapté simultanément pour les titres et le corps de texte Lisible sur tous supports Idéal pour les marques empathiques |
| Playfair Display | Contraste élevé Stimule l’intérêt visuel | 6% | Adapté simultanément pour les titres et le corps de texte Un fort contraste entre le gras et les traits fins Sophistiqué Compatible avec les polices de corps simples sans empattement |
| Pacifico | Ludique Engageant Adapté aux sites informels et créatifs | 4% | Idéal pour l’image de marque Adapté aux logos Manuscrit Aspect ludique/ créatif Utile pour les sites web décontractés |
| Roboto | Lisibilité maximale sur tous les terminaux | 20% | Lisibilité optimale Adapté simultanément pour les titres et le corps de texte Aspect soigné et professionnel Adapté simultanément pour l’ergonomie web et mobile |
| Georgia | Hauteur optimale pour la lisibilité | 8% | Élégant Accessible Adapté aux contenus longs Reste lisible, même en petite taille |
| Lobster 2 | Caractère affirmé Professionnel | 7% | Ludique Facilite la lecture Adapté aux titres percutants Professionnel avec du caractère Plus performant en grande taille |
| Times New Roman | Lisibilité extrême Réduit le taux de rebond Renforce l’engagement | 5% | Lisibilité optimale, quelle que soit la taille Adapté pour les contenus de type formel, juridique ou académique Professionnel et fiable Compatible avec tous les terminaux |
| Roboto Serif | Lisibilité maximale sur tous les terminaux | 3% | Structure la hiérarchie visuelle Élégant Épuré Moderne Adapté aux écrans Compatible avec tous les terminaux |
Comment déployer les polices ?
Les polices d’icônes sont utiles pour les icônes vectorielles, mais peu recommandables pour la lisibilité du texte. A l’opposé, les polices système sont rapides et fiables. Cependant, elles limitent les options de créativité. Bien que les polices web offrent d’innombrables options de déploiement, elles doivent impérativement être optimisées au risque de ralentir votre site internet.
Comment optimiser le temps de chargement des polices ?
La taille, le format et le type de chargement impactent l’optimisation des polices.
Pour un chargement rapide, la taille du fichier de police doit être réduite. Faites-le en quelques étapes :
- Identifiez les caractères et glyphes inutiles de vos fichiers de police, c’est-à-dire ceux que vous n’utiliserez jamais
- Supprimez-les
- Compressez les fichiers de police avec un outil approprié
Les navigateurs prennent en compte chacun un ou plusieurs types de formats de fichiers de police. Aussi, fournissez la sauvegarde de la version la mieux adaptée pour chaque navigateur.
Enfin, le chargement paresseux des sous-ensembles de polices épargnera les longues attentes aux visiteurs du site. Les caractères prioritaires pour la lecture seront chargés en priorité dès qu’ils atterriront sur votre site internet.
Quelques précautions d’usage
La police de vos textes en ligne reflète l’esprit de votre marque et doit y correspondre. Si vous visez l’international, adaptez la taille de police en fonction des tailles, préférences et modèles de polices spécifiques à chaque langue.
Pour compresser les fichiers de police, les outils WOFF ou WOFF2 peuvent s’avérer utiles. Si la technique n’est pas votre tasse de thé, les outils SEO spécialisés chargeront vos fichiers de police de manière optimale.
Certaines polices exigent une licence payante. D’autres sont inadaptées pour certains navigateurs ou appareils. Dans ces cas-là, vous devez prévoir l’affichage de polices de remplacement pour les lecteurs. Arial joue parfaitement ce rôle de remplissage. Pour offrir du choix, vous pouvez ajouter Georgia et Verdana.
Et pour ceux qui s’en foutent ?
Choisissez au pif, tant que votre police est lisible. Ensuite, arrangez-vous pour communiquer sur votre identité de marque. Puis harmonisez le tout pour un rendu esthétique.
Conventionnellement : pas plus de 3 polices par page.
C’est fait ✅. Dès que votre mise en page est bouclée, effectuez des tests avant lancement. Par exemple, une police lisible sur un appareil peut être floue sur un autre.
Et après ? Examinez périodiquement le rendu du site pour améliorer votre stratégie UX de manière dynamique.
