Typography

Openen in ChatGPT

Typografie-tokens worden gebruikt om een consistente set van letterstijl door je app te handhaven.

Lettertypefamilie

De lettertypefamilie-eigenschappen worden gebruikt om een geprioriteerde lijst van lettertype-namen 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 fallback gebruikt.

Je kunt de lettertypefamilie toepassen of wijzigen met 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 van zwarte kwarts, oordeel over mijn belofte.
--dwc-font-family-mono	Menlo, Monaco, 'Courier New', monospace	Sphinx van zwarte kwarts, oordeel over mijn belofte.
--dwc-font-family	var(--dwc-font-family-sans)	Sphinx van zwarte kwarts, oordeel over mijn belofte.

Lettergrootte

De lettergrootte-eigenschappen definieëren een set van 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 lettergewicht 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 regelhoogte CSS-eigenschap stelt de hoogte van een regelbox in. Het wordt vaak gebruikt om de afstand tussen tekstregels 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 van zwarte kwarts, oordeel over mijn belofte. Sphinx van zwarte kwarts, oordeel over mijn belofte.
--dwc-font-line-height-xs	1.1	Sphinx van zwarte kwarts, oordeel over mijn belofte. Sphinx van zwarte kwarts, oordeel over mijn belofte.
--dwc-font-line-height-s	1.25	Sphinx van zwarte kwarts, oordeel over mijn belofte. Sphinx van zwarte kwarts, oordeel over mijn belofte.
--dwc-font-line-height-m	1.375	Sphinx van zwarte kwarts, oordeel over mijn belofte. Sphinx van zwarte kwarts, oordeel over mijn belofte.
--dwc-font-line-height-l	1.5	Sphinx van zwarte kwarts, oordeel over mijn belofte. Sphinx van zwarte kwarts, oordeel over mijn belofte.
--dwc-font-line-height-xl	1.75	Sphinx van zwarte kwarts, oordeel over mijn belofte. Sphinx van zwarte kwarts, oordeel over mijn belofte.
--dwc-font-line-height-2xl	2	Sphinx van zwarte kwarts, oordeel over mijn belofte. Sphinx van zwarte kwarts, oordeel over mijn belofte.
--dwc-font-line-height	var(--dwc-font-line-height-m)	Sphinx van zwarte kwarts, oordeel over mijn belofte. Sphinx van zwarte kwarts, oordeel over mijn belofte.