CSS : font-size - Web Formation

Description

La propriété font-size permet de définir la taille du texte d’un élément HTML.

Elle influence la lisibilité, la hiérarchie visuelle et l’accessibilité du contenu. La taille peut être fixe, relative, flexible, ou dépendre de la configuration du navigateur.

La valeur par défaut est généralement 16px dans les navigateurs modernes.

Propriétés détaillées

font-size : définit la taille du texte pour l’élément et, par héritage, pour ses enfants.
line-height : ajuste l’interligne et influence la lisibilité.

Valeurs possible

Voici les valeurs les plus courantes utilisables avec font-size :

Type	Exemple	Description
Pixels (fixe)	`16px`, `24px`	Taille fixe, simple à utiliser mais moins flexible.
Em (relative au parent)	`1.2em`	1em = taille courante. Dépend de l’élément parent.
Rem (relative à la racine)	`1.5rem`	1rem = taille définie sur `html`. Recommandé pour le responsive.
Pourcentage	`120%`	Équivalent à la taille relative (comme em).
Viewport (responsive)	`3vw`	Taille relative à la largeur de la fenêtre.
Mots-clés	`small`, `medium`, `large`	Peu précis : rarement utilisé en production.

Exemple

<p>Ceci texte est en exemple de font-size</p>

<p>Ceci texte est en exemple de font-size</p>

.font-grand  {
    font-size: 24px;
    background-color: #f0f0f0;
    padding: 10px;
}

.font-grand  {    font-size: 24px;    background-color: #f0f0f0;    padding: 10px;}

Aperçu du résultat

Ceci texte est en exemple de font-size.

Remarques

Les unités relatives (rem, em) sont recommandées pour une meilleure accessibilité.
rem est plus prévisible que em car elle ne dépend pas du parent.
L’utilisation d’unités liées au viewport (vw, vh) peut créer des titres très flexibles (mais doit être testée sur mobile).