Utilitaires CSS pour contrôler la famille de police, la graisse et la taille du texte.
Les classes de graisse et de taille sont disponibles en version de base et en version responsive
suffixée par le nom du breakpoint, générées via @each
sur la map $breakpoints.
…
…
…
…
…
…
…
…
…
…
| CLASSE | PROPRIÉTÉ APPLIQUÉE | DESCRIPTION |
|---|---|---|
.font-primary |
font-family: var(--font-family-primary), sans-serif |
Applique la police primaire du projet. |
.font-secondary |
font-family: var(--font-family-secondary), sans-serif |
Applique la police secondaire du projet. |
.font-tertiary |
font-family: var(--font-family-tertiary), sans-serif |
Applique la police tertiaire du projet. |
| CLASSE | VALEUR |
|---|---|
.fw-100 |
font-weight: 100 |
.fw-200 |
font-weight: 200 |
.fw-300 |
font-weight: 300 |
.fw-400 |
font-weight: 400 |
.fw-500 |
font-weight: 500 |
.fw-600 |
font-weight: 600 |
.fw-700 |
font-weight: 700 |
.fw-800 |
font-weight: 800 |
.fw-900 |
font-weight: 900 |
.fw-inherit |
font-weight: inherit |
.fw-initial |
font-weight: initial |
| CLASSE | TOKEN |
|---|---|
.fs-h1 |
font-size: var(--font-size-h1) |
.fs-h2 |
font-size: var(--font-size-h2) |
.fs-h3 |
font-size: var(--font-size-h3) |
.fs-h4 |
font-size: var(--font-size-h4) |
.fs-h5 |
font-size: var(--font-size-h5) |
.fs-h6 |
font-size: var(--font-size-h6) |
| CLASSE | TOKEN | ALIAS |
|---|---|---|
.fs-1 |
font-size: var(--font-size-xs) |
xs |
.fs-2 |
font-size: var(--font-size-sm) |
sm |
.fs-3 |
font-size: var(--font-size-md) |
md |
.fs-4 |
font-size: var(--font-size-lg) |
lg |
.fs-5 |
font-size: var(--font-size-xl) |
xl |
.fs-6 |
font-size: var(--font-size-xxl) |
xxl |
.fs-inherit |
font-size: inherit |
— |
.fs-initial |
font-size: initial |
— |
Toutes les classes .fw-* et .fs-*
sont déclinées en version responsive via @each $bp, $size in $breakpoints.
Le suffixe correspond au nom du breakpoint. Les media queries utilisent min-width.
…
…
| PATTERN | MEDIA QUERY | CLASSES GÉNÉRÉES |
|---|---|---|
.fw-{100…900}-{bp} |
min-width: {value} |
Une classe par graisse × par breakpoint. |
.fw-inherit-{bp} |
min-width: {value} |
Une classe par breakpoint. |
.fw-initial-{bp} |
min-width: {value} |
Une classe par breakpoint. |
.fs-h1-{bp} … .fs-h6-{bp} |
min-width: {value} |
Une classe par niveau de titre × par breakpoint. |
.fs-1-{bp} … .fs-6-{bp} |
min-width: {value} |
Une classe par taille corps × par breakpoint. |
.fs-inherit-{bp} |
min-width: {value} |
Une classe par breakpoint. |
.fs-initial-{bp} |
min-width: {value} |
Une classe par breakpoint. |
| TOKEN | UTILISÉ PAR |
|---|---|
--font-family-primary |
.font-primary |
--font-family-secondary |
.font-secondary |
--font-family-tertiary |
.font-tertiary |
| TOKEN | UTILISÉ PAR |
|---|---|
--font-size-h1 |
.fs-h1, .fs-h1-{bp} |
--font-size-h2 |
.fs-h2, .fs-h2-{bp} |
--font-size-h3 |
.fs-h3, .fs-h3-{bp} |
--font-size-h4 |
.fs-h4, .fs-h4-{bp} |
--font-size-h5 |
.fs-h5, .fs-h5-{bp} |
--font-size-h6 |
.fs-h6, .fs-h6-{bp} |
--font-size-xs |
.fs-1, .fs-1-{bp} |
--font-size-sm |
.fs-2, .fs-2-{bp} |
--font-size-md |
.fs-3, .fs-3-{bp} |
--font-size-lg |
.fs-4, .fs-4-{bp} |
--font-size-xl |
.fs-5, .fs-5-{bp} |
--font-size-xxl |
.fs-6, .fs-6-{bp} |
Combiner une classe de base et une classe responsive pour adapter la taille ou la graisse selon le
contexte. Exemple : .fs-2 .fs-4-md applique une taille
sm sur mobile et lg
à partir du breakpoint md.
Utiliser les classes .fs-h1 à
.fs-h6 pour appliquer une taille de titre
sur un élément sémantiquement différent, sans modifier la hiérarchie HTML.
Exemple : un <p class="fs-h3"> visuellement
équivalent à un <h3>.
Les classes .fw-* n'ont d'effet visible que si la police
chargée supporte la graisse demandée. Une police sans variante 100 ou 900 affichera la graisse la plus
proche disponible.
Les classes responsive utilisent des media queries min-width
(approche mobile-first). Elles s'activent à partir du breakpoint indiqué et restent actives
sur toutes les tailles supérieures — elles ne se limitent pas à ce breakpoint seul.
Typography · WEBDEV-UI DOCS / V1