Typographie web : comment choisir et composer les polices d’un site

La typographie web, c’est le choix et la mise en forme du texte sur un site : quelles polices, à quelles tailles, avec quelle longueur de ligne, quel interlignage, quelles graisses et quel contraste, et comment les polices sont chargées pour que les pages restent rapides. Une bonne typographie web rend le texte facile à lire sur tous les écrans, porte la voix de la marque et reste accessible ; un système bien pensé se contente généralement de deux polices au plus et d’une courte échelle de tailles.

Dernière mise à jour : 29 octobre 2026.

Ce guide aborde le choix des polices d’un site, la construction d’une échelle typographique, les réglages qui font la lisibilité, les exigences d’accessibilité, le chargement des polices et la performance, les licences, la typographie multilingue et les erreurs que nous rencontrons le plus souvent. Il s’adresse aux responsables marketing, aux dirigeants et aux designers qui rédigent le brief d’un site web ou le relisent.

Chez Odduel, agence créative et technologique à Barcelone et São Paulo, notre offre de branding conçoit des identités dont la typographie doit fonctionner à l’écran comme sur papier. Pour The Sugar Coated Cult, nous avons associé Druk Condensed et Druk Wide pour le titrage à Helvetica Neue pour le texte ; pour Torto Cozinha, Neue Metana pour les titres et Avenir Next pour le texte courant. Notre propre site est composé en Inter, auto-hébergée. Les principes qui suivent viennent de ce travail.

En bref : choisissez pour le texte une police qui se lit bien en petite taille à l’écran, et au plus une seconde pour les titres, qui porte la marque. Composez le texte courant en 16 pixels ou plus, avec des lignes d’environ 45 à 75 caractères et un interlignage d’environ 1,4 à 1,6 fois la taille du corps. Construisez une échelle de tailles courte, gardez un contraste fort, laissez le texte s’agrandir, ne chargez que les graisses utilisées, auto-hébergez les polices quand la licence le permet et vérifiez chaque langue dans laquelle vous publiez.

Comment choisir les polices de caractères d’un site web ?

Partez du rôle de chaque police, pas d’un moodboard.

• Police de texte : celle qui porte les paragraphes, les formulaires et les menus. Il lui faut des formes ouvertes, une distinction nette entre des caractères proches comme I, l et 1, une hauteur d’x généreuse pour les petites tailles, ainsi que les graisses et italiques dont vous avez besoin.
• Police de titrage : facultative, pour les titres et les phrases courtes où la marque s’exprime le plus fort. Elle peut être plus singulière, car on la lit par fragments brefs, en grande taille.
• Police à chasse fixe ou d’accent : ponctuelle, pour du code, des données ou un élément propre à la marque.

Testez les candidates avec votre vrai contenu, dans chaque langue publiée, aux tailles que vous utiliserez, sur un téléphone et un ordinateur portable. Une police spectaculaire sur un spécimen peut fatiguer l’œil dans un long paragraphe.

La police de titrage est le point de rencontre entre typographie et identité. Elle doit venir du système de la marque, pour que le site, le packaging, les publications sur les réseaux sociaux et la signalétique parlent d’une seule voix. Si la police de titrage de l’identité n’a pas de licence web ou ne couvre pas vos langues, choisissez une police adaptée au web de structure proche plutôt qu’un substitut sans rapport, et consignez ce choix dans la charte graphique. Notre guide du branding explique la place de la typographie dans l’identité, du logo au ton de voix.

Serif ou sans serif à l’écran ?

Les écrans actuels affichent bien les deux. Les polices sans serif restent le choix par défaut pour les interfaces et le texte courant, car elles restent nettes en petite taille et sur les écrans moins définis. Les polices serif peuvent très bien fonctionner pour la lecture longue, les sites éditoriaux et les marques qui veulent une voix plus littéraire, à condition d’être dessinées pour l’écran et composées à une taille confortable. C’est une question de ton et de lisibilité à vos tailles, pas une règle.

Comment construire une échelle typographique ?

Une échelle typographique est un petit ensemble de tailles utilisées de façon cohérente sur tout le site. Elle garde les pages homogènes et accélère le design comme le développement.

Rôle	Taille courante sur ordinateur	Taille courante sur téléphone	Interlignage	Remarques
Texte courant	16 à 20 px	16 à 18 px	1,4 à 1,6	Jamais moins de 16 px pour les paragraphes
Petit texte (légendes, libellés)	13 à 14 px	13 à 14 px	1,3 à 1,5	Textes courts uniquement, avec un contraste fort
H3	20 à 24 px	18 à 22 px	1,2 à 1,35	Nettement plus grand ou plus gras que le texte courant
H2	28 à 40 px	24 à 30 px	1,1 à 1,25	Titres des sections principales
H1	40 à 80 px ou plus	30 à 44 px	1,0 à 1,15	Un seul par page ; peut utiliser la police de titrage

Ce sont des fourchettes, pas une norme. De nombreux sites utilisent désormais des tailles fluides, qui augmentent progressivement entre un minimum et un maximum à mesure que la fenêtre s’élargit : les titres tiennent sur les téléphones étroits et gardent leur présence sur les grands écrans.

Quels réglages déterminent la lisibilité ?

