a field guide to type

TYPE

A living library of beautiful, free web fonts — every specimen rendered live in its own typeface. Click one to set the title in it, then hit copy to grab the import + a ready-to-paste CSS rule.

54 typefaces · click a card to preview · copy the import + CSS · pair & build

Clash Display
the quick brown fox jumps · Aa Gg 123
01display

Clash Display

Bold, slightly condensed grotesque — confident, modern headline energy.

pairs with: Satoshi for body

copy import + csscopy
Cabinet
the quick brown fox jumps · Aa Gg 123
02display

Cabinet Grotesk

Geometric and tidy with a heavy black weight — clean poster headlines.

pairs with: Inter for body

copy import + csscopy
Bricolage
the quick brown fox jumps · Aa Gg 123
03display

Bricolage Grotesque

Quirky, humanist grotesque with character — editorial and a little rebellious.

pairs with: Lora for body

copy import + csscopy
Space Grotesk
the quick brown fox jumps · Aa Gg 123
04display

Space Grotesk

Techy, proportional cousin of Space Mono — sharp, futuristic, friendly.

pairs with: Inter for body

copy import + csscopy
ANTON
QUICK BROWN FOX · AA GG 123
05display

Anton

Ultra-condensed heavyweight — billboard impact, all caps, no apologies.

pairs with: Hanken Grotesk for body

copy import + csscopy
BEBAS NEUE
QUICK BROWN FOX JUMPS · AA GG 123
06display

Bebas Neue

The classic tall condensed sans — sporty, cinematic, instantly legible.

pairs with: Manrope for body

copy import + csscopy
Archivo Black
the quick brown fox · Aa Gg 123
07display

Archivo Black

Grotesque cut at maximum weight — solid, industrial, screen-built.

pairs with: Archivo / Inter for body

copy import + csscopy
BIG SHOULDERS
QUICK BROWN FOX · AA GG 123
08display

Big Shoulders Display

Tall industrial condensed inspired by Chicago signage — bold and civic.

pairs with: DM Sans for body

copy import + csscopy
Climate
the quick brown fox · Aa Gg 123
09display

Climate Crisis

Activist display whose weight melts with rising sea levels — loud with a message.

pairs with: Inter for body

copy import + csscopy
Playfair
the quick brown fox jumps · Aa Gg 123
10serif

Playfair Display

High-contrast transitional serif — elegant, fashion-mag headlines.

pairs with: Inter for body

copy import + csscopy
Fraunces
the quick brown fox jumps · Aa Gg 123
11serif

Fraunces

Soft "old-style" serif with wonky optical charm — warm, characterful, editorial.

pairs with: Inter for body

copy import + csscopy
Instrument
the quick brown fox jumps · Aa Gg 123
12serif

Instrument Serif

Tall, light, slightly condensed display serif — the indie-SaaS hero darling.

pairs with: Geist / Inter for body

copy import + csscopy
Cormorant
the quick brown fox jumps · Aa Gg 123
13serif

Cormorant

Delicate, high-contrast Garamond revival — luxury, perfume-ad refinement.

pairs with: Albert Sans for body

copy import + csscopy
DM Serif
the quick brown fox jumps · Aa Gg 123
14serif

DM Serif Display

High-contrast transitional serif built for big sizes — poised and bookish.

pairs with: DM Sans for body

copy import + csscopy
Libre Caslon
the quick brown fox jumps · Aa Gg 123
15serif

Libre Caslon

A faithful Caslon revival — timeless, literary, the voice of print.

pairs with: Source Sans for body

copy import + csscopy
Newsreader
the quick brown fox jumps · Aa Gg 123
16serif

Newsreader

Warm, readable text serif made for long reads — calm and journalistic.

pairs with: itself — full text family

copy import + csscopy
Spectral
the quick brown fox jumps · Aa Gg 123
17serif

Spectral

A screen-first serif from Production Type — crisp, modern, dependable.

pairs with: Inter for UI

copy import + csscopy
Source Serif
the quick brown fox jumps · Aa Gg 123
18serif

Source Serif 4

