Devenez Développeur

Changer la police et la taille du texte en CSS

Par Sam Accolade · Publié le 30 septembre 2026

Deux propriétés suffisent pour transformer l'aspect d'un texte : font-family choisit la police et font-size règle sa taille. Le piège consiste à ne prévoir qu'une police, ou à figer une taille sans penser aux préférences du lecteur. Nous allons donc construire une base qui fonctionne avec les polices déjà présentes sur l'appareil, puis ajouter une police Google en option.

Les exemples de cette page ont été exécutés le 30 septembre 2026 dans Chromium 153 avec Playwright 1.63. Le banc a aussi rejoué la page en bloquant les requêtes vers Google Fonts. Pour revoir les autres propriétés du texte, gardez sous la main le guide pour mettre en forme le texte en CSS.

Commencer par une pile de polices système

Une famille comme Arial n'est pas installée partout. font-family accepte donc une liste séparée par des virgules. Le navigateur essaie les familles dans l'ordre et termine par une famille générique, ici sans-serif. Cette dernière laisse le navigateur choisir une police sans empattements disponible.

:root {
  font-size: 100%;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

system-ui demande la police d'interface du système. Les noms composés, comme Segoe UI, sont placés entre guillemets. Le dernier mot-clé est indispensable : même si aucune famille nommée n'est disponible, le texte garde une police adaptée à la catégorie demandée.

Parcours de la pile font-family : system-ui est essayé en premier, puis les familles nommées, puis sans-serif garantit un choix disponible.
Le navigateur parcourt la pile de haut en bas et s'arrête sur une police disponible.

La pile ne télécharge rien. Elle constitue donc une solution complète, utilisable hors connexion. Le rendu varie légèrement entre Windows, macOS, Android et Linux, puisque chaque appareil peut choisir une police différente. Cette variation est prévue par la règle.

Régler la taille avec rem sans neutraliser le lecteur

Dans la feuille précédente, 1rem se rapporte à la taille de l'élément racine. Avec la configuration par défaut du Chromium utilisé pour le banc, la mesure donne 16 px et line-height: 1.6 donne 25,6 px. Quand le banc porte la racine à 125 %, les mêmes déclarations donnent 20 px et 32 px. Le composant suit donc bien la valeur calculée à la racine.

Évitez de réduire la racine pour obtenir une conversion plus facile, par exemple avec html { font-size: 62.5%; }. Vous partez alors d'un texte minuscule que chaque composant doit compenser. Une base de 100%, puis des tailles en rem, garde une relation simple avec le réglage initial.

p {
  font-size: 1rem;
}

h1 {
  font-size: 2rem;
}

Le pixel reste utile pour une bordure ou un détail graphique. Pour approfondir les références de em, rem, % et des unités liées à la fenêtre, le guide sur les unités CSS les mesure séparément. Ici, retenez surtout que la taille du texte peut rester relative à la racine.

Ajouter Google Fonts comme amélioration facultative

Une police web donne un rendu plus constant, mais elle ajoute des fichiers distants. L'API CSS de Google Fonts fournit une feuille de style qui déclare les fichiers nécessaires. Cet exemple demande seulement les graisses 400 et 700 de Source Sans 3, celles utilisées pour le texte courant et le gras.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;700&display=swap"
  rel="stylesheet"
>
body {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

display=swap autorise d'abord l'affichage avec la police de secours, puis le remplacement si la police web arrive. La pile reste donc essentielle : Google Fonts est le premier choix, system-ui prend le relais, et sans-serif ferme la liste.

Lors du passage en ligne du banc, Chromium a chargé une feuille CSS depuis fonts.googleapis.com et au moins un fichier de police depuis fonts.gstatic.com. Lors du second passage, la requête vers la feuille CSS a été bloquée avant qu'aucun fichier de police soit demandé : le paragraphe est resté visible avec le même contenu et une hauteur non nulle. Cela prouve la continuité de cet exemple hors réseau, sans mesurer sa vitesse ni tirer de conclusion sur sa confidentialité.

Si votre site doit fonctionner sans dépendance externe, conservez simplement la pile système de la première étape. Vous pouvez aussi héberger vous-même une police dont la licence l'autorise, mais cette opération demande de gérer les formats et les déclarations @font-face. Elle mérite un exercice séparé.

Assembler une page minimale

Placez les balises <link> dans le <head> de la page, puis la règle CSS dans votre feuille de style. Si vous avez encore une balise <style> au milieu du HTML, suivez d'abord la méthode pour créer et lier un fichier CSS.

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Essai de police</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Une typographie lisible</h1>
    <p>Ce texte conserve une police de secours et une taille relative.</p>
  </body>
</html>

Testez ensuite trois situations : la page habituelle, une racine agrandie dans les outils du navigateur et le réseau coupé. Le texte doit rester présent dans les trois cas. Vérifiez aussi que chaque graisse demandée est réellement déclarée dans l'URL Google Fonts, faute de quoi le navigateur devra fabriquer ou substituer le rendu.

La règle à garder

Commencez par system-ui, sans-serif et une taille de 1rem. Ajoutez des familles intermédiaires si vous avez une raison graphique précise. Une police web vient ensuite comme amélioration, toujours suivie d'une pile de secours. Vous obtenez ainsi un texte lisible avant, pendant et après un éventuel chargement externe.

Sources consultées