Typography

Font Families

QDS has two primary typefaces: IBM Plex Sans for interface and body text, and EB Garamond for display and editorial headings. IBM Plex Mono is the numeric typeface used wherever figures must align. Roboto and Open Sans are retained only as sans-serif fallbacks and should not be chosen as primary faces.

Type Scale

Font sizes are exposed as tokens. The xs–lg body sizes are the long-standing defaults; xl through display are the display/heading steps. Reference the token rather than a raw pixel value.

Semantic Text Styles

These opt-in classes bundle size, weight, and line-height into a canonical hierarchy. Apply them to any element (<h1>, <p>, <span>) — because they are classes, adopting them never changes the appearance of unstyled markup elsewhere.

Font Weights

IBM Plex Sans is available across five weights. Reference the weight tokens rather than raw numbers.

Line Height

Line-height tokens control vertical rhythm. Use tighter values for headings and looser values for long-form reading.

Numeric & Financial Data

Financial tables, ledgers, and metric readouts depend on digits lining up into clean columns. Proportional fonts give each digit a different width, so right-aligned numbers still look ragged. QDS solves this two ways:

• .qds-numeric — switches to IBM Plex Mono and enables tabular lining figures (font-variant-numeric: tabular-nums). Every glyph shares a fixed advance width, so columns align perfectly. Best for dense financial tables.
• .qds-tabular-nums — keeps the current (sans) typeface but forces fixed-width tabular figures. Use when numbers must align but the monospace look is undesirable.

Notice how the right-hand column aligns the decimal points and thousands separators once .qds-numeric is applied.

Usage Guidelines

Tokens vs. classes

Use the tokens when authoring component CSS, and the opt-in classes when composing markup. Both draw from the same scale, so they stay in sync.

/* In component CSS — reference tokens */
.report-title {
  font-family: var(--theme-font-family-serif);
  font-size: var(--theme-font-size-3xl);
  line-height: var(--theme-line-height-snug);
}

/* In markup — apply opt-in classes */
<h1 class="qds-h1">Portfolio overview</h1>
<p class="qds-body">Supporting copy.</p>
<td class="qds-numeric">$1,240,000.00</td>

Non-breaking by design

These tokens and classes are purely additive. Bare h1–h6 and p element styles are intentionally left unchanged, so existing applications are unaffected until they opt in to the new scale.

Accessibility

• Keep body text at 16px (md) or larger for comfortable reading.
• Maintain a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+).
• Preserve a line height around 1.5 for body copy to aid readability.
• Don't rely on weight or size alone to convey meaning.