Typography

Ouvrir dans ChatGPT

Les tokens de typographie sont utilisés pour maintenir un ensemble cohérent de styles de police dans toute votre application.

Famille de polices

Les propriétés de la famille de polices sont utilisées pour spécifier une liste priorisée de noms de famille de polices.

La pile de polices système est utilisée par défaut :

• Segoe UI sur Windows
• Roboto sur Android et Chrome OS
• San Francisco sur macOS et iOS
• Sur d'autres systèmes, Helvetica, Arial sont utilisés en tant que solutions de secours.

Vous pouvez appliquer ou changer la famille de polices en utilisant la propriété personnalisée --dwc-font-family.

Exemple

:root {
  --dwc-font-family: "Roboto", sans-serif;
}

Variables

Variable	Valeur par défaut	Exemple
--dwc-font-family-sans	-apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'	Sphinx of black quartz, judge my vow.
--dwc-font-family-mono	Menlo, Monaco, 'Courier New', monospace	Sphinx of black quartz, judge my vow.
--dwc-font-family	var(--dwc-font-family-sans)	Sphinx of black quartz, judge my vow.

Taille de police

Les propriétés de taille de police définissent un ensemble de tailles de police à choisir. s est la taille standard, et est utilisée par la plupart des composants par défaut. Toutes les tailles de police sont définies en em.

Unité EM

em est une unité de longueur relative. elle est relative à la taille de police du parent, dans le cas des propriétés typographiques comme la taille de police, et à la taille de police de l'élément lui-même dans le cas d'autres propriétés comme width.

Exemple

.title {
  font-size: var(--dwc-font-size-3xl);
}

Variables

Variable	Valeur par défaut	Exemple
--dwc-font-size-2xs	0.75rem	Aa
--dwc-font-size-xs	0.813rem	Aa
--dwc-font-size-s	0.875rem	Aa
--dwc-font-size-m	1rem	Aa
--dwc-font-size-l	1.125rem	Aa
--dwc-font-size-xl	1.375rem	Aa
--dwc-font-size-2xl	1.75rem	Aa
--dwc-font-size-3xl	2.25rem	Aa
--dwc-font-size	var(--dwc-font-size-s)	Aa

Épaisseur de police

La propriété CSS font-weight définit le poids (ou la graisse) de la police.

Exemple

p {
  font-weight: var(--dwc-font-weight-semibold);
}

Variable	Valeur par défaut	Exemple
--dwc-font-weight-lighter	200	Aa
--dwc-font-weight-light	300	Aa
--dwc-font-weight-normal	400	Aa
--dwc-font-weight-semibold	500	Aa
--dwc-font-weight-bold	700	Aa
--dwc-font-weight-bolder	800	Aa

Hauteur de ligne

La propriété CSS de hauteur de ligne définit la hauteur d'une boîte de ligne. Elle est couramment utilisée pour définir la distance entre les lignes de texte.

Exemple

p {
  line-height: var(--dwc-font-line-height-m);
}

Variables

Variable	Valeur par défaut	Exemple
--dwc-font-line-height-2xs	0.95	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.
--dwc-font-line-height-xs	1.1	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.
--dwc-font-line-height-s	1.25	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.
--dwc-font-line-height-m	1.375	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.
--dwc-font-line-height-l	1.5	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.
--dwc-font-line-height-xl	1.75	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.
--dwc-font-line-height-2xl	2	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.
--dwc-font-line-height	var(--dwc-font-line-height-m)	Sphinx of black quartz, judge my vow. Sphinx of black quartz, judge my vow.