font-size

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSS font-size définit la taille de la fonte. Modifier la taille de la fonte met également à jour les tailles des unités <length> relatives à la taille de la fonte, telles que em, ex, etc.

Exemple interactif

font-size: 1.2rem;

font-size: x-small;

font-size: smaller;

font-size: 12px;

font-size: 80%;

<section id="default-example">
  <p id="example-element">
    Londres. Le trimestre de la Saint-Michel vient de se terminer, et le Lord
    Chancelier siège dans le Lincoln's Inn Hall. Un temps de novembre
    implacable. Autant de boue dans les rues que si les eaux venaient tout juste
    de se retirer de la surface de la terre, et il ne serait pas étonnant de
    croiser un Mégalosaure, long d'une quarantaine de pieds, se dandinant comme
    un lézard éléphantesque sur Holborn Hill.
  </p>
</section>

Syntaxe

css

/* Valeurs de type <absolute-size> */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

/* Valeurs de type <relative-size> */
font-size: larger;
font-size: smaller;

/* Valeurs de type <length> */
font-size: 12px;
font-size: 0.8em;

/* Valeurs de type <percentage> */
font-size: 80%;

/* Valeurs mathématiques */
font-size: math;

/* Valeurs globales */
font-size: inherit;
font-size: initial;
font-size: revert;
font-size: revert-layer;
font-size: unset;

Valeurs

xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large

Mots-clés de taille absolue, basés sur la taille de fonte par défaut de l'utilisateur·ice (qui vaut medium).

larger, smaller

Mots-clés de taille relative. La fonte sera plus grande ou plus petite par rapport à la taille de fonte de l'élément parent, selon un ratio proche de celui utilisé pour séparer les mots-clés de taille absolue ci-dessus.

<length>

Une valeur positive de type <length>. Pour la plupart des unités relatives à la fonte (telles que em et ex), la taille de la fonte est relative à la taille de fonte de l'élément parent.

Pour les unités relatives à la fonte qui sont basées sur la racine (telles que rem), la taille de la fonte est relative à la taille de la fonte utilisée par l'élément (racine) <html>.

<percentage>

Une valeur positive de type <percentage>, relative à la taille de fonte de l'élément parent.

Note : Pour maximiser l'accessibilité, il est généralement préférable d'utiliser des valeurs relatives à la taille de fonte par défaut de l'utilisateur·ice.

math

Les règles d'échelle ^(angl.) sont appliquées lors de la détermination de la valeur calculée de la propriété font-size pour les éléments mathématiques, relativement à la propriété font-size du parent englobant. Voir la propriété math-depth pour plus d'informations.

Description

Il existe plusieurs méthodes pour définir la taille de la fonte, notamment des mots-clés ou des valeurs numériques en pixels ou en em. Choisissez la méthode appropriée selon les besoins de la page web concernée.

Mots-clés

Les mots-clés sont une bonne façon de déterminer la taille de la fonte sur le web. En définissant une taille de fonte par mot-clé sur l'élément HTML <body>, vous pouvez définir des tailles de fonte relatives partout ailleurs sur la page, ce qui vous permet d'agrandir ou de réduire facilement la fonte sur toute la page en conséquence.

Pixels

Définir la taille de la fonte en pixels (px) est un bon choix lorsque vous avez besoin d'une précision en pixels. Une valeur en px est statique. Il s'agit d'une méthode indépendante du système d'exploitation et des navigateurs pour indiquer littéralement aux navigateurs d'afficher les lettres avec exactement le nombre de pixels de hauteur que vous avez défini. Les résultats peuvent légèrement varier selon les navigateurs, car ils peuvent utiliser des algorithmes différents pour obtenir un effet similaire.

Les réglages de taille de fonte peuvent aussi être utilisés en combinaison. Par exemple, si un élément parent est défini à 16px et que son élément enfant est défini à larger, l'élément enfant s'affichera plus grand que l'élément parent sur la page.

Note : Définir les tailles de fonte en px n'est pas accessible, car l'utilisateur·ice ne peut pas modifier la taille de la fonte dans certains navigateurs. Par exemple, les utilisateur·ice·s malvoyant·e·s peuvent souhaiter définir une taille de fonte bien plus grande que celle choisie par un·e concepteur·ice web. Évitez de les utiliser pour les tailles de fonte si vous souhaitez créer un design inclusif.

Ems

Utiliser une valeur en em crée une taille de fonte dynamique ou calculée (historiquement, l'unité em provient de la largeur d'un « M » majuscule dans une police donnée). La valeur numérique agit comme un multiplicateur de la propriété font-size de l'élément sur lequel elle est utilisée. Considérez cet exemple :

css

p {
  font-size: 2em;
}

Dans ce cas, la taille de la fonte des éléments  sera le double de la valeur calculée de font-size héritée par les éléments . Par extension, une valeur de font-size de 1em équivaut à la valeur calculée de font-size de l'élément sur lequel elle est utilisée.

