Typography

Experimental

Purpose-led type roles and responsive treatments for HES content and interfaces.

Design experiment: The values below are candidate reference data, not generated HES tokens or released styles. Three modes and their switching thresholds still require validation.

Type specimens

Wide-mode examples are shown below. These specimens are documentation fixtures and do not define the compiled Design System typography.

Heading / Display · 63/76px

A warmer, more efficient home

Heading / Page · 45/54px

Making home improvements

Heading / Section · 32/40px

Understanding your options

Body / Default · 18/28px

Find out what changes could make your home more comfortable and affordable to run.

Candidate responsive modes

Size / line height in CSS pixels at a 16px root. Compact, Standard and Wide are typography contexts, not device types or approved breakpoint thresholds.

Experimental typography values by mode
Role	Compact	Standard	Wide
Heading / Display	38 / 42	48 / 58	63 / 76
Heading / Page	32 / 40	38 / 48	45 / 54
Heading / Section	24 / 32	28 / 36	32 / 40
Heading / Component	20 / 30	20 / 30	20 / 30
Body / Lead	22 / 32	22 / 32	22 / 32
Body / Default	18 / 28	18 / 28	18 / 28
Body / Supporting	16 / 24	16 / 24	16 / 24
Label / Action	18 / 27	18 / 27	18 / 27
Label / Field	17 / 24	17 / 24	17 / 24
Control / Value	16 / 24	16 / 24	16 / 24

Usage

Choose a typography role for its purpose. Visual role does not replace semantic HTML heading order. Keep body typography stable where possible and apply responsive adaptations only when content demonstrates a need.

Accessibility and validation

Evaluate the candidate roles using real HES content at narrow widths, increased zoom, text spacing and longer headings. Confirm Raleway loading and fallback behaviour before approval.

Implementation status

The reference table is temporarily maintained as documentation test data. It must be replaced by generated canonical token data before the typography system is distributed. No responsive thresholds or mode-switching controls are implied by this page.