Propriété CSS font-size

La propriété CSS font-size définit la taille du texte. C'est l'une des propriétés typographiques les plus utilisées, et comme les unités em, ex et % sont calculées par rapport à elle, la valeur choisie influence également la taille des autres éléments qui en dépendent.

Cette page couvre toutes les façons de spécifier une taille de police — mots-clés, longueurs et pourcentages — explique comment les unités relatives (em, rem, ex, vw/vh) sont calculées, et indique quelle approche utiliser selon les cas.

Façons de définir la taille de police

Vous pouvez définir font-size de quatre grandes façons :

absolute-size — un mot-clé fixe issu d'une échelle prédéfinie par le navigateur.
relative-size — un mot-clé qui ajuste la taille héritée vers le haut ou vers le bas.
length — un nombre explicite accompagné d'une unité.
percentage — une valeur relative à la taille de police de l'élément parent.

Les mots-clés absolute-size correspondent à une échelle fixe définie par le navigateur :

xx-small
x-small
small
medium (valeur initiale)
large
x-large
xx-large

Les mots-clés relative-size ajustent la taille vers le haut ou vers le bas par rapport à la valeur héritée :

smaller
larger

Les longueurs peuvent être relatives (em, ex, rem, ch, vw, vh, px) ou absolues (in, cm, mm, pt, pc). Un pourcentage définit la taille de police par rapport à celle de l'élément parent — 150% représente une fois et demie la taille du parent.

Laquelle utiliser ?

Privilégiez rem pour la plupart des textes. Cette unité s'adapte au réglage de taille de police du navigateur de l'utilisateur (bénéfique pour l'accessibilité) tout en restant prévisible, car elle est toujours relative à l'élément racine plutôt qu'au parent.
Utilisez em lorsque vous souhaitez que l'espacement d'un composant ou le texte enfant s'adapte proportionnellement à la taille de police du composant lui-même.
Évitez les valeurs en pixels (px) pour le texte courant si l'accessibilité est importante : les pixels fixes ignorent la taille par défaut préférée du lecteur.

Valeur initiale	medium
S'applique à	Tous les éléments. S'applique également à ::first-letter et ::first-line.
Hérité	Oui.
Animable	Oui.
Version	CSS1
Syntaxe DOM	object.style.fontSize = "15px";

Syntaxe

Syntaxe de la propriété CSS font-size

font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit;

Exemple de la propriété font-size :

Exemple de la propriété CSS font-size avec les valeurs px, em, pt, x-small et % (pourcentage)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        font-size: 24pt;
      }
      h3 {
        font-size: 26px;
      }
      p {
        font-size: 1em;
      }
      a {
        font-size: 100%;
      }
      span {
        font-size: x-small;
      }
    </style>
  </head>
  <body>
    <span>This span is written with x-small value.</span>
    <p>This paragraph is written with 1em font-size.</p>
    <a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
    <h3>We used x-small font size for this heading.</h3>
    <h1>We set the font size 24pt  for this heading.</h1>
  </body>
</html>

Essayez vous-même »

Résultat

Utilisation des valeurs en pourcentage

Les valeurs en pourcentage sont relatives à la font-size de l'élément parent. Dans l'exemple ci-dessous, le titre est défini à 125%, ce qui le rend une fois et quart plus grand que la taille de police héritée du corps :

Exemple de la propriété font-size spécifiée en pourcentage :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h3 {
        font-size: 125%;
      }
    </style>
  </head>
  <body>
    <h3>This heading is 125% of the body font size.</h3>
    <span>This span uses the default (inherited) size.</span>
    <p>This paragraph uses the default (inherited) size.</p>
  </body>
</html>

Utilisation de l'unité em

L'unité em est considérée comme une unité relative. Elle est basée sur la valeur calculée de la taille de police de l'élément parent. Dans le code ci-dessous, le paragraphe aura une taille de 32px, car 2×16=32, et le titre aura une font-size de 48px car 3×16=48px. Cette méthode est très utile car tous les éléments enfants seront toujours relatifs les uns aux autres.

