Typography Playground

Testing and visualizing the Created With typography system using Geist variable fonts.

Heading Styles

Heading 1 - The quick brown fox jumps

h1 • 3.815rem (61px) • Bold • Line height: 1.1 • Letter spacing: -0.02em

Heading 2 - The quick brown fox jumps over

h2 • 3.052rem (49px) • Bold • Line height: 1.1 • Letter spacing: -0.02em

Heading 3 - The quick brown fox jumps over the lazy

h3 • 2.441rem (39px) • Bold • Line height: 1.1 • Letter spacing: -0.02em

Heading 4 - The quick brown fox jumps over the lazy dog

h4 • 1.953rem (31px) • Bold • Line height: 1.1 • Letter spacing: -0.02em

Heading 5 - The quick brown fox jumps over the lazy dog and runs

h5 • 1.563rem (25px) • Bold • Line height: 1.1 • Letter spacing: -0.02em

Heading 6 - The quick brown fox jumps over the lazy dog and runs away

h6 • 1.25rem (20px) • Bold • Line height: 1.1 • Letter spacing: -0.02em

Body Text Sizes

Large text (18px) - Perfect for introductions and lead paragraphs. The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

text-lg • 1.125rem (18px) • Line height: 1.7

Base text (16px) - Standard body copy for most content. The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

text-base • 1rem (16px) • Line height: 1.7

Small text (14px) - Ideal for captions, labels, and secondary information. The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

text-sm • 0.875rem (14px) • Line height: 1.7

Extra small text (12px) - Use sparingly for fine print, metadata, or timestamps. The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-xs • 0.75rem (12px) • Line height: 1.5

Geist Mono (Monospace)

Base monospace (16px) - const greeting = "Hello World";

font-mono text-base • 1rem (16px)

Small monospace (14px) - function calculateTotal(a, b) return a + b;

font-mono text-sm • 0.875rem (14px)

Extra small monospace (12px) - // This is a comment in code

font-mono text-xs • 0.75rem (12px)

Tiny monospace (10px) - Used for very small labels or technical annotations

font-mono tiny • 0.625rem (10px) • Custom size

Font Weights

Light (300) - The quick brown fox jumps over the lazy dog

Regular (400) - The quick brown fox jumps over the lazy dog

Medium (500) - The quick brown fox jumps over the lazy dog

Semibold (600) - The quick brown fox jumps over the lazy dog

Bold (700) - The quick brown fox jumps over the lazy dog

Typography with Brand Colors

Light Mode (Default)

Black text on white background. This is our primary reading mode for most content. The quick brown fox jumps over the lazy dog.

Brand blue for links and accents. Creates visual hierarchy and draws attention.

Dark Mode

White text on black background. Reduces eye strain in low-light conditions. The quick brown fox jumps over the lazy dog.

Brand blue works beautifully in both light and dark modes.

Blue Backgrounds

White text on blue creates strong contrast for hero sections and CTAs. The quick brown fox jumps over the lazy dog.

Real World Example

Building Modern Web Experiences

How we combine creativity with performance to deliver exceptional digital products.

The Power of Typography

Typography is more than just choosing fonts—it's about creating hierarchy, establishing rhythm, and guiding users through your content. At Created With, we believe that great typography is invisible: it should feel natural, be easy to read, and enhance the message without calling attention to itself.

Variable Fonts: A Game Changer

Geist is a variable font, which means it supports a continuous range of weights from 100 to 900. This gives us incredible flexibility in creating visual hierarchy and emphasis without loading multiple font files. The result? Faster load times and more design freedom.

Performance Matters

We've self-hosted our fonts to eliminate external requests, implemented font-display: swap to prevent invisible text, and used Next.js's automatic font optimization. These optimizations ensure your content loads fast and looks great on every device.

Last updated: January 2025 • Reading time: 2 minutes

Tailwind Utility Classes

Typography Utilities

Font Sizes: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, etc.

Font Weights: font-light, font-normal, font-medium, font-semibold, font-bold

Font Families: font-sans (Geist), font-mono (Geist Mono)

Line Heights:leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose

Letter Spacing:tracking-tight, tracking-normal, tracking-wide