Type System
All sizes are fluid clamp() expressions scaling between 375px and 1920px viewports, except the three
smallest fixed sizes (2xs, xs, sm). Use only semantic role classes — never raw size utilities.
Every role in one continuous cascade — largest to smallest.
Not traditional headings — structural graphic elements. Used for marketing and hero sections only. Negative tracking (−0.02em) tightens large glyphs into cohesive blocks.
text-display-04 text-display-03 text-display-02 text-display-01 Editorial, blog, case studies. Looser line heights (1.4) optimised for sustained reading. Fluid sizes ensure comfortable measure across all devices.
text-expressive-heading-03 text-expressive-heading-02 text-expressive-heading-01 text-expressive-body-02 text-expressive-body-01 Dashboards, component interiors, data-dense interfaces. Tighter line heights for spatial efficiency. The three smallest steps are fixed — they must never scale.
text-productive-heading-02 text-productive-heading-01 text-productive-body-02 text-productive-body-01 text-productive-legal-01 Recommended role combinations that create natural visual hierarchy. Each pairing shows the interplay of scale and weight across a real-world composition.
Pairing 01 · Marketing Hero
display-04
Build things that matter.
expressive-body-01
We design and engineer digital products at the intersection of craft and technology. Every pixel, every interaction — intentional.
productive-body-02
Start your project → · See our work →
Pairing 02 · Editorial Article
expressive-heading-03
expressive-body-02
When we reduce design to its core constraints, rhythm and proportion emerge as the true foundations — not colour, not trend.
expressive-body-01
Good typography is invisible. It dissolves into the act of reading, leaving only meaning. The moment a reader notices the type, the design has failed — or succeeded so deliberately that the type itself becomes the message.
Pairing 03 · Dashboard Card
Total users
24,891
+12.4% vs last month
Active sessions
1,203
+3.1% vs last month
Conversion rate
4.67%
−0.3% vs last month
Full glyph inventory — uppercase, lowercase, numerals, punctuation, and diacritics — rendered at display scale to reveal optical quirks and spacing characteristics of Ronald.
Uppercase
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Lowercase
abcdefghijklmnopqrstuvwxyz
Numerals
0123456789
Punctuation
.,;:!?'"-–—/\()[]{}@#$%^&*+=<>~`|
Diacritics
ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ
The typeface ships with three active weights. Each has a defined semantic role — mixing arbitrary weights breaks the system.
Regular · 400
Display, Expressive heading
Medium · 500
Expressive body, Productive heading/body
SemiBold · 600
Productive heading-02, body-01, legal-01
Three tracking values drive all roles. Negative tracking tightens large glyphs; zero tracking leaves body copy untouched; positive tracking is reserved for small-caps labels.
tighter · −0.02em
display-04 · display-03 · display-02 · display-01
tight · −0.01em
expressive-heading-03 · expressive-heading-02
normal · 0em
All expressive body + all productive
wide · +0.08em
UI labels, nav links, eyebrows (utility)
wider · +0.1em
Section labels, system chrome (utility)
widest · +0.12em
Category headers (utility)
The system uses only two leading values: 1.05 for display (tight, graphic) and 1.4 for body (open, readable). Mixing them is intentional — never accidental.
Display leading · 1.05
Used by all Display + Expressive heading roles. Tight blocks that read as graphic form.
The quick brown fox jumps over the lazy dog
Productive heading leading · 1.25
Used by productive-heading-02 only. Compact but not cramped for dashboard titles.
The quick brown fox jumps over the lazy dog
Body leading · 1.4
Used by all body roles. Generous air for sustained reading comfort.
The quick brown fox jumps over the lazy dog
Realistic compositions that stress-test every role in its natural habitat.
Simulation 01 · Long-Form Article
Case Study · 2026
When a typographic system grows beyond a dozen components, the smallest decisions compound. A 1px shift in line height cascades through every heading, every caption, every disclaimer.
The core principle is economy of means. Two weights, two leading values, one tracking direction — and the system can express every hierarchy a product needs without ever reaching for an override.
Fluid sizing removes the last excuse for viewport-specific overrides. A single clamp() expression replaces three breakpoint blocks.
The result is a smaller stylesheet and a more predictable reading experience.
"Typography is the craft of endowing human language with a durable visual form."
— Robert Bringhurst, The Elements of Typographic Style
Published 10 May 2026 · 8 min read · Tagged: Design Systems, Typography, Frontend
Simulation 02 · Error Page
404
Page not found
The page you're looking for doesn't exist or has been moved. Let's get you back on track.
← Go back home
Simulation 03 · Form UI
Contact us
Full name
Email address
We'll never share your email.
Message