Typography

Typography tokens are used to maintain a consistent set of font styles throughout your app.

Font family

The font family properties are used to specify a prioritized list of font family names.

The system font stack is used by default:

• Segoe UI on Windows
• Roboto on Android and Chrome OS
• San Francisco on macOS and iOS
• On other systems, Helvetica, Arial are used as fallbacks.

You can apply or change the font family using the --dwc-font-family custom property.

Example

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

Variables

Variable	Default Value	Example
--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.

Font size

The font size properties define a set of font sizes to choose from. s is the standard size, and is used by most components by default. All font sizes are defined in em.

EM Unit

em is a relative length unit. it's relative to font size of the parent, in the case of typographical properties like font-size, and font size of the element itself and in the case of other properties like width.

Example

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

Variables

Variable	Default Value	Example
--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

Font weight

The font-weight CSS property sets the weight (or boldness) of the font.

Example

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

Variable	Default Value	Example
--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

Line height

The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text.

Example

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

Variables

Variable	Default Value	Example
--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.