Typography

ChatGPT öffnen

Typografie-Tokens werden verwendet, um ein konsistentes Set an Schriftstilen in Ihrer App aufrechtzuerhalten.

Schriftfamilie

Die Eigenschaften der Schriftfamilie werden verwendet, um eine priorisierte Liste von Schriftfamiliennamen anzugeben.

Der Systemschriftstapel wird standardmäßig verwendet:

• Segoe UI unter Windows
• Roboto unter Android und Chrome OS
• San Francisco unter macOS und iOS
• Auf anderen Systemen werden Helvetica, Arial als Fallbacks verwendet.

Sie können die Schriftfamilie mit der benutzerdefinierten Eigenschaft --dwc-font-family anwenden oder ändern.

Beispiel

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

Variablen

Variable	Standardwert	Beispiel
--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.

Schriftgröße

Die Eigenschaften der Schriftgröße definieren eine Auswahl von Schriftgrößen. s ist die Standardgröße und wird von den meisten Komponenten standardmäßig verwendet. Alle Schriftgrößen werden in em definiert.

EM-Einheit

em ist eine relative Längeneinheit. Sie ist relativ zur Schriftgröße des übergeordneten Elements im Falle typografischer Eigenschaften wie Schriftgröße und zur Schriftgröße des Elements selbst im Falle anderer Eigenschaften wie Breite.

Beispiel

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

Variablen

Variable	Standardwert	Beispiel
--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

Schriftgewicht

Die CSS-Eigenschaft font-weight legt das Gewicht (oder die Fettigkeit) der Schrift fest.

Beispiel

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

Variable	Standardwert	Beispiel
--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

Zeilenhöhe

Die CSS-Eigenschaft für die Zeilenhöhe legt die Höhe eines Zeilenblocks fest. Sie wird häufig verwendet, um den Abstand zwischen Textzeilen einzustellen.

Beispiel

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

Variablen

Variable	Standardwert	Beispiel
--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.