Adobe's sturdy transitional serif — neutral, professional, endlessly safe.

pairs with: Source Sans for body

copy import + csscopy
Lora
the quick brown fox jumps · Aa Gg 123
19serif

Lora

Balanced, brushed-contrast serif — gentle and trustworthy for body copy.

pairs with: Montserrat for headings

copy import + csscopy
Inter
the quick brown fox jumps · Aa Gg 123
20sans

Inter

The default of the modern web — neutral, screen-tuned, infinitely versatile.

pairs with: Fraunces for display

copy import + csscopy
Satoshi
the quick brown fox jumps · Aa Gg 123
21sans

Satoshi

Fontshare's clean geometric grotesque — crisp, balanced, startup-modern.

pairs with: Clash Display for headlines

copy import + csscopy
General Sans
the quick brown fox jumps · Aa Gg 123
22sans

General Sans

A warm, humanist workhorse — approachable and clean for product UI.

pairs with: Cabinet Grotesk for display

copy import + csscopy
Plus Jakarta
the quick brown fox jumps · Aa Gg 123
23sans

Plus Jakarta Sans

Friendly geometric sans with subtle flair — fresh and contemporary.

pairs with: Newsreader for body

copy import + csscopy
Manrope
the quick brown fox jumps · Aa Gg 123
24sans

Manrope

Semi-condensed open-source sans — tidy, modern, great for dashboards.

pairs with: Bebas Neue for display

copy import + csscopy
Sora
the quick brown fox jumps · Aa Gg 123
25sans

Sora

Cool, slightly technical geometric sans — crypto-modern and precise.

pairs with: Spectral for body

copy import + csscopy
Outfit
the quick brown fox jumps · Aa Gg 123
26sans

Outfit

Minimal, even geometric sans — clean and airy, made for interfaces.

pairs with: DM Serif Display for headings

copy import + csscopy
Hanken
the quick brown fox jumps · Aa Gg 123
27sans

Hanken Grotesk

Sturdy neo-grotesque with personality — confident headings and UI alike.

pairs with: Anton for display

copy import + csscopy
Schibsted
the quick brown fox jumps · Aa Gg 123
28sans

Schibsted Grotesk

Editorial Scandinavian grotesque — confident, newsroom-clean.

pairs with: Lora for body

copy import + csscopy
Onest
the quick brown fox jumps · Aa Gg 123
29sans

Onest

A newer reading-grade sans — neutral, optimized, quietly excellent.

pairs with: Instrument Serif for display

copy import + csscopy
Albert Sans
the quick brown fox jumps · Aa Gg 123
30sans

Albert Sans

Geometric grotesque with subtle warmth — modern brand sans, all weights.

pairs with: Cormorant for display

copy import + csscopy
Spline Mono
the quick brown fox · Aa Gg 0123 {} =>
31mono

Spline Sans Mono

Soft, humanist monospace — friendly code & UI mono with rounded edges.

pairs with: Spline Sans for body

copy import + csscopy
JetBrains
the quick brown fox · Aa Gg 0123 {} =>
32mono

JetBrains Mono

A developer's mono with ligatures and tall x-height — the IDE classic.

pairs with: Inter for body

copy import + csscopy
Space Mono
the quick brown fox · Aa Gg 0123 {} =>
33mono

Space Mono

Retro-future fixed-width with quirky details — distinctive and editorial.

pairs with: Space Grotesk for display

copy import + csscopy
IBM Plex
the quick brown fox · Aa Gg 0123 {} =>
34mono

IBM Plex Mono

Engineered, corporate-grade monospace — precise with a humanist edge.

pairs with: IBM Plex Sans for body

copy import + csscopy
Fragment
the quick brown fox · Aa Gg 0123 {} =>
35mono

Fragment Mono

Minimal, neutral monospace — quiet captions, code blocks, and labels.

pairs with: Outfit for body

copy import + csscopy
Martian Mono
the quick brown fox · Aa Gg 0123 {} =>
36mono

Martian Mono

Semi-condensed grotesque mono — bold, technical, sci-fi terminal vibes.

pairs with: Martian Grotesk / Inter

