Typography

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, 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 as body-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. 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

---

​

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