Typography · Sapphire UI

Three families, one hierarchy. Newsreader gives headings their editorial character; Source Sans 3 keeps the interface readable; JetBrains Mono carries technical detail.

Font families

Newsreader

--font-serif

Editorial headings and brand character. Weights 500–600.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Source Sans 3

--font-sans

Body copy, controls and navigation. Weights 400–600.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

JetBrains Mono

--font-mono

Code, identifiers and technical metadata.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Type scale

Product headings default to 28/18/16px in Source Sans 3. Set data-typography="editorial" for the fluid serif scale shown below. Exact token values stay in sync with the stylesheet. Body text stays readable when layouts become denser.

--text-display-xlclamp(2.5rem, 6vw, 4.5rem) · 600 · serif

A clear point of view.

--text-displayclamp(2rem, 4vw, 3.25rem) · 600 · serif

Make room for the idea.

--text-headingclamp(1.5rem, 3vw, 2rem) · 500 · serif

Editorial character, useful detail.

--text-subheading1.25rem · 500 · serif

A considered next step.

--text-lg1.125rem · 400 · sans

A larger introduction to the work.

--text-base1rem · 400 · sans

Readable body text carries the explanation.

--text-sm0.875rem · 400 · sans

Secondary details and supporting information.

--text-xs0.75rem · 600 · sans

TECHNICAL META · SECTION LABEL

Reading rhythm

Line heights
Token	Value	Use
`--leading-tight`	1.2	Headings
`--leading-snug`	1.375	Compact UI
`--leading-normal`	1.6	Body copy
`--leading-relaxed`	1.75	Long-form reading

Use a restrained heading hierarchy and a comfortable line length. Don’t shrink body text to make a screen feel compact.

See a complete prose specimen →