Si aucune valeur de font-size n'a été définie sur un des ancêtres de , alors 1em sera égal à la valeur par défaut de font-size du navigateur, qui est généralement 16px. Ainsi, par défaut, 1em équivaut à 16px, et 2em à 32px. Si vous définissez par exemple une valeur de font-size de 20px sur l'élément <body>, alors 1em sur les éléments  équivaudra à 20px, et 2em à 40px.

Pour calculer l'équivalent en em pour une valeur en pixels souhaitée, vous pouvez utiliser cette formule :

em = taille visée en px / font-size du parent en pixels

Par exemple, supposons que la propriété font-size du <body> de la page soit définie à 16px. Si la taille de fonte souhaitée est de 12px, vous devrez indiquer 0.75em (car 12/16 = 0.75). De même, si vous souhaitez une taille de fonte de 10px, indiquez 0.625em (10/16 = 0.625) ; pour 22px, indiquez 1.375em (22/16).

L'unité em est très utile en CSS car elle s'adapte automatiquement à la taille de la fonte choisie par le·la lecteur·ice.

Un point important à garder à l'esprit : les valeurs en em se composent. Prenons le HTML et le CSS suivants :

css

html {
  font-size: 100%;
}
span {
  font-size: 1.6em;
}

html

<div>
  <span>Extérieur <span>intérieur</span> extérieur</span>
</div>

Le résultat est :

En supposant que la valeur par défaut de font-size du navigateur soit 16px, les mots « Extérieur » seront affichés à 25.6px, mais le mot « intérieur » sera affiché à 40.96px. Cela s'explique par le fait que la propriété font-size du  interne vaut 1.6em, ce qui est relatif à la valeur de font-size de son parent, elle-même relative à la valeur de font-size de son parent. C'est ce qu'on appelle la composition.

Rems

Les valeurs rem ont été inventées pour contourner le problème de composition. Les valeurs rem sont relatives à l'élément racine html, et non à l'élément parent. Autrement dit, cela vous permet d'indiquer une taille de fonte de façon relative sans être affecté par la taille du parent, éliminant ainsi la composition.

Le CSS ci-dessous est presque identique à l'exemple précédent. La seule différence est que l'unité a été changée en rem.

css

html {
  font-size: 100%;
}
span {
  font-size: 1.6rem;
}

On applique ensuite ce CSS au même HTML, qui ressemble à ceci :

html

<span>Extérieur <span>intérieur</span> extérieur</span>

Dans cet exemple, les mots « outer inner outer » sont tous affichés à 25.6px (en supposant que la valeur de font-size du navigateur soit restée à la valeur par défaut de 16px).

Ex

Comme l'unité em, la propriété font-size d'un élément définie avec l'unité ex est calculée ou dynamique. Elle se comporte exactement de la même manière, sauf que lors de l'utilisation de l'unité ex pour la propriété font-size, la taille de la fonte correspond à la hauteur d'x de la première police disponible ^(angl.) utilisée sur la page. La valeur numérique multiplie la valeur héritée de font-size de l'élément et la taille de la fonte se compose relativement.

Voir le brouillon du W3C pour une description plus détaillée des unités de longueur relatives à la fonte ^(angl.) telles que ex.

Définition formelle

Valeur initiale	`medium`
Applicabilité	all elements and text. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	oui
Pourcentages	se rapporte à la taille de la police de l'élément parent
Valeur calculée	une longueur (type `<length>`) absolue
Type d'animation	by computed value type

Syntaxe formelle

font-size = 
  <absolute-size>            |
  <relative-size>            |
  <length-percentage [0,∞]>  |
  math                       

<absolute-size> = 
  xx-small   |
  x-small    |
  small      |
  medium     |
  large      |
  x-large    |
  xx-large   |
  xxx-large  

<relative-size> = 
  larger   |
  smaller  

<length-percentage> = 
  <length>      |
  <percentage>

Exemples

Définir les tailles de fonte

CSS

css

.small {
  font-size: xx-small;
}
.larger {
  font-size: larger;
}
.point {
  font-size: 24pt;
}
.percent {
  font-size: 200%;
}

HTML

html

<h1 class="small">Petit H1</h1>
<h1 class="larger">H1 plus grand</h1>
<h1 class="point">H1 de 24 points</h1>
<h1 class="percent">H1 à 200%</h1>

Résultat

Spécifications

Specification
CSS Fonts Module Level 4 # font-size-prop

Compatibilité des navigateurs

Voir aussi

La propriété font-size-adjust
La propriété font-style
La propriété font-weight
La propriété math-depth
La propriété math-style
L'attribut SVG font-size
Apprendre : Mise en forme fondamentale du texte et des polices

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 6 févr. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content