Typography

Overview

Space UI typography is built on the principles of restraint, precision, and responsive scalability. Rather than arbitrary one-off font sizes, the system uses a mathematically grounded type scale with descending heading levels, optical line-heights, and dedicated tokens for body and interface controls.

The design system is powered by three primary font families:

Text Playground

Test how headings, body paragraphs, blockquotes, lists, and interactive accordion widgets respond across different screen sizes and typeface configurations.

Heading Font Specs

Headings feature tight, optical line-heights (1.10–1.35) and proportional negative letter-spacing (tracking) to produce dense, punchy titles that balance neatly across lines.

Body & UI Font Specs

Body and interface typography is calibrated for maximum legibility at high reading speeds. Line-heights are relaxed (1.40–1.60) to provide comfortable vertical rhythm.

Type Scale Reference

A quick-reference matrix mapping typographic roles to rem/pixel sizes, line-heights, weights, tracking, and Tailwind CSS v4 utility classes:

Typographic Principles

When styling components or long-form documentation, follow these core guidelines:

1. Line-Height by Role

• Headings: Keep line-height tight (around 1.10–1.25) so multiline headlines read as cohesive units.
• Body & Paragraphs: Use generous line-height (1.50–1.60) so the eye easily transitions to the next line.
• Single-line Controls: Use leading-none or leading-normal with centered flex alignment.

2. Cap the Measure (Line Length)

Unbounded paragraph widths fatigue the reader. Cap long-form reading copy around 60–75 characters per line using max-w-[65ch] or max-w-2xl.

3. Deliberate Text Wrapping

• Apply text-wrap: balance on headings and card titles to distribute line lengths evenly.
• Apply text-wrap: pretty on lead paragraphs and descriptions to prevent single-word orphans on the final line.

4. Tabular Numbers on Changing Values

Proportional digits have variable widths, causing layout jitter when counters, prices, or timers tick. Use font-variant-numeric: tabular-nums (Tailwind tabular-nums) for dynamic numeric values:

<span className="font-mono tabular-nums text-foreground">${price.toFixed(2)}</span>

5. iOS Mobile Input 16px Rule

iOS Safari automatically zooms the viewport if a form input has a font size smaller than 16px. Always start mobile inputs at 16px and scale down on larger viewports:

<input className="text-base sm:text-sm" />

Configuration & Custom Fonts

1. Setup with next/font (Next.js)

Configure Google Fonts or local variable fonts in your root layout:

import { Inter, Geist, JetBrains_Mono } from 'next/font/google'
import '@/styles/globals.css'

const fontSans = Inter({
  subsets: ['latin'],
  variable: '--font-sans',
  display: 'swap',
})

const fontHeading = Geist({
  subsets: ['latin'],
  variable: '--font-heading',
  display: 'swap',
})

const fontMono = JetBrains_Mono({
  subsets: ['latin'],
  variable: '--font-mono',
  display: 'swap',
})

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html
      lang="en"
      className={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable}`}
      suppressHydrationWarning
    >
      <body className="font-sans antialiased bg-background text-foreground">{children}</body>
    </html>
  )
}

2. Tailwind CSS v4 Theme Integration

In Tailwind CSS v4, map your font variables inside @theme in globals.css:

@import 'tailwindcss';

@theme {
  --font-sans: var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: var(--font-heading), var(--font-sans), system-ui, sans-serif;
  --font-mono: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@layer base {
  body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    text-wrap: balance;
  }
}