Typography

Type scale, font families, weights, and text utilities

Geist Sans

Geist Mono

Tailwind Typography

Font Families

RDS uses the Geist font family from Vercel for both sans-serif and monospace text.

Sans-serif

Geist Sans

Used for all UI text, headings, and body content. Clean and modern.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%^&*()

font-sans

Monospace

Geist Mono

Used for code blocks, file paths, and technical content.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%^&*()

font-mono

Type Scale

Complete typographic scale from 12px to 128px for all text sizing needs.

text-xs

12px

The quick brown fox jumps over the lazy dog

text-sm

14px

The quick brown fox jumps over the lazy dog

text-base

16px

The quick brown fox jumps over the lazy dog

text-lg

18px

The quick brown fox jumps over the lazy dog

text-xl

20px

The quick brown fox jumps over the lazy dog

text-2xl

24px

The quick brown fox jumps over the lazy dog

text-3xl

30px

The quick brown fox jumps over the lazy dog

text-4xl

36px

The quick brown fox jumps over the lazy dog

text-5xl

48px

The quick brown fox jumps over the lazy dog

text-6xl

60px

The quick brown fox jumps over the lazy dog

text-7xl

72px

The quick brown fox jumps over the lazy dog

text-8xl

96px

The quick brown fox jumps over the lazy dog

text-9xl

128px

The quick brown fox jumps over the lazy dog

Font Weights

Font weight utilities from thin (100) to black (900).

font-thin

100

The quick brown fox jumps over the lazy dog

font-extralight

200

The quick brown fox jumps over the lazy dog

font-light

300

The quick brown fox jumps over the lazy dog

font-normal

400

The quick brown fox jumps over the lazy dog

font-medium

500

The quick brown fox jumps over the lazy dog

font-semibold

600

The quick brown fox jumps over the lazy dog

font-bold

700

The quick brown fox jumps over the lazy dog

font-extrabold

800

The quick brown fox jumps over the lazy dog

font-black

900

The quick brown fox jumps over the lazy dog

Letter Spacing

Tracking utilities for adjusting letter spacing.

tracking-tighter

-0.05em

LETTER SPACING EXAMPLE

tracking-tight

-0.025em

LETTER SPACING EXAMPLE

tracking-normal

0em

LETTER SPACING EXAMPLE

tracking-wide

0.025em

LETTER SPACING EXAMPLE

tracking-wider

0.05em

LETTER SPACING EXAMPLE

tracking-widest

0.1em

LETTER SPACING EXAMPLE

Line Heights

Leading utilities for adjusting line height.

leading-none1

This is an example of text with leading-none applied. Notice how the lines are spaced differently. This affects readability.

No extra line height

leading-tight1.25

This is an example of text with leading-tight applied. Notice how the lines are spaced differently. This affects readability.

Compact headings

leading-snug1.375

This is an example of text with leading-snug applied. Notice how the lines are spaced differently. This affects readability.

Slightly compact

leading-normal1.5

This is an example of text with leading-normal applied. Notice how the lines are spaced differently. This affects readability.

Default line height

leading-relaxed1.625

This is an example of text with leading-relaxed applied. Notice how the lines are spaced differently. This affects readability.

Comfortable reading

leading-loose2

This is an example of text with leading-loose applied. Notice how the lines are spaced differently. This affects readability.

Extra spacing

Text Colors

Semantic text color utilities for consistent hierarchy.

text-foreground

Primary text, headings

text-muted-foreground

Secondary text, descriptions

text-primary

Links, interactive text

text-destructive

Error messages, warnings

text-gray-950

Primary brand accent

text-green-600

Success states

text-yellow-600

Warning states

text-blue-600

Informational states

Common Patterns

Recommended typography patterns for consistent UI.

Page Headers

Page Title

A brief description of what this page is about.

<h1 className="text-4xl font-bold tracking-tight">
  Page Title
</h1>
<p className="text-lg text-foreground">
  Description
</p>

Section Headers

Section Title

Supporting text that provides context.

<h2 className="text-2xl font-semibold">
  Section Title
</h2>
<p className="text-foreground">
  Supporting text
</p>

Card Headers

Card Title

Card description or subtitle text.

<h3 className="text-lg font-semibold">
  Card Title
</h3>
<p className="text-sm text-muted-foreground">
  Card description
</p>

Labels & Captions

Field Label

Helper text or caption below the field.

<p className="text-sm font-medium">
  Field Label
</p>
<p className="text-xs text-muted-foreground">
  Helper text
</p>

Usage

Examples

/* Font Size */
<p className="text-sm">Small text</p>
<p className="text-base">Base text</p>
<p className="text-lg">Large text</p>

/* Font Weight */
<p className="font-normal">Normal weight</p>
<p className="font-semibold">Semibold weight</p>
<p className="font-bold">Bold weight</p>

/* Combined */
<h1 className="text-4xl font-bold tracking-tight">
  Hero Heading
</h1>

/* Monospace for code */
<code className="font-mono text-sm">
  const example = true;
</code>