FR

Association de polices : duos pour titres et texte courant

Pour une association de polices, 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.

Source : Microsoft Learn – Font List Windows 11 (état au 21 avril 2022, consulté le 27 septembre 2026). Mise à jour : .

px
Le titre est affiché 1,8 fois plus grand.
Ma boîte à outilsVos 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 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èmeTitreTexte courant
Windows 10/11GeorgiaVerdana
macOSGeorgiaVerdana
iPhone/iPadGeorgiaVerdana
AndroidNoto 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.

Associer des polices en 3 étapes

  1. Choisissez un duo de polices dans la liste, par ex. Georgia + Verdana.
  2. Réglez la taille du texte courant (12 à 28 px) et testez si vous le souhaitez votre propre texte dans l’aperçu.
  3. Vérifiez la justification, la hauteur d’x et la disponibilité par système, puis copiez le CSS.

Exemple : Georgia + Verdana avec un texte courant de 18 px : le titre s’affiche 1,8 fois plus grand, soit 1,8 × 18 = 32,4 px. La hauteur d’x est de 0,481 em (Georgia) et 0,545 em (Verdana) : à taille égale, le texte courant paraît environ 13 % plus grand.

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

Autres outils de webdesign : choisissez vos couleurs avec le générateur de palette de couleurs, convertissez-les avec le convertisseur de couleurs et créez des fonds avec le générateur de dégradé CSS.

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 : · Principes éditoriaux

Outils similaires