Typography

In ChatGPT öffnen

Typografie-Token werden verwendet, um eine konsistente Reihe von Schriftstilen in Ihrer App beizubehalten.

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 mithilfe 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 Reihe von Schriftgrößen zur Auswahl. s ist die Standardgröße und wird von den meisten Komponenten standardmäßig verwendet. Alle Schriftgrößen sind in em definiert.

EM-Einheit

em ist eine relative Längeneinheit. Sie bezieht sich auf die Schriftgröße des übergeordneten Elements im Fall typografischer Eigenschaften wie font-size und die Schriftgröße des Elements selbst im Fall anderer Eigenschaften wie width.

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 line-height legt die Höhe eines Zeilenbox 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	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.