PLAYBOOK
20251124
Freelancers 01
Overview
101
LEVEL
01 – Beginner
INFO
Our typographic system uses Vollkorn, Mfred, and Stardos Stencil to give HUX its voice. Each typeface serves a distinct role: Vollkorn carries the core reading experience, Mfred adds strength and structure, and Stardos Stencil introduces a sharp, utilitarian edge. The combined system provides clear hierarchy, steady rhythm, and a consistent way for teams to organise information across the product.
Type tokens and sets
HUX uses type tokens across defined type sets to keep typography steady and predictable. Each token is a pre-set combination of size, weight, and line height, calibrated for Vollkorn, Mfred, and Stardos Stencil. The choice of type token depends on the layout structure. Different layers of a page—core content, labels, wayfinding, emphasis—use specific tokens to hold hierarchy and rhythm across the system.
Type modes
The typographic system runs on two modes that serve different contexts while sharing one foundation. Product mode supports interface work with fixed scales, steady rhythm, and clear hierarchy led by Vollkorn and compact utility styles. Expressive mode supports brand and editorial work with responsive scales and stronger graphic presence through Mfred and Stardos Stencil. Both draw from the same tokens, which keeps the system coherent while giving each space the voice it needs.
Typeface
The typographic system uses a trio of Vollkorn, Mfred, and Stardos Stencil. Each typeface supports a different layer of the product: Vollkorn for steady, readable content; Mfred for structure and emphasis; Stardos Stencil for a precise, utilitarian edge. Together they reflect the principles behind the HUX approach—clarity, craft, and purposeful expression. All three typefaces are openly available from their original sources.
Vollkorn
Product
Type: Serif
Weights: Normal (400), Medium (500)
MFred
Expressive
Type: Sans Serif
Weights: Normal (400), Medium (500)
Stardos Stencil
Expressive
Type: Serif
Weights: Normal (400), Medium (500)
Scale
The type scale follows a single, consistent progression that sets hierarchy across every part of the system. All sizes stem from one base value of 12px, then step up or down in steady increments to keep rhythm, contrast, and readability intact. This keeps layouts predictable, reduces ad-hoc sizing, and gives teams a reliable structure to work from.
rem
px
0.75
HUX 12
0.875
HUX 14
1
HUX 16
1.125
HUX 18
1.25
HUX 20
1.5
HUX 24
1.75
HUX 28
2
HUX 32
2.25
HUX 36
2.625
HUX 42
3
HUX 48
3.375
HUX 54
3.75
HUX 60
4.25
HUX 68
4.75
HUX 76
5.25
HUX 84
5.75
HUX 92
Style
Typography sets the texture of the interface and directs attention through clear hierarchy. The right choice of type styles, used with control, shapes how content appears and keeps information useful, simple, and easy to work with across the system.
Weights
Font weight is a key variable for setting emphasis and clarifying hierarchy. Weight and size must work in balance: a bold style draws more attention than a lighter style at the same size, but a lighter style can sit higher in the hierarchy when its scale increases.For HUX, Vollkorn carries core reading in Regular and Semibold, with Semibold reserved for headings and short emphasis. Mfred and Stardos Stencil provide stronger tonal accents but should be used sparingly, not for long passages of text.
Semi-bold (600)
Regular (400)
Light (300)
Italic
Each weight includes an italic style, used only for targeted emphasis. Italics suit titles of works, technical terms, device names, and captions—not general styling. The aim is precision, not decoration.
Semi-bold (600)
Regular (400)
Light (300)