Typography
Guppy uses a consistent, responsively scaling typography on top of Bootstrap 5. All values are adjustable through the theme configuration.
Where to find the settings
In the admin: Content → Themes → Guppy Theme → Configure. Typography fields are spread across multiple tabs:
- Layout / Body: base font size, font family
- Header / Productcard / Detailpage: area-specific headlines
Typography scale
| Headline | Size | Line height |
|---|---|---|
| H1 | 32 px | 44 px |
| H2 | 24 px | 36 px |
| H3 | 20 px | 32 px |
| H4 | 18 px | – |
| H5 | 16 px | – |
| H6 | 15 px | – |
| Body | 1 rem (16 px) | – |
For display sizes (hero headlines) three additional steps are available: Display 1, 2, 3.
Add your own fonts
Use the Theme Builder to upload your own .woff/.woff2 files, the builder generates the @font-face rules automatically and exposes the families as selectable values in the typography fields.
Manual integration via a child theme: see Variables & Tokens.
Default font
DmfGuppyTheme ships with Inter as the default font family. The typography variables are tuned to read well on modern screens while staying compact on mobile.
Notes
Consistency
When changing font sizes, keep the scale balanced, don't make H2 larger than H1, for instance, or semantic readability suffers.
Full reference
All SCSS variable names for typography: Config Schema → Typography.