Typography
The typographic system is based on Inter. The fallback font is Arial. Semantic styles map the primitive font-size scale to specific UI roles.
Typographic styles
| Token | Preview | Size | Weight | Line height | Letter spacing |
|---|---|---|---|---|---|
$funid-typography-heading-h1 |
Title H1 | 3rem | 700 | 1.375rem | 0.025rem |
$funid-typography-heading-h2 |
Title H2 | 1.5rem | 600 | 2.25rem | 0.0125rem |
$funid-typography-heading-h3 |
Title H3 | 1.25rem | 600 | 1.75rem | 0rem |
$funid-typography-heading-h4 |
Title H4 | 1rem | 600 | 1.75rem | 0rem |
$funid-typography-intro |
Introduction text | 1.25rem | 400 | 2rem | 0.025rem |
$funid-typography-body |
Standard body text | 1rem | 400 | 1.5rem | 0rem |
$funid-typography-caption |
Caption or secondary text | 0.75rem | 400 | 1.25rem | 0.0375rem |
$funid-typography-label |
Button label | 1rem | 400 | 1.75rem | 0.025rem |
$typo-nav |
Navigation | 0.9375rem | 500 | 1.25rem | 0.0125rem |
H2 rendering with underline
The H2 includes a bottom border ($color-border-default) and specific spacing defined in typography.scss:
Example H2 heading
Text following the heading, illustrating vertical spacing.
Font family
| Token | Value | Fallback |
|---|---|---|
$font-body |
Inter | Arial, sans-serif |