Typografie

In ChatGPT öffnen

Typografietokens werden verwendet, um einen konsistenten Satz von Schriftstilen in Ihrer Anwendung beizubehalten.

Schriftfamilie

Die Eigenschaften der Schriftfamilie werden verwendet, um eine priorisierte Liste von Schriftfamilien zu spezifizieren.

Der Standardsystemschriftstapel wird standardmäßig über system-ui verwendet, der automatisch zur nativen Schriftart der Plattform aufgelöst wird:

• San Francisco auf macOS und iOS
• Segoe UI auf Windows
• Roboto auf Android und Chrome OS

Sie können die Schriftfamilie anwenden oder ändern, indem Sie die benutzerdefinierte Eigenschaft --dwc-font-family verwenden.

Beispiel

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

Variablen

Variable	Standardwert
--dwc-font-family-sans	system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
--dwc-font-family-mono	ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace
--dwc-font-family	var(--dwc-font-family-sans)

Schriftgröße

Die Eigenschaften der Schriftgröße definieren eine Reihe von Schriftgrößen, aus denen gewählt werden kann. m ist die Standardgröße und wird von den meisten Komponenten standardmäßig verwendet. Alle Schriftgrößen sind in rem definiert.

REM-Einheit

rem ist eine relative Längeneinheit. Sie ist relativ zur Schriftgröße des root-Elements (<html>), die in den meisten Browsern standardmäßig 16px beträgt.

Beispiel

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

Variablen

Variable	Standardwert	Berechnet (bei 16px root)
--dwc-font-size-3xs	0.625rem	10px
--dwc-font-size-2xs	0.6875rem	11px
--dwc-font-size-xs	0.75rem	12px
--dwc-font-size-s	0.8125rem	13px
--dwc-font-size-m	0.875rem	14px
--dwc-font-size-l	1rem	16px
--dwc-font-size-xl	1.25rem	20px
--dwc-font-size-2xl	1.625rem	26px
--dwc-font-size-3xl	2.125rem	34px
--dwc-font-size	var(--dwc-font-size-m)	14px

Schriftstärke

Die CSS-Eigenschaft font-weight legt die Stärke (oder Fettheit) der Schrift fest.

Beispiel

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

Variable	Standardwert
--dwc-font-weight-thin	100
--dwc-font-weight-lighter	200
--dwc-font-weight-light	300
--dwc-font-weight-normal	400
--dwc-font-weight-medium	500
--dwc-font-weight-semibold	600
--dwc-font-weight-bold	700
--dwc-font-weight-bolder	800
--dwc-font-weight-black	900
--dwc-font-weight	var(--dwc-font-weight-normal)

Zeilenhöhe

Die CSS-Eigenschaft line-height legt die Höhe eines Zeilenbereichs fest. Sie wird häufig verwendet, um den Abstand zwischen Zeilen von Text festzulegen.

Beispiel

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

Variablen

Variable	Standardwert
--dwc-font-line-height-3xs	1
--dwc-font-line-height-2xs	1.1
--dwc-font-line-height-xs	1.25
--dwc-font-line-height-s	1.375
--dwc-font-line-height-m	1.5
--dwc-font-line-height-l	1.625
--dwc-font-line-height-xl	1.75
--dwc-font-line-height-2xl	1.875
--dwc-font-line-height-3xl	2
--dwc-font-line-height	var(--dwc-font-line-height-xs)