Typography

Type scale

System.exe uses a fluid type scale built on musical intervals, with values rounded to clean integers. Each size size is clamped between a mobile minimum and a desktop maximum. The browser interpolates fluidly between them, no breakpoint overrides needed.

Scale

These values are the defaults shipped with System.exe. Adjust the min and max for each size in the typography variable collection to match your project's needs.

size	mobile	desktop
xs	12px / 0.75rem	12px / 0.75rem
sm	14px / 0.877rem	14px / 0.875rem
base	16px / 1rem	16px / 1rem
md	18px / 1.125rem	22px / 1.375rem
lg	20px / 1.25rem	28px / 1.75rem
xl	24px / 1.4375rem	38px / 2.375rem
2xl	26px / 1.625rem	50px / 3.125rem
3xl	30px / 1.8125rem	66px / 4.125rem
4xl	32px / 2rem	88px / 5.5rem
5xl	36px / 2.25rem	116px / 7.25rem
6xl	42px / 2.625rem	160px / 10rem

These values are the defaults shipped with System.exe. Adjust the min and max for each step in the typography variable collection to match your project's needs.

text-size tokens

Each size size comes paired with a line height and letter spacing. Larger sizes get tighter line heights and negative letter spacing to maintain visual balance.

Size	Line height	Letter spacing
xs	1.5	0em
sm	1.5	0em
base	1.5	0em
md	1.5	0em
lg	1.5	0em
xl	1.3	0em
2xl	1.3	0em
3xl	1.3	0em
4xl	1.1	-0.03em
5xl	1	-0.03em
6xl	1	-0.03em

Heading defaults

Each heading element has a default size applied out of the box, pulled from the text-size semantic collection. This means each heading automatically gets the correct line height and letter spacing for its size.

Element	Default size	Line height	Letter spacing
h1	5xl	1	-0.03em
h2	4xl	1.1	-0.03em
h3	3xl	1.3	0em
h4	2xl	1.3	0em
h5	xl	1.3	0em
h6	md	1.5	0em
p	base	1.5	0em

For conventional layouts, these defaults are ready to use as-is. For unconventional designs, apply a size class directly to override. For example, an h2 in a hero can be 6xl without affecting document structure.