font-size

La propriété font-size spécifie la taille, ou hauteur, de la police. font-size affecte non seulement la police à laquelle elle est appliquée, mais est également utilisée pour calculer la valeur des unités de longueur em, rem et ex.

p { font-size: 20px;}

font-size peut accepter des mots-clés, des unités de longueur ou des pourcentages comme valeurs. Il est toutefois important de noter que lorsqu’elle est déclarée comme faisant partie de la propriété sténographique fontfont-size est une valeur obligatoire. Si elle n’est pas incluse dans le raccourci, la ligne entière est ignorée.

Les valeurs de longueur (par exemple px, em, rem, ex, etc) qui sont appliquées à font-size ne peuvent pas être négatives.

Mots-clés et valeurs absolus

.element { font-size: small;}

Il accepte les valeurs de mots-clés absolus suivantes :

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Ces valeurs absolues sont mises en correspondance avec des tailles de police spécifiques calculées par le navigateur. Mais vous pouvez également utiliser deux valeurs de mots-clés qui sont relatives à la taille de police de l’élément parent.

Les autres valeurs absolues comprennent mm (millimètres), cm (centimètres), in (pouces), pt (points) et pc (picas). Un point est égal à 1/72 de pouce tandis qu’un pica est égal à 12 points – ces valeurs sont généralement utilisées pour les documents imprimés.

Mots clés relatifs

.element { font-size: larger;}

• larger
• smaller

Par exemple, si l’élément parent a une taille de police de small, un élément enfant avec une taille relative définie de larger rendra la taille de police égale à medium pour l’élément enfant.

Valeurs en pourcentage

.element { font-size: 110%;}

Les valeurs en pourcentage, comme la définition d’une taille de police de 110 %, sont également relatives à la taille de police de l’élément parent, comme le montre la démo ci-dessous :

See the Pen qdbELL by CSS-Tricks (@css-tricks) on CodePen.

L’unité em

.element { font-size: 2em;}

L’unité em est une unité relative basée sur la valeur calculée de la taille de police de l’élément parent. Cela signifie que les éléments enfants dépendent toujours de leur parent pour définir leur taille de police. Par exemple :

<div class="container"> <h2>This is a heading</h2> <p>This is some text.</p></div>

.container { font-size: 16px;}p { font-size: 1em;}h2 { font-size: 2em;}

Dans l’exemple ci-dessus, le paragraphe aura une taille de police de 16px car 1 x 16 = 16px alors que le titre sera de 32px car 2 x 16 = 32px. Il y a de nombreux avantages à mettre à l’échelle les caractères en fonction de la taille de police de l’élément parent, à savoir que nous pouvons envelopper des éléments dans un conteneur et savoir que tous les enfants seront toujours relatifs les uns aux autres :

See the Pen Figuring out how the em unit works par CSS-Tricks (@css-tricks) sur CodePen.

L’unité rem

Dans le cas des unités rem, cependant, la taille de la police dépend de la valeur de l’élément racine (ou de l’élément html).

html { font-size: 16px;}p { font-size: 1.5rem;}

Dans l’exemple ci-dessus, l’unité rem est égale à 16px (car elle est héritée de l’élément html/root) et donc la taille de la police pour tous les éléments du paragraphe sera calculée à 24px (1,5 x 16 = 24). Contrairement aux unités em, le paragraphe ignorera le style de tous ses parents en dehors de la racine.

Cette unité est prise en charge par les navigateurs suivants :

..

..

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Travaux	Travaux	Travaux	10+	Travaux	Travaux

L’unité ex

.element { font-size: 20ex;}

Pour les unités ex, 1ex serait égal à la hauteur calculée de la lettre minuscule x de l’élément racine. Ainsi, dans l’exemple ci-dessous, l’élément html est défini sur 20px et toutes les autres tailles de police sont déterminées par la hauteur x de cette police particulière.

Voir le stylo Figuring out how the ex unit works par CSS-Tricks (@css-tricks) sur CodePen.

Expérimentez la démo ci-dessus mon en remplaçant le font-family sur l’élément html pour voir comment les autres tailles de police changent.

Unités de visualisation

.element-one { font-size: 100vh;}.element-two { font-size: 100vw;}

Les unités de visualisation, telles que vw et vh, définissent la taille de police d’un élément par rapport aux dimensions de la visualisation :

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

Si nous prenons l’exemple suivant :

.element { font-size: 100vh;}

Alors cela indiquera que la taille de la police de l’élément doit toujours être de 100% de la hauteur du viewport à tout moment (50vh serait 50%, 15vh serait 15% et ainsi de suite). Dans la démo ci-dessous, essayez de redimensionner la hauteur de l’exemple pour voir le type s’étirer:

Voir le type Pen Sizing with vh units par CSS-Tricks (@css-tricks) sur CodePen.

vw Les unités sont différentes en ce qu’elles définissent la hauteur des lettres par la largeur du viewport, donc dans la démo ci-dessous, vous devrez redimensionner la fenêtre du navigateur horizontalement pour voir ces changements :

Voir le type Pen Sizing avec les unités vw par CSS-Tricks (@css-tricks) sur CodePen.

Ces unités sont prises en charge par les navigateurs suivants :

.

Chrome	Safari	Firefox	Opera	IE	Android	iOS
31+	7+	31+	27+	9+	4.4+	7,1+

Il est important de noter qu’il existe deux autres unités de viewport : vmin et vmax. La première trouvera les valeurs de vh et vw et définira la taille de la police comme la plus petite des deux tandis que vmax définit la taille de la police comme la plus grande de ces deux valeurs.

L’unité ch

.element { font-size: 24ch;}

L’unité ch est similaire à l’unité ex en ce qu’elle définira la taille de la police d’un élément par rapport à la largeur du glyphe 0 (zéro) de la police :

Voir le type Pen Sizing with ch units par CSS-Tricks (@css-tricks) sur CodePen.

Cette unité est prise en charge par :

Chrome	Safari	Firefox	Opera	IE	Android	iOS
27+	Travaux	10+	Travaux	9+	Travaux	Travaux

Propriétés connexes

• font
• font-…family
• font-stretch
• font-style
• font-variant
• font-weight

.