• Longueur de ligne : environ 45 à 75 caractères par ligne pour le texte courant, espaces compris. Des lignes plus longues rendent la ligne suivante difficile à retrouver ; des lignes plus courtes cassent le rythme.
• Interlignage : environ 1,4 à 1,6 fois la taille de la police pour les paragraphes, plus serré pour les grands titres.
• Espacement des paragraphes : un espace net entre les paragraphes, généralement proche d’une ligne.
• Alignement : texte aligné à gauche pour la plupart des contenus dans les langues qui se lisent de gauche à droite ; évitez le texte justifié sur le web, qui crée des espaces irréguliers.
• Graisses : regular pour le texte courant, une graisse nettement plus forte pour la mise en valeur et les titres ; les graisses très fines sont difficiles à lire en petite taille.
• Capitales et espacement : les libellés courts en capitales gagnent à un interlettrage légèrement plus large ; les longs passages en capitales sont difficiles à lire.
• Mots orphelins et coupures : évitez qu’un mot reste seul sur la dernière ligne d’un titre ou d’un paragraphe court ; le CSS moderne sait équilibrer automatiquement les lignes des titres.

Quel est l’impact de la typographie sur l’accessibilité ?

Une typographie accessible, c’est surtout une bonne typographie appliquée avec constance. Les règles pour l’accessibilité des contenus web (WCAG) fixent un rapport de contraste minimal de 4,5:1 pour le texte normal et de 3:1 pour le texte de grande taille, et demandent que le texte puisse être agrandi et les espacements augmentés sans perte de contenu.

• Contraste : vérifiez le texte sur son fond réel, y compris le texte posé sur des photos.
• Agrandissement : utilisez des unités relatives pour que le texte grandisse quand les visiteurs augmentent la taille dans leur navigateur.
• Espacements : la mise en page doit résister à un interlignage, un interlettrage et un espacement des mots plus importants.
• Pas de texte dans les images : les titres et les messages doivent être du vrai texte, qui peut être lu, traduit et agrandi.
• Focus et liens bien visibles : les liens doivent ressembler à des liens, et le focus clavier doit être visible.

Notre guide sur l’accessibilité des sites web détaille les exigences applicables en Europe.

Comment le chargement des polices influence-t-il les performances ?

Les polices sont des fichiers que chaque visiteur télécharge : elles influent sur la vitesse et sur la façon dont la page s’affiche pendant le chargement.

• Ne chargez que ce que vous utilisez : chaque graisse et chaque style est un fichier distinct ; deux familles en trois graisses chacune suffisent généralement.
• Utilisez des formats modernes : le WOFF2 est compressé et pris en charge par les navigateurs actuels.
• Hébergez vos polices vous-même si possible : les servir depuis votre propre domaine évite des connexions supplémentaires et, avec certains services, le transfert des données des visiteurs à des tiers, ce qui compte au regard du RGPD.
• Maîtrisez l’affichage du texte : réglez font-display pour que le texte s’affiche immédiatement dans une police de secours, et choisissez une police de secours aux proportions proches pour que les lignes ne sautent pas à l’arrivée de la police web.
• Préchargez le fichier principal utilisé pour le premier écran, et limitez les polices aux caractères dont vos langues ont besoin.
• Envisagez les polices variables, qui réunissent de nombreuses graisses dans un seul fichier, si vous utilisez plusieurs graisses.

Les bonnes pratiques de Google pour les polices détaillent ces techniques.

Comment fonctionne la licence des polices sur le web ?

Les polices sont des logiciels soumis à licence. Une licence bureau, prévue pour concevoir des supports imprimés, ne couvre généralement pas l’intégration de la police sur un site web, et les licences web peuvent être facturées selon le nombre de pages vues par mois ou de domaines. Les familles open source peuvent être utilisées librement dans le respect de leur licence. Tenez un registre de chaque police, de sa licence et de ce qu’elle couvre, et intégrez-le à votre charte graphique ; notre guide sur la charte graphique explique ce qu’elle doit contenir d’autre.

Que change-t-il sur les sites multilingues ?

Un site multilingue a besoin de polices qui couvrent chaque caractère affiché : les lettres accentuées, les caractères propres à certaines langues comme le ß et les trémas de l’allemand, et tout autre alphabet que vous prévoyez d’ajouter. Vérifiez le jeu de caractères d’une police avant de la retenir. Testez les titres dans la langue la plus longue, car certains mots peuvent être bien plus longs qu’en anglais. Assurez-vous aussi que les retours à la ligne et la césure fonctionnent dans chaque langue. Une taille qui tient sur une ligne en anglais devra parfois s’adapter ailleurs.

Quelles sont les erreurs courantes en typographie web ?

• Trop de polices ou de graisses, qui nuisent à la cohérence et ralentissent les pages.
• Un texte courant trop petit, surtout sur téléphone.
• Un texte gris peu contrasté sur fond clair.
• Des lignes trop longues sur les grands écrans.
• Du texte intégré aux images, que les lecteurs d’écran ne peuvent pas lire et qu’on ne peut ni traduire ni agrandir.
• Des polices chargées depuis plusieurs services sans nécessité, ce qui multiplie les connexions et les transferts de données.
• Oublier les autres langues, avec des accents manquants ou des titres qui débordent.
• Aucune solution de repli, si bien que le texte reste invisible ou saute pendant le chargement des polices.

Questions fréquentes

Une bonne typographie web est un système court et cohérent, testé avec de vrais contenus dans chaque langue publiée. Découvrez comment notre offre de branding conçoit des polices qui fonctionnent à l’écran comme à l’impression, ou parlez-nous de votre projet : nous examinerons la typographie de votre site.