Skip to content
Gloss v2.0.0
Source
Foundations

Typography

Three families, eight fluid steps, eight compound styles. Sans for interface, mono for every label and technical value, serif as an opt-in reading variant.

Families

--gl-font-sans Interface text — every component, every screen. Web-safe; nothing is loaded for it.
Gloss — 0123456789
--gl-font-mono Every label, meta value, technical/catalog value, and code sample. The system's one loaded webfont.
Gloss — 0123456789
--gl-font-serif Opt-in reading variant for a project that wants an editorial, archival feel. Not loaded by default; web-safe only.
Gloss — 0123456789

Only one webfont is loaded — IBM Plex Mono, at 400/500/600:

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

Sans is a web-safe system stack; serif is Georgia-based and opt-in, for a project that wants an editorial or archival feel. Neither is fetched.

Fluid scale

Eight steps, clamp()-based (Utopia, 320→1240px viewport). The body sits at --gl-step-0 — 18px on a phone, 20px on a wide screen — with no fixed breakpoint in between.

--gl-step--2 12.5 → 12.8px type-label — eyebrows, catalog labels, meta.
The quick brown fox jumps over the lazy dog
--gl-step--1 15 → 16px type-body-sm and type-mono — secondary copy, technical values.
The quick brown fox jumps over the lazy dog
--gl-step-0 18 → 20px type-body — the base size, and the body element's own size.
The quick brown fox jumps over the lazy dog
--gl-step-1 22 → 25px type-h3 — card and subsection headings.
The quick brown fox jumps over the lazy dog
--gl-step-2 26 → 31px type-h2 — section headings.
The quick brown fox jumps over the lazy dog
--gl-step-3 31 → 39px type-h1 — screen titles.
The quick brown fox jumps over the lazy dog
--gl-step-4 37 → 49px type-display — one hero title per screen, at most.
The quick brown fox jumps over the lazy dog
--gl-step-5 45 → 61px Reserved headroom. No compound style claims it yet.
The quick brown fox jumps over the lazy dog

The eight compound styles

Real, specific numbers — not a generic ramp compressed to fit. Each class sets family, size, weight, line-height, and (where one applies) letter-spacing in a single declaration.

ClassWeightSizeLine-heightTrackingUse for
.type-display 600 --gl-step-4 1.08 -0.015em Page-level hero title, once per screen.
.type-h1 600 --gl-step-3 1.12 -0.012em Screen title.
.type-h2 600 --gl-step-2 1.16 -0.01em Section heading.
.type-h3 600 --gl-step-1 1.25 normal Card / subsection heading.
.type-body 400 --gl-step-0 1.55 normal Body copy.
.type-body-sm 400 --gl-step--1 1.5 normal Secondary copy, hints.
.type-label 500 --gl-step--2 1 0.08em Eyebrows, catalog labels, meta — SAVED, RECOMMENDED, OVERDUE.
.type-mono 400 --gl-step--1 1.5 normal Technical values, IDs, dates, code.
All eight, in order
Display

Heading one

Heading two

Heading three

Body copy at the base size, 1.55 line-height.

Secondary copy, one step down.

Catalog label technical.value / 2026-08-21 / #3a6a63
Markup 
<div class="type-display">Display</div>
<h1 class="type-h1">Heading one</h1>
<h2 class="type-h2">Heading two</h2>
<h3 class="type-h3">Heading three</h3>
<p class="type-body">Body copy at the base size, 1.55 line-height.</p>
<p class="type-body-sm">Secondary copy, one step down.</p>
<span class="type-label">Catalog label</span>
<span class="type-mono">technical.value / 2026-08-21 / #3a6a63</span>

Rules