Typography

Font size, font weight, and line height. Fluid values scale smoothly between viewports using clamp().

Font Size — Fluid fs-{min}-{max}

fs-48-96
fs-32-72
fs-24-48
fs-20-32
fs-16-24
fs-14-18
fs-12-16

Scales smoothly between min and max using clamp(). Values are in pixels, output is in rem.

Font Size — Fixed fs-{value}

fs-12 (0.75rem)
fs-16 (1rem)
fs-20 (1.25rem)
fs-24 (1.5rem)
fs-32 (2rem)

Single value — no scaling. Converted to rem.

Font Size — Breakpoint fs-{bp}-{min}-{max}

Only applies from the breakpoint and up (mobile-first).

fs-sm-16-24 — fluid from sm (576px) up

fs-md-18-32 — fluid from md (768px) up

fs-lg-24-48 — fluid from lg (992px) up

Viewport Override fs-{min}-{max}--{vpMin}-{vpMax}

fs-16-48--480-1920

Uses 480px–1920px viewport range instead of the config default (320px–1440px).

Font Weight — Named fw-{name}

fw-light — 300
fw-normal — 400
fw-medium — 500
fw-semibold — 600
fw-bold — 700

Font Weight — Numeric fw-{value}

fw-100
fw-200
fw-300
fw-400
fw-500
fw-600
fw-700
fw-800
fw-900

Unitless — fw-700 outputs font-weight: 700. No fluid range.

Line Height lh-{value}

Unitless, fixed only. The value is literal — decimals included: lh-1.51.5, lh-0.80.8, lh-22. Supports breakpoints: lh-md-1.5.

Tight lh-1.2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Normal lh-1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Loose lh-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Letter Spacing ls-{value}

The value is a percentage of the font size, fixed only. ls-5 = 5% tracking → 0.05em, ls-10 = 10% → 0.1em — and because it's em-based, it scales along with fluid fs-*. Matches the common design-system scale (Tailwind tracking-*). Supports breakpoints: ls-md-8.

Subtle ls-2

The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow.

Wider ls-5

The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow.

Widest ls-10

The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow.

Common use: uppercase / small-caps labels, display headings. Pairs naturally with fw-bold + fs-*.

FEATURED · LS-10 UPPERCASE

Display heading, ls-md-2

Negatives via n prefix: tighten display type with ls-n2-0.02em. Useful for large headings where default tracking feels too loose.

Tight display heading, ls-n2

GitHub