Exemple de la propriété font-size avec la valeur "em" :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        font-size: 16px;
      }
      p {
        font-size: 2em;
      }
      h2 {
        font-size: 3em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Here is the heading</h2>
      <p>Here is the text.</p>
    </div>
  </body>
</html>

Essayez vous-même »

Utilisation de l'unité rem

Avec l'unité rem, la font-size est toujours relative à l'élément racine <html>, quelle que soit la profondeur d'imbrication de l'élément. Dans l'exemple ci-dessous, la racine est à 16px, donc le titre à 1.5rem = 1,5 × 16 = 24px. Comme chaque valeur rem pointe vers la même valeur racine, vous évitez le problème de multiplication des tailles que les unités em peuvent provoquer dans les éléments imbriqués.

Exemple de la propriété font-size avec la valeur "rem" :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        font-size: 16px;
      }
      h2 {
        font-size: 1.5rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Here is the heading</h2>
      <p>Here is the text.</p>
    </div>
  </body>
</html>

Essayez vous-même »

Utilisation de l'unité ex

Avec l'unité ex, 1ex est égal à la hauteur de x — la hauteur de la lettre minuscule "x" — dans la police courante de l'élément. Comme la hauteur de x varie d'une police à l'autre, une taille basée sur ex dépend de la police utilisée, ce qui la rend moins prévisible que em ou rem. Dans l'exemple ci-dessous, le texte est dimensionné à 15 fois la hauteur de x.

Propriété CSS font-size

.exunit {
  font-size: 15ex;
}

Utilisation des unités de viewport

Les unités de viewport (vw et vh) sont utilisées pour définir la font-size d'un élément relativement à la taille du viewport.

1vw = 1% de la largeur du viewport
1vh = 1% de la hauteur du viewport

Propriété CSS font-size

.viewport {
  font-size: 120vh;
}

Exemple de la propriété font-size avec la valeur "length" :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        color: green;
        font-size: 2vh;
      }
      p {
        color: red;
        font-size: 1em;
      }
      .length {
        color: orange;
        font-size: 30px;
      }
      h3 {
        color: lightblue;
        font-size: 3ex;
      }
      h1 {
        color: purple;
        font-size: 24pt;
      }
      a {
        color: blue;
        font-size: 120%;
      }
    </style>
  </head>
  <body>
    <h2>Font-size property</h2>
    <span>This text is written with 2vh font-size.</span>
    <p>This paragraph is written with 1em font-size.</p>
    <div class="length">Example with 30px font-size length </div>
    <h3>Example with 3ex font-size length.</h3>
    <h1>We set the font size 24pt  for this heading.</h1>
    <a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété font-size avec les valeurs absolute-size :

Exemple de la propriété font-size (absolute-size) :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .font-xxsmall {
        color: grey;
        font-size: xx-small;
      }
      .font-xsmall {
        color: grey;
        font-size: x-small;
      }
      .font-small {
        color: grey;
        font-size: small;
      }
      .font-medium {
        color: grey;
        font-size: medium;
      }
      .font-large {
        color: grey;
        font-size: large;
      }
      .font-xlarge {
        color: grey;
        font-size: x-large;
      }
      .font-xxlarge {
        color: grey;
        font-size: xx-large;
      }
    </style>
  </head>
  <body>
    <h1>Font-size property</h1>
    <div class="font-xxsmall">Example with font-size xx-small property</div>
    <div class="font-xsmall">Example with font-size x-small property</div>
    <div class="font-small">Example with font-size small property</div>
    <div class="font-medium">Example with font-size medium property</div>
    <div class="font-large">Example with font-size large property</div>
    <div class="font-xlarge">Example with font-size x-large property</div>
    <div class="font-xxlarge">Example with font-size xx-large property</div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété font-size avec les valeurs "smaller" et "larger" :

Exemple de la propriété font-size avec les valeurs "smaller" et "larger" :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .smaller {
        color: red;
        font-size: smaller;
      }
      .larger {
        color: red;
        font-size: larger;
      }
    </style>
  </head>
  <body>
    <h1>font-size property</h1>
    <div class="smaller">Example with font-size smaller property</div>
    <div class="larger">Example with font-size larger property</div>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description	Essayer
medium	Définit la font-size à medium. C'est la valeur par défaut de cette propriété.	Essayer »
xx-small	Définit la font-size à xx-small.	Essayer »
x-small	Définit la font-size à x-small.	Essayer »
small	Définit la font-size à small.	Essayer »
large	Définit la font-size à large.	Essayer »
x-large	Définit la font-size à x-large.	Essayer »
xx-large	Définit la font-size à xx-large.	Essayer »
smaller	Rend la font-size plus petite.	Essayer »
larger	Rend la font-size plus grande.	Essayer »
length	Spécifie la font-size en px, em, etc.	Essayer »
%	Définit la font-size en pourcentage de la taille de police de l'élément parent.	Essayer »
initial	Applique la valeur par défaut de la propriété.	Essayer »
inherit	Hérite de la propriété depuis l'élément parent.

Propriétés associées

Pour contrôler le reste de la typographie d'un élément, combinez font-size avec ces propriétés :

font-family — choisir la police de caractères.
font-weight — définir la graisse du texte.
font-style — appliquer un style italique ou oblique.
line-height — contrôler l'espacement vertical entre les lignes.
font — le raccourci qui définit plusieurs de ces propriétés à la fois.

Pratique

Quelles unités peuvent être utilisées pour définir la propriété 'font-size' en CSS ?