ADR-012-b — Design System Typography

Status

Accepted

Context

The project needs a consistent typography that works in harmony with PrimeNG (Lara/Noir/Zinc) and Tailwind CSS v4. A single type family differentiated by weight and size (the Apple approach) was chosen over mixing system fonts with a text font, which creates visual tension and cross-platform inconsistency.

Decision

3-tier font system. The design system uses three semantic font tiers, each mapped to a Tailwind CSS token and applied via a utility class (or the DOM default).

Tier	Tailwind Token	Font	Weight	Usage	CSS Class
Brand	`--font-brand`	Outfit	800	COVERIS logotype, exclusively	`font-brand`
Title	`--font-title`	Inter	600-700	Page titles, section headings	`font-title`
UI / Body	`--font-sans`	Inter	400-500	Everything else: PrimeNG controls, navigation, forms, body text, metadata	(default, no class)

Inter is the base font. Loaded as a variable font (weights 400-800) from Google Fonts. --font-sans in @theme overrides the default Tailwind v4 stack, so PrimeNG and the entire DOM inherit Inter automatically.

Outfit is exclusive to brand. Self-hosted (@font-face in tailwind.css, woff2 in assets/fonts/). Only applied with the font-brand class to the COVERIS wordmark.

--font-title exists as a reserve. Today it resolves to Inter just like --font-sans, but it is maintained as a semantic token so that the title font can be changed without touching components. The font-title class is used on page headings.

No “Paragraph” tier. Body text uses the Tailwind default (--font-sans -> Inter). No separate class or token is needed.

Weight differentiates, not family. Within Inter, visual hierarchy is achieved with font-bold (700), font-semibold (600), font-medium (500), and regular (400) — all standard Tailwind v4 utilities. No custom classes are created for weight.

PrimeNG inherits without override. The Lara preset in theme.config.ts does not define fontFamily. PrimeNG takes the font from the DOM, which is Inter via --font-sans. The preset is not modified to set font.

Consequences

All text renders in Inter without needing font-family CSS classes, reducing template verbosity.
Only two font classes exist: font-brand (Outfit, logotype) and font-title (Inter, semantic reserve for headings).
If a different display font is desired for titles, only --font-title in tailwind.css needs to change — components using font-title update automatically.
Inter variable font adds ~100 KB (gzipped) to the first load; display=swap prevents invisible flash.
Outfit is self-hosted (~5 KB woff2), eliminating a Google Fonts dependency for the brand font.