Typography

All type settings are located in the base/typography.css file. This includes all css selectors and variable declarations associated with typography.

Family

The primary font uses pre-installed system fonts that can be found on a wide range of devices. The font is wrapped in the --font-primary variable is applied to all headings the body.

:root {
    --font-primary: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
}

Scale

The type scale works of the --text-base size, then uses a scale ratio to provide sizing from xs to xxxl. You can easily customize this ratio at certain break points or on certain components to consistenly scale text.

:root {
    --text-base: 11pt;

    --text-scale-ratio: 1.2;
    --text-xs: calc((var(--text-base) / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-s: calc(var(--text-xs) * var(--text-scale-ratio));
    --text-m: calc(var(--text-s) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-l: calc(var(--text-m) * var(--text-scale-ratio));
    --text-xl: calc(var(--text-l) * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));

    --text-h1: 3rem;
    --text-h2: 2em;
    --text-h3: 1.8em;
    --text-h4: 1.3em;
    --text-h5: 1.2em;
    --text-h6: 1.1em;
}

Heading sizes

All headings are styled along with .h1 to .h6 classes that match each size.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text sizes

Text size classes are available via the text-* pattern from xs to xxxl.