Text Properties
Global text properties that sets our font families, type sizes and baseline grid.
| CSS Vars | Editable | Value | Comments | ||
|---|---|---|---|---|---|
| var(--type-body) | settings/type.scss | "Open Sans", -apple-system, system-ui, Helvetica, Arial, sans-serif | Document body font family. | ||
| var(--type-headings) | Gotham, -apple-system, system-ui, Helvetica, Arial, sans-serif | Document headings font family. | |||
| var(--type-actions) | Gotham, -apple-system, system-ui, Helvetica, Arial, sans-serif | Document button, link font family. | |||
| var(--type-mono) | "Fira Code Web", Consolas, "Lucida Console", Courier, monospace | Document mono font family. | |||
| var(--type-script) | PT Serif, Georgia, serif | Document script font family. | |||
| var(--global-font-size) | 1rem | 16px | Global base font size. | |||
| var(--global-line-height) | 1.5 | 24px | Global line height ratio. | |||
| var(--global-baseline) | 6px | The minimum baseline for the document. Most components will be based off this as a multiple. | |||
| var(--size-alpha) | 40px ~ 54px | Heading size 1 <h1> | |||
| var(--size-beta) | 28px ~ 36px | Heading size 2 <h2> | |||
| var(--size-gamma) | 23px ~ 26px | Heading size 3 <h3> | |||
| var(--size-delta) | 19px ~ 21px | Heading size 4 <h4> | |||
| var(--size-epsilon) | 16px ~ 18px | Heading size 5 <h5> | |||
| var(--size-zeta) | 14px ~ 16px | Heading size 6 <h6> | |||
| var(--size-xs) | 11px ~ 12px | Extra small font size | |||
| var(--size-sm) | 13px ~ 14px | Small font size | |||