Get started
Fabricator UI

Search documentation

Search pages, components, blocks, styles and colours.

Typography

PreviousNext

Inter at five sizes, with weights paired to optical size.

Installation

The weight utilities ship with the foundations:

bunx --bun fabricator-ui@latest add foundations

Sizes

Interfaces are set at 13px. Five roles cover every component.

Display28px
Title16px
Subtitle14px
Body13px
Caption12px
RoleSizeUse
Display28pxPage titles
Title16pxDialog titles
Subtitle14pxCard titles
Body13pxControls, menus, body text
Caption12pxDescriptions, group labels, errors

Descriptions use text-muted-foreground.

Weights

Inter's variable weights read heavier than their numbers in interfaces, so the Fabricator palette sets font-medium to 450 and font-semibold to 550. The weight-* utilities go further: each sets the weight together with Inter's optical size axis (opsz), so heavier text also gets the tighter, display-sized letterforms.

Refined, functional, fluidweight-normalwght 400 · opsz 14
Refined, functional, fluidweight-mediumwght 450 · opsz 15
Refined, functional, fluidweight-semiboldwght 550 · opsz 18
Refined, functional, fluidweight-boldwght 700 · opsz 25
UtilitySettings
weight-normalwght 400, opsz 14
weight-mediumwght 450, opsz 15
weight-semiboldwght 550, opsz 18
weight-boldwght 700, opsz 25

The optical size axis needs the variable Inter font with opsz. With next/font, load it with axes: ["opsz"].

Weight is state

Hover changes colour, from text-muted-foreground to text-foreground, and makes icon strokes heavier. Weight changes only for state that persists: checked, selected, an active tab, an open accordion item. Resting labels are regular; selected ones are semibold.

The weight-* utilities set font-variation-settings, which can be transitioned. Add transition-[font-variation-settings] to make a weight change move instead of snap.

font-semiboldSnaps to the new weight
weight-semiboldTransitions wght and opsz together
Click the rows. Weight marks persistent state such as checked or selected; hover only changes colour.
<button className="transition-[font-variation-settings] duration-moderate ease-spring weight-normal aria-pressed:weight-semibold" />

Trimming

The text-box-trim utility trims a line box to the cap height and baseline, so text sits optically centred in fixed-height controls. It applies in browsers that support text-box.