Docs CSS exécutables : Taille de police

Q: Comment changer la taille de police en CSS ?

Définissez la propriété font-size sur l'élément : p { font-size: 18px; }. Elle accepte des longueurs (px, rem, em), des pourcentages et des mots-clés comme large.

Q: Comment changer la taille du texte en HTML ?

Avec du CSS, dans une feuille de style ou dans un attribut style : . L'ancienne balise est obsolète en HTML5 et ne doit plus être utilisée.

Q: Faut-il utiliser px, em ou rem pour la taille de police ?

Utilisez rem pour la plupart des textes : il suit le réglage de police du navigateur de l'utilisateur et ne se multiplie pas. Utilisez em quand une taille doit suivre son parent, comme une icône dans un bouton. px ne suit pas la taille par défaut choisie par le lecteur dans son navigateur, évitez-le donc pour le texte courant.

Q: Pourquoi ma taille de police en em ne cesse-t-elle de grossir ?

Parce que em est relatif à la taille de police du parent, et les éléments imbriqués se multiplient : 1.2em dans 1.2em donne 1,44 fois la base. Passez à rem, qui est toujours relatif à l'élément racine.

Comment définir la taille de police en CSS

La propriété font-size définit la taille du texte. Placez-la sur n'importe quel élément et tout le texte qu'il contient hérite de cette taille, sauf si un enfant définit la sienne.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

Pour changer la taille du texte en HTML, on utilise toujours du CSS. Ajoutez un attribut style () ou une règle dans une feuille de style. La balise  des années 1990 est obsolète et n'a pas sa place dans une page moderne.

Les unités acceptées par font-size

Valeur	Exemple	Relative à
`px`	`16px`	Rien : une taille fixe
`rem`	`1.25rem`	La taille de police de l'élément racine `<html>` (16px par défaut)
`em`	`1.2em`	La taille de police de l'élément parent
`%`	`120%`	La taille de police du parent, comme `em` (`120%` vaut `1.2em`)
Mot-clé	`large`	Une échelle prédéfinie autour de `medium`, la valeur par défaut
Mot-clé relatif	`smaller`, `larger`	Un cran par rapport à la taille du parent
Viewport	`4vw`	La largeur du viewport (4 % de celle-ci)
Fonction	`clamp(1rem, 4vw, 2rem)`	Fluide entre un minimum et un maximum

Tapez une valeur et voyez la taille calculée par le navigateur :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Essayez 20px, 2em, 150%, x-large, smaller et 5vw. Une valeur invalide, comme big, est ignorée et le texte garde sa dernière taille valide.

rem ou em : la différence qui piège

rem regarde toujours l'élément racine, donc 1.2rem a la même taille partout. em regarde le parent, donc les tailles se multiplient quand les éléments sont imbriqués :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

La boîte em la plus intérieure fait 16 × 1,2 × 1,2 × 1,2 = 27,648px. La boîte rem la plus intérieure fait toujours 19,2px. Cette multiplication est utile pour un composant dont les parties doivent grandir ensemble, et une surprise partout ailleurs. La page des unités compare toutes les unités de longueur.

Les mots-clés : de xx-small à xx-large

Les mots-clés absolus correspondent à une échelle fixe autour de medium, qui vaut la taille par défaut de l'utilisateur (16px s'il ne l'a pas modifiée) :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

Avec 16px par défaut, small vaut 13px, large 18px, x-large 24px et xx-large 32px. Les mots-clés conviennent pour aller vite, mais un design system préfère en général sa propre échelle en rem.

Taille de police fluide avec clamp()

Un titre qui doit grandir avec l'écran sans jamais devenir trop petit ni trop grand tient en un appel à clamp() : le minimum, une taille préférée qui varie et le maximum.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

Dans un aperçu de 800px de large, 5vw vaut 40px, ce qui se situe entre 24px et 48px : c'est donc cette valeur qui l'emporte. La page clamp traite la typographie fluide en détail.

Définir une taille de base pour toute la page

Définissez la taille une fois sur body (ou html) et dimensionnez tout le reste par rapport à elle :

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

Évitez les astuces comme html { font-size: 62.5%; }, sauf si toutes les tailles de la page sont ensuite en rem, et ne mettez jamais une taille fixe en px sur html : elle écrase la taille de police choisie par le lecteur dans son navigateur, dont certaines personnes ont besoin pour pouvoir lire.

Accessibilité

Un texte courant de 16px ou plus est un bon minimum pour la lecture sur écran.
Les tailles en rem et em suivent le réglage de police par défaut de l'utilisateur. Les tailles en px suivent le zoom de la page, mais pas ce réglage.
Sur iPhone, Safari zoome sur la page quand vous activez un champ dont la taille de police est inférieure à 16px. Donnez aux champs de formulaire font-size: 1rem ou plus pour l'éviter.

Erreurs courantes

Utiliser la balise . Elle est obsolète. Utilisez la propriété font-size.
Des tailles en em imbriquées qui grossissent ou rétrécissent sans contrôle. Utilisez rem, sauf si vous voulez cette multiplication.
Une taille fixe en px sur html. Elle écrase le réglage de police du lecteur.
Oublier que les titres ont déjà une taille. <h1> vaut 2em par défaut, il faut donc h1 { font-size: 1em; } si vous le voulez à la taille du texte courant.
Des unités de viewport seules. font-size: 3vw devient illisible sur un téléphone et énorme sur un grand écran. Placez-le dans clamp().

Questions fréquentes

Comment changer la taille de police en CSS ?

Définissez la propriété font-size sur l'élément : p { font-size: 18px; }. Elle accepte des longueurs (px, rem, em), des pourcentages et des mots-clés comme large.

Comment changer la taille du texte en HTML ?

Avec du CSS, dans une feuille de style ou dans un attribut style : . L'ancienne balise  est obsolète en HTML5 et ne doit plus être utilisée.

Quelle est la taille de police par défaut des navigateurs ?

16px pour le texte courant, sauf si l'utilisateur l'a modifiée dans les réglages du navigateur. C'est la valeur de 1rem et du mot-clé medium par défaut.

Faut-il utiliser px, em ou rem pour la taille de police ?

Utilisez rem pour la plupart des textes : il suit le réglage de police du navigateur de l'utilisateur et ne se multiplie pas. Utilisez em quand une taille doit suivre son parent, comme une icône dans un bouton. px ne suit pas la taille par défaut choisie par le lecteur dans son navigateur, évitez-le donc pour le texte courant.

Pourquoi ma taille de police en em ne cesse-t-elle de grossir ?

Parce que em est relatif à la taille de police du parent, et les éléments imbriqués se multiplient : 1.2em dans 1.2em donne 1,44 fois la base. Passez à rem, qui est toujours relatif à l'élément racine.

Concepts liés