Sizes

Toutes les tailles (espaces, textes et composants) sont gérées à partir des tailles des fonts définies dans typography.css. Pour profiter de ce système, l'unité de référence devra être em.

La font-size :root est laissée à l’appréciation de l'internaute en laissant une valeur de 100% sur l'élément html.

Les modificateurs de tailles .xsmall, .small, .medium, .large, .xlarge ne modifient que la valeur de font-size et permettent d'agrandir ou de réduire des composants
Les modificateurs de tailles .h6 -> .h1 modifient font-size et line-height de manière à reproduire fidèlement les headers équivalemment.

Échelle modulaire (modular scale)

Les tailles utilisent un ratio constant de 1.1667 modifiable (var(--fs-ratio)). Ce qui permet de réduire ou agrandir la taille des composants vers la taille supérieure ou inférieure.

h1, .h1
Taille d'un h1

h2, .h2
Taille d'un h2

h3, .h3
Taille d'un h3

h4, .h4
Taille d'un h4

h5, .h5, .xlarge
Taille d'un h5, ou d'un élément xlarge

h6, .h6, .large
Taille d'un h6 ou d'un élément large

p, .p, .medium
Taille d'un p ou d'un élément medium

.xsmall
Taille d'un élément x-small

Exemple

Adaptation de la taille d'un titre sans modifier sa sémantique

Exemple d'un bouton modifié avec les class .small et .xlarge