𝜏:torquens

Appearance

Typography Tokens ​

Here is a subset of typography tokens, with two typography styles (Body and Heading), defined for two different breakpoints (Medium and Small).

Typography Tokens
Name
Value
Typography
Body
Medium
Font Size
12px
Line Height
16px
Typography
Body
Small
Font Size
10px
Line Height
14px
Typography
Heading
Medium
Font Size
36px
Line Height
44px
Typography
Heading
Small
Font Size
24px
Line Height
28px

Whilst design tools often provide ways of grouping together common font properties (family, weight, size and line height), you will still end up with number of styles × number of breakpoints definitions.

A much more compact and efficient representation is to use modes:

Breakpoint Tokens
Name
Medium
Small
Typography
Body
Font Size
12px
10px
Line Height
16px
14px
Typography
Heading
Font Size
36px
24px
Line Height
44px
28px

WARNING

You may well have other variables that respond to breakpoints, unrelated to typography. These would all need to go in the same collection, until such a time as design tools support common modes across different collections.

A note on units ​

The above example use px as a unit, which is of course incorrect. We should always respect the user's preferences; if they have set their browser to use a larger (or smaller) base font size, that must be reflected.

Our typography tokens should be expressed in rem, converted using a base fonr size of 16px:

Breakpoint Tokens
Name
Medium
Small
Typography
Body
Font Size
0.75rem
0.625rem
Line Height
4/3
1.4
Typography
Heading
Font Size
2.25rem
1.5rem
Line Height
11/9
7/6

Note the exact fractions used for line-height. Whilst the CSS specification states that values should be serialised to six decimal places, this will result in different behaviours between different browsers due to different rounding behaviour.

This is the first of many instances were design tooling cannot express accurately the desired implementation.