Associer des polices – duos pour titres et texte courant

Choisissez un duo de polices et voyez aussitôt comment titre et texte courant fonctionnent ensemble, avec votre propre texte si vous le souhaitez. Tous les duos utilisent uniquement des polices système préinstallées : rien à télécharger, aucune requête vers Google ni vers un autre serveur. Pour chaque duo : la justification, la hauteur d’x mesurée et la disponibilité par système.

Duo de polices

Taille du texte courant

Le titre est affiché 1,8 fois plus grand.

Vos saisies sont enregistrées uniquement dans ce navigateur.

Aperçu

L’art du bon titre

Une bonne typographie ne se remarque pas. Elle guide l’œil tranquillement dans le texte, pose une hiérarchie claire et laisse parler le contenu, sur un smartphone comme sur un grand écran.

Votre titre (facultatif)Votre texte (facultatif)

Votre texte reste dans cette fenêtre du navigateur : il n’est ni enregistré, ni envoyé, ni ajouté à l’adresse de la page.

CSS à copier

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.2;
}
body {
  font-family: Verdana, Tahoma, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

Tous les duos de polices

Résultat

Duo de polices: Georgia + Verdana
Pourquoi ça fonctionne: Contraste classique entre une police à empattements et une linéale : Georgia pour les titres, Verdana pour le texte. Matthew Carter a dessiné les deux pour l’écran, d’où des proportions et un rythme cohérents. Verdana a une très grande hauteur d’x et chasse large : réduisez le texte d’environ 1 px.
Hauteur d’x (mesurée): Georgia: 0,481 em · Verdana: 0,545 em – à taille égale, le texte courant paraît environ 13 % plus grand
Disponibilité par système: Système Titre Texte courant
Windows 10/11 Georgia Verdana
macOS Georgia Verdana
iPhone/iPad Georgia Verdana
Android Noto Serif (remplacement) Roboto (remplacement)

Système	Titre	Texte courant
Windows 10/11	Georgia	Verdana
macOS	Georgia	Verdana
iPhone/iPad	Georgia	Verdana
Android	Noto Serif (remplacement)	Roboto (remplacement)

Comment le calcul est fait

Comment associer des polices

Deux polices vont bien ensemble lorsqu’elles sont nettement différentes mais construites de façon proche. La valeur sûre : le contraste entre une police à empattements (serif) et une linéale (sans serif), l’une pour les titres, l’autre pour le texte courant. Deux serifs ou deux linéales trop semblables donnent vite l’impression d’une erreur.

Tout aussi importante, la hauteur d’x : la hauteur des minuscules par rapport au corps. Une police à grande hauteur d’x (Verdana : 0,545 em) paraît nettement plus grande à taille égale qu’une police à petite hauteur d’x (Calibri : 0,464 em). Si les hauteurs d’x d’un duo sont très éloignées, compensez avec la taille. Les valeurs affichées proviennent de la table OS/2 des fichiers de polices de Windows 11.

Pourquoi uniquement des polices système ?

Les polices système sont déjà installées sur l’appareil : la page se charge plus vite, le texte ne saute pas au chargement et aucune requête ne part vers un serveur tiers. Charger des polices web directement depuis un CDN transmet l’adresse IP de chaque visiteur à ce fournisseur, ce qui pose question au regard du RGPD. Pour des polices personnalisées, mieux vaut les héberger soi-même.

La pile de polices : pourquoi plusieurs noms ?

Aucune police n’est présente sur tous les systèmes. Le CSS aligne donc plusieurs polices (une pile de polices) : le navigateur prend la première installée et une famille générique comme serif ou sans-serif sert de filet. Le tableau indique la police réellement affichée sous Windows, macOS, iPhone/iPad et Android, d’après les listes de polices de Microsoft et d’Apple et la configuration de polices d’Android (consultées le 27/09/2026). Android n’a ni Georgia ni Verdana et affiche Noto Serif ou Roboto ; sous Linux, les polices varient selon la distribution.

Conseils pour un texte lisible

À l’écran, composez le texte courant en 16 px minimum, idéalement 17 à 20 px, avec un interlignage d’environ 1,5 à 1,7.
Faites des titres nettement plus grands (1,6 à 2 fois) et plus gras que le texte : une seule famille peut alors suffire.
Limitez les lignes à 60 à 80 caractères environ.
Vérifiez le contraste : un gris sur blanc devient vite trop pâle, d’où le vérificateur de contraste.

Questions fréquentes

Quelles polices vont bien ensemble ?

Les duos serif + linéale sont une valeur sûre : Georgia avec Verdana, Palatino avec la police système ou Cambria avec Calibri. L’essentiel : un contraste net et des hauteurs d’x proches.

Combien de polices utiliser sur un site ?

Deux au maximum : une pour les titres, une pour le texte. Une troisième, par exemple une police à chasse fixe pour le code, seulement si elle a un rôle propre.

Georgia et Verdana sont-elles disponibles partout ?

Sur Windows, macOS et iOS, oui. Android ne les fournit pas et affiche Noto Serif ou Roboto : terminez donc toujours la pile par une famille générique comme serif ou sans-serif.

Qu’est-ce que la hauteur d’x ?

La hauteur d’un x minuscule rapportée au corps de la police. Une grande hauteur d’x améliore la lisibilité à taille égale mais demande un peu plus d’interlignage.

Pourquoi ne pas charger des polices depuis un CDN ?

Chaque affichage transmet alors l’adresse IP du visiteur au fournisseur de polices et ajoute un téléchargement avant l’affichage du texte. Les polices système évitent les deux ; des polices personnalisées peuvent être auto-hébergées.

Mon texte d’aperçu est-il enregistré ?

Non. Vos titres et textes restent uniquement dans cette fenêtre. Seuls le duo choisi et la taille de police sont mémorisés.

Sources et références juridiques

Dernière mise à jour : 27 septembre 2026