Typographie web

Pourquoi la typographie est-elle si importante ?

Le texte représente 95% du contenu du web selon les spécialistes UX. Une mauvaise typographie rend même le meilleur contenu illisible et fait fuir les visiteurs. À l’inverse, une typographie soignée améliore la compréhension, le temps passé sur le site et la conversion.

• Lisibilité — une taille de police trop petite, un contraste insuffisant ou un interligne trop serré rendent la lecture pénible, surtout sur mobile.
• Hiérarchie visuelle — les différentes tailles et graisses permettent au lecteur de scanner la page et de trouver rapidement l’information recherchée.
• Identité de marque — le choix d’une police communique un message : moderne, classique, ludique, sérieux, artisanal. La typographie fait partie intégrante de la charte graphique.
• Accessibilité — les choix typographiques impactent directement l’accessibilité pour les personnes ayant des difficultés de lecture (dyslexie, basse vision).

Les règles de base de la typographie web

• Taille minimale de 16px — c’est le seuil de confort de lecture sur écran. En dessous, la lecture devient fatigante, surtout sur mobile.
• Interligne (line-height) de 1.5 à 1.7 — un interligne généreux aide l’œil à passer d’une ligne à l’autre sans se perdre.
• Longueur de ligne de 50 à 75 caractères — au-delà, l’œil a du mal à retrouver le début de la ligne suivante. En-dessous, la lecture est saccadée.
• Contraste suffisant — ratio minimum de 4.5:1 entre le texte et le fond. Du gris foncé (#333) sur blanc est le standard, pas du gris clair.
• Hiérarchie claire — les titres doivent être significativement plus grands que le corps de texte. Une différence de 20-30% entre chaque niveau est un bon repère.
• Maximum 2 polices — une pour les titres, une pour le corps de texte. Plus de 2 polices crée une cacophonie visuelle.

Polices avec ou sans empattement ?

• Serif (avec empattement) — comme Times New Roman, Georgia, Playfair. Plus classique, formel, institutionnel. Souvent utilisée pour les titres ou les contenus éditoriaux longs.
• Sans-serif (sans empattement) — comme Arial, Helvetica, Poppins, Inter. Plus moderne, épurée, digitale. Le choix par défaut pour l’interface et le corps de texte sur écran.
• Combinaison classique — serif pour les titres + sans-serif pour le corps de texte. Apporte du contraste tout en restant lisible.

Google Fonts : la bibliothèque de polices web

Google Fonts est une bibliothèque gratuite de plus de 1500 polices web librement utilisables sur n’importe quel site. Les polices les plus populaires pour le web moderne :

• Inter, Poppins, Roboto, Open Sans — polices sans-serif modernes, parfaites pour l’interface web.
• Playfair Display, Merriweather, Lora — polices serif élégantes pour les titres de contenus éditoriaux.
• Montserrat, Bebas Neue — polices d’affichage impactantes pour les hero sections et grands titres.

Typographie et performance

Les polices web peuvent impacter les Core Web Vitals. Charger trop de polices ou utiliser des polices non optimisées ralentit le chargement et peut provoquer du CLS (décalage de mise en page quand la police se charge). Les bonnes pratiques :

• Limiter le nombre de polices et de graisses — chaque fichier de police est un download supplémentaire. 2 polices × 3 graisses = 6 fichiers à charger.
• Précharger les polices critiques — avec <link rel=”preload”> pour les polices above the fold.
• Utiliser font-display: swap — affiche une police système en fallback pendant le chargement de la police web, évitant les FOIT (Flash Of Invisible Text).
• Héberger localement — plutôt que de charger depuis Google Fonts directement, télécharger les polices et les servir depuis votre serveur améliore la performance et respecte le RGPD.

Besoin d’un site web au design professionnel ?