BEEQ typography overview
Typeface and themes
BEEQ’s default theme uses 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.
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.
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.Text styles
Display
Display text is the largest style in the system. Use it for short, high-impact messages, marketing moments, editorial layouts, or large numerals where the text needs strong visual presence.Headings
Headings create structure and help readers scan. Use native heading elements for document structure, and use visual heading classes when the visual size needs to differ from the semantic level.Body
Body text is the default reading style. Use it for paragraphs, descriptions, helper copy, instructions, empty states, and most product content.Caption
Caption text supports nearby content. Use it for timestamps, metadata, image captions, short helper details, and lower-emphasis information.Overline
Overline text labels a section before the main heading. Use it for short category labels, context markers, or eyebrow text above a title.Using typography in code
BEEQ applies body typography globally through its base styles. For headings, use native heading tags when they match the document structure. Use BEEQ’s visual classes when the visual hierarchy and semantic hierarchy need to be different. Weight modifiers can be applied to BEEQ’s semantic text styles. The typography implementation intentionally supports.semibold and .bold on display, heading, caption, and overline styles.
Design text styles in code
Design tools may name text styles as combinations such asbody-medium, caption-link-regular, or h1-bold. In code, these styles are composed from BEEQ’s semantic type styles plus intentional weight and link treatment.
medium styles in design use a 500 font weight, but BEEQ’s semantic typography selectors do not define a .medium modifier. Use the medium weight token only when you need to match a design text style exactly. For standard BEEQ typography modifiers, use .semibold or .bold.
For exact medium-weight matches, apply font-weight: var(--bq-font-weight--medium) in a scoped class for that specific use case.
Use .bq-link for BEEQ-styled links. It applies brand color, focus styling, and an animated underline that matches the design system.
Hierarchy, line height, and line length
Typography creates hierarchy through size, weight, placement, and color. A larger style can introduce a new section, a heavier weight can highlight a key value, and supporting text can step back with a smaller size or lower-emphasis color.
Typography hierarchy
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 height
Line length
Usage guidelines
Use the BEEQ type scale
Use the BEEQ type scale
Use the defined type scale instead of one-off font sizes. Custom sizes can weaken hierarchy, create uneven rhythm, and make product screens harder to maintain.
Keep structure semantic
Keep structure semantic
Use native heading elements in document order. Apply visual classes like
.h1 or .h2 only when the visual size needs to differ from the semantic level.Use weight intentionally
Use weight intentionally
Start with the regular weight provided by the semantic style. Use
.semibold or .bold when emphasis helps users scan or compare information.Keep long text comfortable
Keep long text comfortable
Use body text for paragraphs, keep long lines around 50-90 characters, and avoid center alignment for content that wraps across several lines.
Use color as support
Use color as support
Use text color tokens to reinforce hierarchy and status, but do not rely on color as the only signal. Check contrast when text appears on custom backgrounds.
Avoid unnecessary truncation
Avoid unnecessary truncation
Let text wrap when possible, especially labels, titles, and critical content. Use truncation only when space is constrained and the full value is available elsewhere.
Accessibility
Typography accessibility depends on readable sizes, sufficient contrast, meaningful structure, and content that remains understandable when layouts change.- Use semantic headings in order. There should be one main page
h1, followed by nested heading levels that match the content structure. - Keep paragraphs readable with comfortable line length, enough line height, and left alignment for left-to-right languages.
- Do not use color as the only way to communicate importance, status, or errors.
- Avoid all-caps text for long labels or paragraphs because it slows reading.
- Let text wrap when possible. If truncation is necessary, make the full text available through the surrounding experience.
- Test content at small and large viewport widths so typography still supports scanning and comprehension.
Resources
Global CSS variables
Review the font family, size, weight, and line-height custom properties used by BEEQ themes.
Tailwind typography source
See the source that defines BEEQ’s semantic typography selectors.