Typography helps people scan, understand, and act on information. BEEQ uses a shared type system for hierarchy, comfortable reading, and consistent implementation across product interfaces.
The system is built from a typeface, a size scale, line-height tokens, semantic text styles, and utility classes that let you adjust weight or link treatment when a design style needs it.
***
## Typeface and themes
BEEQ's default theme uses [Outfit](https://fonts.google.com/specimen/Outfit), an open-source typeface designed for clear interface text. Outfit is used for headings, body copy, captions, controls, and data-heavy product surfaces.
The Endava theme uses Poppins through the same typography tokens. This keeps the implementation stable while allowing the visual identity to change by theme.
| Theme | Font family token | Typeface |
| ------------ | ------------------ | -------- |
| BEEQ default | `--bq-font-family` | Outfit |
| Endava | `--bq-font-family` | Poppins |
Use typography classes and tokens instead of hardcoded font values. The active theme resolves the font family for you.
***
## Typography reset
BEEQ's Tailwind preset includes an opinionated reset that makes typography predictable before you add any component or layout styles.
| Reset behavior | What it does |
| ------------------------------------------- | --------------------------------------------------------------------------------------------- |
| `html` sets `font-family` and `font-size` | The page starts with the active theme font and a `16px` base size. |
| `body` sets text color and line height | Body copy uses `var(--bq-text--primary)` and the regular `150%` line height by default. |
| `*` removes margin and inherits font styles | Browser spacing and font defaults are removed so BEEQ tokens control the rhythm. |
| Form controls inherit font styles | Inputs, buttons, selects, and textareas use the same typography as the surrounding interface. |
| Paragraphs and headings wrap long words | Text is less likely to overflow narrow layouts. |
This reset is why body text does not need a class. Use semantic typography selectors for display, headings, captions, and overlines, then add layout spacing intentionally with BEEQ spacing tokens.
***
## Type scale
BEEQ's type scale moves from large display text to compact supporting text. Larger styles use tighter line height to keep headings visually grouped, while body, caption, and overline styles use a more open line height for readability.
Release notes
Payments dashboard updates
This section is semantically part of the page's second level, but it uses the H1 visual style because it starts a major content area.
Published on June 4, 2026
The importance of typography
Typography is not choosing fonts or making fonts, it’s about shaping text for optimal reading experience.
Customers
These companies have purchased in the last 12 months.
-
Acme Inc.
-
Beta LLC
Logistics
The management of products or other resources as they travel between a point of origin and a destination.
Sole proprietorship
A business structure where a single individual both owns and runs the company.
Discount code
A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
Customers
These companies have purchased in the last 12 months.
-
Acme Inc.
Purchased on June 4, 2026
-
Beta LLC
Purchased on May 12, 2026
Release notes
v1.0.0
June 4, 2026
We’re excited to announce the release of version 1.0.0, which includes new features, performance improvements, and bug fixes to enhance your experience.
Release notes
Payments dashboard updates
This section is semantically part of the page's second level, but it uses the H1 visual style because it starts a major content area.
Published on June 4, 2026
Regular heading text is the default.
Semibold heading text adds emphasis.
Bold heading text creates stronger emphasis.
Semibold caption text can label compact metadata.
Regular heading text is the default.
Semibold heading text adds emphasis.
Bold heading text creates stronger emphasis.
Semibold caption text can label compact metadata.
```
Line height keeps text legible. BEEQ uses `120%` for display and larger headings because they need tighter grouping, and `150%` for smaller headings, body, captions, and overlines because they need more reading space.
Line length affects how easily readers move from one line to the next. Aim for 50-90 characters per line for long-form text, including spaces.
***
## Usage guidelines