Typography
One font family for the whole system (--joy-font, Poppins by default) and two font-size scales: a proportional one for most text, and a fixed-pixel one for the rare case where you need an exact size.
Utilities already has .joy-text-sm/lg/xl/2xl/3xl — those still work and haven't changed. The .joy-fs-* scale below is newer and more complete: every step is a --joy-fs-* token, so overriding the whole type scale is one stylesheet, not a find-and-replace across your markup.
Proportional scale
Twelve steps, roughly a 1.2 ratio, in rem so they scale with the user's browser font size:
| Class | Token | Size |
|---|---|---|
.joy-fs-2xs | --joy-fs-2xs | 0.6875rem (11px) |
.joy-fs-xs | --joy-fs-xs | 0.75rem (12px) |
.joy-fs-sm | --joy-fs-sm | 0.875rem (14px) |
.joy-fs-base | --joy-fs-base | 1rem (16px) |
.joy-fs-md | --joy-fs-md | 1.125rem (18px) |
.joy-fs-lg | --joy-fs-lg | 1.25rem (20px) |
.joy-fs-xl | --joy-fs-xl | 1.5rem (24px) |
.joy-fs-2xl | --joy-fs-2xl | 1.875rem (30px) |
.joy-fs-3xl | --joy-fs-3xl | 2.25rem (36px) |
.joy-fs-4xl | --joy-fs-4xl | 2.75rem (44px) |
.joy-fs-5xl | --joy-fs-5xl | 3.5rem (56px) |
.joy-fs-6xl | --joy-fs-6xl | 4.5rem (72px) |
Headline
Body copy at the base size.
<h2 class="joy-fs-3xl joy-font-bold">Headline</h2> <p class="joy-fs-base joy-text-muted">Body copy at the base size.</p>
Fixed pixel sizes
For UI text that needs to match an exact pixel value regardless of the user's root font size — badge labels, icon-adjacent text, dense table cells:
| Class | Token | Size |
|---|---|---|
.joy-fs-px-10 | --joy-fs-px-10 | 10px |
.joy-fs-px-12 | --joy-fs-px-12 | 12px |
.joy-fs-px-14 | --joy-fs-px-14 | 14px |
.joy-fs-px-16 | --joy-fs-px-16 | 16px |
.joy-fs-px-18 | --joy-fs-px-18 | 18px |
.joy-fs-px-20 | --joy-fs-px-20 | 20px |
.joy-fs-px-24 | --joy-fs-px-24 | 24px |
.joy-fs-px-32 | --joy-fs-px-32 | 32px |
Overriding the scale
Every size is a variable, so a companion stylesheet loaded after joy-tokens.css can rescale everything that uses .joy-fs-* at once — useful for a denser UI, or a brand with larger type:
:root {
--joy-fs-base: 1.0625rem;
--joy-fs-lg: 1.375rem;
--joy-fs-xl: 1.625rem;
--joy-fs-2xl: 2rem;
}This is the same override pattern used for color in Theme & tokens — one small stylesheet, loaded once, changes every element that references the token.
Weight
.joy-font-semibold (600) and .joy-font-bold (700) are already in Utilities. Poppins ships four more weights if you need them directly in CSS: 300, 400, 500, and 700 (the ones loaded by the Google Fonts tag from Getting started).