Fonts
Typography is configured once and inherited by every component. The body and heading font families, base font size, line height, and heading scale (h1–h6) are all defined in theme.typography and exposed as CSS custom properties: --font-body, --font-heading, --font-size-base, and --line-height-base. Individual heading sizes are applied directly to h1–h6 elements in css/_fonts.css.
| Token | Current value | CSS variable | Source path | What it controls |
|---|---|---|---|---|
| Body font | Poppins |
--font-body |
theme.typography.body_font |
Default font family. Applied to body and inherited by every text element that does not override it. |
| Body size | 16px |
--font-size-base |
theme.typography.body_font.size |
Base font-size on body. Most paragraph and form copy inherits this. |
| Heading font | Poppins |
--font-heading |
theme.typography.heading_font |
Family for h1–h6. Pick something with character; pair with a readable body font. |
| Heading weight | 600 |
— |
theme.typography.heading_font.styles |
Default weight for h1–h6. |
| Line height | 1.5 |
--line-height-base |
theme.typography.line_height |
Base body line-height. Increase for more breathing room in dense screens. |
| H1 size | 40px |
— |
theme.typography.h1_size |
Top-level page title size. |
| H2 size | 32px |
— |
theme.typography.h2_size |
Major section heading. |
| H3 size | 26px |
— |
theme.typography.h3_size |
Sub-section heading. |
| H4 size | 22px |
— |
theme.typography.h4_size |
Card titles and component headings. |
| H5 size | 18px |
— |
theme.typography.h5_size |
Sidebar links and small panel headings. |
| H6 size | 14px |
— |
theme.typography.h6_size |
Eyebrows and section headers. |
| Small text size | 12px |
— |
theme.typography.small_size |
Captions, footers, and the .font--small utility. |
Preview
Heading 1 — the quick brown fox
Heading 2 — jumps over
Heading 3 — the lazy dog
Heading 4 — the lazy dog
Heading 5 — the lazy dog
Heading 6 — the lazy dog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris nec augue dictum efficitur. Suspendisse potenti. Curabitur at sapien in velit pulvinar volutpat vel a erat. Donec malesuada, nibh non malesuada finibus, ligula turpis hendrerit eros, ac consequat magna leo at leo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur? Et harum quidem rerum facilis est et expedita distinctio.
In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec id nisl in lectus blandit blandit. Phasellus dignissim lorem ac arcu maximus, non ultricies justo malesuada.
- Lorem ipsum dolor sit amet
- Ut enim ad minim veniam
- Duis aute irure dolor in
- Excepteur sint occaecat cupidatat non.