copy import + csscopy
Red Hat Mono
the quick brown fox · Aa Gg 0123 {} =>
37mono

Red Hat Mono

Clean, open-source fixed-width — friendly and legible for code and data.

pairs with: Red Hat Display for headings

copy import + csscopy
Caveat
the quick brown fox jumps · Aa Gg 123
38handwriting

Caveat

Casual marker handwriting — perfect for annotations and human notes.

pairs with: Inter for body

copy import + csscopy
Dancing
the quick brown fox jumps · Aa Gg 123
39handwriting

Dancing Script

Lively bouncing script — elegant signatures, invitations, warm flourishes.

pairs with: Cormorant for body

copy import + csscopy
Gloria
the quick brown fox · Aa Gg 123
40handwriting

Gloria Hallelujah

Bubbly, comic-book print hand — playful, friendly, scrapbook charm.

pairs with: Outfit for body

copy import + csscopy
Kalam
the quick brown fox jumps · Aa Gg 123
41handwriting

Kalam

Relaxed pen handwriting with great Devanagari support — natural and warm.

pairs with: Hanken Grotesk for body

copy import + csscopy
Cedarville
the quick brown fox jumps · Aa Gg 123
42handwriting

Cedarville Cursive

Thin, looping cursive — a real handwritten letter, intimate and personal.

pairs with: Lora for body

copy import + csscopy
Shadows
the quick brown fox jumps · Aa Gg 123
43handwriting

Shadows Into Light

Neat all-caps-ish print hand — tidy notes, captions, and labels.

pairs with: DM Sans for body

copy import + csscopy
Unbounded
the quick brown fox · Aa Gg 123
44experimental

Unbounded

Rounded, almost-circular display from Google — playful, bold, brandy.

pairs with: Onest for body

copy import + csscopy
SYNE
QUICK BROWN FOX · AA GG 123
45experimental

Syne

Art-school extended display — odd proportions, gallery and music-poster energy.

pairs with: Inter for body

copy import + csscopy
BUNGEE
QUICK FOX · AA GG 123
46experimental

Bungee

Urban signage display built for vertical & stacked layouts — loud and fun.

pairs with: Manrope for body

copy import + csscopy
Rubik Mono
quick fox · Aa Gg 123
47experimental

Rubik Mono One

Chunky monospaced display — blocky, retro-arcade headline impact.

pairs with: Rubik for body

copy import + csscopy
Rubik Glitch
the quick brown fox · Aa Gg 123
48experimental

Rubik Glitch

Datamoshed, broken-signal display — cyberpunk and corrupted on purpose.

pairs with: Space Mono for body

copy import + csscopy
Wet Paint
the quick brown fox · Aa Gg 123
49experimental

Rubik Wet Paint

Dripping, freshly-painted display — graffiti and street-art flavor.

pairs with: Rubik for body

copy import + csscopy
Honk
quick brown fox · Aa Gg 123
50experimental

Honk

A wild COLRv1 chromatic display — built-in color & carnival energy.

pairs with: Outfit for body

copy import + csscopy
Sixtyfour
quick fox · Aa Gg 123
51experimental

Sixtyfour

A pixel-CRT display font straight out of a 64-bit machine — retro-computer.

pairs with: JetBrains Mono for body

copy import + csscopy
Nabla
quick brown fox · Aa Gg 123
52experimental

Nabla

A 3D chromatic variable display — extruded, gradient-faceted letterforms.

pairs with: Sora for body

copy import + csscopy
Silkscreen
quick fox · Aa Gg 123
53experimental

Silkscreen

A crisp low-res bitmap face — 8-bit UI, badges, and pixel labels.

pairs with: Space Mono for body

copy import + csscopy
Pixelify
the quick brown fox · Aa Gg 123
54experimental

Pixelify Sans

A readable, modern pixel font — game UI and nostalgic display without the eyestrain.

pairs with: Inter for body

copy import + csscopy

Build your own

This entire kit is just words an AI turned into code — no hand-written code. Take the blueprint, hand it to your AI, and make your own version of anything here.

copied to clipboard