Typography

Font families, type scale, weights, letter spacing, and line heights.

Font Families

Sans — Space Grotesk

The quick brown fox jumps over the lazy dog

Serif — Georgia

The quick brown fox jumps over the lazy dog

Mono — System Monospace

The quick brown fox jumps over the lazy dog

Type Scale

12px

Space Grotesk

14px

Space Grotesk

16px

Space Grotesk

18px

Space Grotesk

20px

Space Grotesk

24px

Space Grotesk

30px

Space Grotesk

36px

Space Grotesk

48px

Space Grotesk

60px

Space Grotesk

72px

Space Grotesk

96px

Space Grotesk

128px

Space Grotesk

Font Weights

100

Thin — Space Grotesk

200

Extra Light — Space Grotesk

300

Light — Space Grotesk

400

Normal — Space Grotesk

500

Medium — Space Grotesk

600

Semi Bold — Space Grotesk

700

Bold — Space Grotesk

800

Extra Bold — Space Grotesk

900

Black — Space Grotesk

Letter Spacing

-0.05em

The quick brown fox jumps over the lazy dog

-0.025em

The quick brown fox jumps over the lazy dog

0em

The quick brown fox jumps over the lazy dog

0.025em

The quick brown fox jumps over the lazy dog

0.05em

The quick brown fox jumps over the lazy dog

0.1em

The quick brown fox jumps over the lazy dog

Line Heights

1

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, and letter spacing.

1.25

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, and letter spacing.

1.375

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, and letter spacing.

1.5

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, and letter spacing.

1.625

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, and letter spacing.

2

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, and letter spacing.

Composition Patterns

Common type pairings that create clear visual hierarchy. These patterns combine scale, weight, and color tokens into reusable building blocks.

Page header

Dashboard Overview

Monitor your key metrics, recent activity, and system health at a glance.

Section header

Recent Activity

Your latest updates and notifications from the past 7 days.

Stat card

Monthly Revenue

$24,563

+12.5% from last month

Article body

Getting Started with Origin UI

Origin UI provides a comprehensive set of design tokens and components built on Tailwind CSS. The system emphasizes responsive sizing, semantic color tokens, and accessible defaults to help teams ship consistent interfaces.

Published on March 15, 2025 — 5 min read

Design Guidelines

Do

Use tracking-tight on headings. Text at text-xl and above benefits from tighter letter-spacing for optical balance.
Pair bold headings with normal body. Use font-semibold or font-bold for headings and font-normal for body to create clear weight contrast.
Use muted-foreground for secondary text. Descriptions, captions, and helper text should use text-muted-foreground to de-emphasize without hiding.
Stick to the type scale. Avoid arbitrary font sizes. The 13-step scale covers every use case from captions to hero headings.
Use leading-normal for body text. A line-height of 1.5 ensures comfortable reading for multi-line content.

Don't

Don't use more than 2 font weights per screen. Too many weights compete for attention and flatten the visual hierarchy.
Don't set body text below text-sm. Text smaller than 14px harms readability for most users, especially on mobile devices.
Don't use tracking-wide on body text. Wide letter-spacing reduces readability at small sizes. Reserve it for uppercase labels and captions.
Don't mix font families within a component. Use a single family per component. Reserve font-mono for code snippets and data values.
Don't use leading-none on multi-line text. A line-height of 1 causes lines to overlap. Only use it on single-line headings where tight spacing is intentional.

Developer Reference

Accessibility

Use semantic HTML headings (h1–h6) in logical order. Screen readers use heading levels to build a page outline.
WCAG 1.4.12 (Text Spacing) requires text to remain readable when users override line-height to 1.5×, letter-spacing to 0.12em, and word-spacing to 0.16em. Avoid fixed heights on text containers.
All font sizes must scale with browser zoom. Never use pxunits for font-size — Tailwind's text-* utilities use rem by default.
Ensure a minimum contrast ratio of 4.5:1 for body text and 3:1 for large text (18px+ or 14px+ bold) per WCAG 1.4.3.

Usage

// Page header
<h1 className="text-3xl font-bold tracking-tight">Page Title</h1>
<p className="text-sm text-muted-foreground">Page description</p>

// Section header
<h3 className="text-lg font-semibold tracking-tight">Section</h3>

// Body text
<p className="text-base leading-relaxed">Body content here.</p>

// Caption / helper text
<p className="text-xs text-muted-foreground">Helper text</p>

// Uppercase label
<p className="text-xs font-medium uppercase tracking-widest text-muted-foreground">
  Label
</p>

// Monospace for code
<code className="font-mono text-xs">const x = 42</code>

// Font families
<p className="font-sans">Sans (Space Grotesk)</p>
<p className="font-serif">Serif (Georgia)</p>
<p className="font-mono">Mono (System)</p>