Fonts & typography¶
Flexoraa uses one font family across the site by default, with separate control for headings and body text.
Fonts¶
| Role | Font | Notes |
|---|---|---|
| Headings | Outfit (Google) | Titles and headings site-wide |
| Body & buttons | Outfit (Google) | Paragraphs, labels, button text |
Set both in Theme Settings > Fonts. Change the heading font to restyle every title at once.
Heading sizes¶
All headings use weight 600 by default.
| Level | Desktop | Tablet | Mobile | Line height |
|---|---|---|---|---|
| H1 | 60px | 48px | 36px | 1.1 |
| H2 | 48px | 36px | 28px | 1.15 |
| H3 | 36px | 28px | 24px | 1.2 |
| H4 | 24px | 22px | 20px | 1.3 |
| H5 | 20px | 18px | 16px | 1.35 |
| H6 | 16px | 16px | 16px | 1.4 |
Body text¶
- Size: 16px on all devices.
- Color:
#6B7280(Color 3). - Line height: 1.7.
Links¶
- Color: Secondary (
#1cb5e0). - Hover color: Tertiary (
#F5C542). - Underline is off by default.
Per-module overrides
Modules can override heading level and size where it makes sense, for example a hero title, but they inherit these global fonts and colors unless you change them.