Typography

Font families, sizes, weights, and line heights for consistent text rendering.

Font Families

Primary (Sans)

The quick brown fox jumps over the lazy dog.

--font-primary Inter, system-ui, sans-serif

Monospace

const greeting = "Hello, World!";

--font-mono SF Mono, Monaco, monospace

Font Weights

Regular (400)

--font-weight-regular

Medium (500)

--font-weight-medium

Semibold (600)

--font-weight-semibold

Type Scale

Based on a modular scale with ratio 1.15. Base size is 14px.

--g-font-size-4

Heading 1

--g-font-size-3

Heading 2

--g-font-size-2

Heading 3

--g-font-size-1

Body Text

--g-font-size-0

Small / Caption

Line Heights

Tight line height for headings and compact UI elements. Good for buttons and labels.

--g-line-height-tight: 1.25

Normal line height for most body text. Provides comfortable reading without excess space.

--g-line-height-normal: 1.4

Relaxed line height for long-form content like articles and documentation.

--g-line-height-relaxed: 1.6