Typography

Semantic typography tokens with optimized line-height and letter-spacing.

Live Demo

Display (heroes, landing pages)

Title 3XL

Title 2XL

Title XL

Standard titles

Title Large

Title

Subtitle

Paragraph Large: Designed for introductory text and lead paragraphs that need emphasis. Comfortable reading at larger sizes with increased line-height.

Paragraph: The default body text style optimized for extended reading. Line-height of 1.5 ensures comfortable scanning while letter-spacing remains neutral for natural rhythm.

Paragraph Small: For secondary content, captions, and supporting text. Same line-height ratio maintains vertical rhythm consistency.

Label

Label Small

StatusActive

Token Reference

Title

TokenSizeLine HeightTrackingWeight
text-title-3xl60px (3.75rem)1.05-0.025em700
text-title-2xl48px (3rem)1.1-0.025em700
text-title-xl36px (2.25rem)1.15-0.02em700
text-title-lg30px (1.875rem)1.2-0.02em700
text-title24px (1.5rem)1.25-0.015em600
text-subtitle18px (1.125rem)1.35-0.01em600

Paragraph

TokenSizeLine HeightTrackingWeight
text-paragraph-lg18px (1.125rem)1.50400
text-paragraph16px (1rem)1.50400
text-paragraph-sm14px (0.875rem)1.50400

Label

TokenSizeLine HeightTrackingWeight
text-label14px (0.875rem)1.250.01em500
text-label-sm12px (0.75rem)1.350.02em500

Font Families

Sans (Figtree)

The quick brown fox jumps over the lazy dog

Mono (JetBrains Mono)

const hello = "world"

Design Rationale

Display titles (xl–3xl) use very tight line-heights (1.05–1.15) and negative tracking (-0.02 to -0.025em) for hero sections. Standard titles use slightly more relaxed values (1.2–1.35 line-height) for general use.

Paragraphs use neutral letter-spacing and line-height of 1.5–1.6 for comfortable extended reading. Research shows 150% line height improves reading accuracy by up to 20%.

Labels use slightly positive letter-spacing (+0.01 to +0.02em) to improve legibility at small sizes. Tighter line-heights (1.25–1.35) work well for single-line UI elements.