Typography

Open in ChatGPT

Typografie tokens worden gebruikt om een consistente set letterstijlen in uw app te behouden.

Lettertypefamilie

De eigenschappen van lettertypefamilie worden gebruikt om een geprioriteerde lijst van lettertypefamilienamen op te geven.

Standaard wordt de systeemlettertype-stapel gebruikt:

• Segoe UI op Windows
• Roboto op Android en Chrome OS
• San Francisco op macOS en iOS
• Op andere systemen worden Helvetica, Arial als reserveletters gebruikt.

U kunt de lettertypefamilie toepassen of wijzigen met behulp van de aangepaste eigenschap --dwc-font-family.

Voorbeeld

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

Variabelen

Variabele	Standaardwaarde	Voorbeeld
--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.

Lettergrootte

De eigenschappen voor lettergrootte definiëren een set lettergroottes om uit te kiezen. s is de standaardgrootte en wordt standaard door de meeste componenten gebruikt. Alle lettergroottes zijn gedefinieerd in em.

EM Eenheid

em is een relatieve lengte-eenheid. Het is relatief aan de lettergrootte van de ouder, in het geval van typografische eigenschappen zoals lettergrootte, en de lettergrootte van het element zelf en in het geval van andere eigenschappen zoals breedte.

Voorbeeld

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

Variabelen

Variabele	Standaardwaarde	Voorbeeld
--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

Lettergewicht

De font-weight CSS-eigenschap stelt het gewicht (of de vetheid) van het lettertype in.

Voorbeeld

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

Variabele	Standaardwaarde	Voorbeeld
--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

Regelhoogte

De CSS-eigenschap regelhoogte stelt de hoogte van een regelbox in. Het wordt doorgaans gebruikt om de afstand tussen regels tekst in te stellen.

Voorbeeld

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

Variabelen

Variabele	Standaardwaarde	Voorbeeld
--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.