Type

Text is set by role, a utility that sets the family, size, line height and weight together, never by a raw size.

Roles

Role	Sample	Size	Line height	Weight
type-display	Fivespark	48 to 88px, with the window	1.1	600
type-headline	Fivespark	40 to 68px, with the window	1.1	600
type-title	Fivespark	32 to 52px, with the window	1.1	600
type-page-title	Fivespark	28px	34px	600
type-section-title	Fivespark	20px	24px	600
type-region-title	Fivespark	16px	24px	600
type-body-lg	Fivespark	16px	24px	400
type-body	Fivespark	14px	20px	400
type-label	Fivespark	13px	18px	500
type-meta	Fivespark	12px	16px	400
type-figure	Fivespark	14px	20px	500
type-figure-lg	Fivespark	24px	30px	600

The two figure roles set numbers in columns of equal width, so that amounts line up in a table.

Families

Family	Stack
--font-display	"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif
--font-body	"Inter", ui-sans-serif, system-ui, sans-serif
--font-mono	ui-monospace, SFMono-Regular, Menlo, monospace

The package serves both families itself, from its stylesheet: an app loads no fonts of its own.