Type

Choosing type for your site.

How typefaces differ, how to pair two of them, and twelve pairings you can try on one live sample. Every face here is free to use, and we host every one ourselves.

Skip to the pairings

How type works

You don't need to know a typeface's history to choose well. Five ideas do most of the work.

What kind of face it is: Most typefaces fall into a few kinds. Serif faces have small strokes at the ends of their letters and read as established, bookish or formal. Sans serifs have none and read as modern and plain. Geometric sans are drawn from circles and straight lines, humanist faces keep the shape of a pen, and didones swing between hairlines and heavy strokes. Slab serifs have square, sturdy feet, monospaced faces give every letter the same width, and hand-lettered and script faces look written. The kind of face says a lot before anyone has read a word.
Pair by contrast: Two faces that are almost alike look like a mistake. Pair them by difference instead: a serif heading over a sans body, a heavy heading over a light one, a narrow face beside a round one. One face sets the tone and the other does the reading. Two is plenty. One family in two weights is a pairing too, and often the safest.
Scale and hierarchy: A visitor should see at a glance what matters most. Headings get size, weight or both, and each level down should be clearly smaller, not a point or two. Making each step about a quarter bigger than the one below is a good place to start. Capitals and wider letter spacing make a short heading look important without making it big, but keep them to a few words.
Line length and line height: Between 50 and 75 characters is a comfortable line to read. Longer, and the eye loses its place on the way back; shorter, and reading turns choppy. Body text wants a line height of about 1.5 to 1.7. Headings want much less, around 1.1, or their lines drift apart and stop looking like one thought.
What fonts cost, and why we host them: Every face is a file your visitor downloads before the text looks right, and each weight and style is another, which matters most on a phone. So we keep to two families, use variable fonts where they exist (one file for every weight), and send only the Latin characters. We serve the files from our own server rather than Google's, so no visitor's address goes to anyone else just to draw a letter, and our site's security policy lets fonts load from nowhere else. Every face here is under an open license, free to use on your site for good.

The twelve, up close

Each pairing with its faces, who drew them, the settings we'd start from and what it costs to download. Press the heart on up to two, a first choice and an alternative. They travel with you to checkout, and we start your design from them.

System

Nothing to download: the device's own sans, quick and familiar on every screen.

Face: System UI: whatever your visitor's device uses for its own screens.

Headings: weight 500, size ×1, tracking −0.01em, line height 1.15, sentence case
Body text: 1rem (16px), line height 1.55, up to 68 characters a line
Download: Nothing: it is already on the device
Suits: Any site where speed matters most, Portals and internal tools

Serves the styles

Minimal

Try it on the sample

Quiet

One neutral sans at light weights; the work and the white space do the talking.

Face: Inter by Rasmus Andersson. Open Font License 1.1 (opens in a new tab)

Headings: weight 500, size ×0.95, tracking −0.02em, line height 1.15, sentence case
Body text: 1rem (16px), line height 1.6, up to 66 characters a line
Download: 47 KB, Latin characters, WOFF2
Suits: Architects and designers, Studios and consultancies

Serves the styles

Minimal

Try it on the sample

Precise

Geometric headings over a neutral text face, with a monospace detail for figures and labels.

Heading face: Jost by Owen Earl (indestructible type*). Open Font License 1.1 (opens in a new tab)
Body face: Inter by Rasmus Andersson. Open Font License 1.1 (opens in a new tab)

Headings: weight 600, size ×1, tracking −0.02em, line height 1.1, sentence case
Body text: 1rem (16px), line height 1.6, up to 68 characters a line
Download: 73 KB, Latin characters, WOFF2
Suits: Software and tech services, Engineering firms

Serves the styles

High tech

Try it on the sample

Counsel

A serif and a sans drawn as one family: steady, legible and unfussy.

Heading face: Source Serif 4 by Frank Grießhammer for Adobe. Open Font License 1.1 (opens in a new tab)
Body face: Source Sans 3 by Paul D. Hunt for Adobe. Open Font License 1.1 (opens in a new tab)

Headings: weight 600, size ×1, tracking 0, line height 1.2, sentence case
Body text: 1.0625rem (17px), line height 1.6, up to 66 characters a line
Download: 78 KB, Latin characters, WOFF2
Suits: Accountants, lawyers and advisors, Charities and member bodies

Serves the styles

Classic

Try it on the sample

Atelier

A high-contrast display serif, spaced out in capitals, over a calm text serif.

Heading face: Playfair Display by Claus Eggers Sørensen. Open Font License 1.1 (opens in a new tab)
Body face: Source Serif 4 by Frank Grießhammer for Adobe. Open Font License 1.1 (opens in a new tab)

Headings: weight 400, size ×0.85, tracking 0.08em, line height 1.2, in capitals
Body text: 1.0625rem (17px), line height 1.65, up to 64 characters a line
Download: 87 KB, Latin characters, WOFF2
Suits: Jewelers and fine goods, Boutique hotels and restaurants

Serves the styles

Luxurious

Try it on the sample

Harvest

A soft, warm serif with a gentle sans: grown rather than built.

Heading face: Fraunces by Undercase Type (Phaedra Charles, Flavia Zimbardi). Open Font License 1.1 (opens in a new tab)
Body face: Nunito Sans by Vernon Adams, Jacques Le Bailly, Manvel Shmavonyan, Alexei Vanyashin. Open Font License 1.1 (opens in a new tab)

Headings: weight 600, size ×1, tracking −0.01em, line height 1.15, sentence case
Body text: 1.0625rem (17px), line height 1.6, up to 66 characters a line
Download: 66 KB, Latin characters, WOFF2
Suits: Farms and food producers, Cafés and bakeries

Serves the styles

Natural

Try it on the sample

Old style

A Renaissance book face over a soft sans: warm, literate and unhurried.

Heading face: EB Garamond by Georg Duffner and Octavio Pardo. Open Font License 1.1 (opens in a new tab)
Body face: Nunito Sans by Vernon Adams, Jacques Le Bailly, Manvel Shmavonyan, Alexei Vanyashin. Open Font License 1.1 (opens in a new tab)

Headings: weight 500, size ×1.1, tracking 0, line height 1.15, sentence case
Body text: 1.0625rem (17px), line height 1.6, up to 66 characters a line
Download: 74 KB, Latin characters, WOFF2
Suits: Wineries and heritage estates, Bookstores and publishers

Serves the styles

Natural

Try it on the sample

Friendly

One round-ended sans, heavy for headings and light for text: cheerful and easy to read.

Face: Nunito by Vernon Adams, Cyreal and Jacques Le Bailly. Open Font License 1.1 (opens in a new tab)

Headings: weight 800, size ×1.05, tracking −0.01em, line height 1.1, sentence case
Body text: 1.0625rem (17px), line height 1.6, up to 64 characters a line
Download: 38 KB, Latin characters, WOFF2
Suits: Local shops and repairs, Pet care and family services

Serves the styles

Playful

Try it on the sample

Crayon

Big hand-lettered headings over a round sans that children and parents both find easy.

Heading face: Comic Neue by Craig Rozynski. Open Font License 1.1 (opens in a new tab)
Body face: Nunito by Vernon Adams, Cyreal and Jacques Le Bailly. Open Font License 1.1 (opens in a new tab)

Headings: weight 700, size ×1.1, tracking 0, line height 1.1, sentence case
Body text: 1.125rem (18px), line height 1.6, up to 60 characters a line
Download: 57 KB, Latin characters, WOFF2
Suits: Preschools and children's services, Schools and clubs

Serves the styles

Childlike

Try it on the sample

Diner

A sturdy slab for signs and headings, a plain sans for the menu.

Heading face: Roboto Slab by Christian Robertson. Apache License 2.0 (opens in a new tab)
Body face: Inter by Rasmus Andersson. Open Font License 1.1 (opens in a new tab)

Headings: weight 700, size ×1, tracking 0.02em, line height 1.1, in capitals
Body text: 1rem (16px), line height 1.6, up to 66 characters a line
Download: 81 KB, Latin characters, WOFF2
Suits: Diners, cafés and bars, Hardware stores and trades

Serves the styles

Retro

Try it on the sample

Loud

Huge, heavy, tight capitals over a plain sans that stays out of the way.

Heading face: Archivo by Héctor Gatti for Omnibus-Type. Open Font License 1.1 (opens in a new tab)
Body face: Inter by Rasmus Andersson. Open Font License 1.1 (opens in a new tab)

Headings: weight 900, size ×1.35, tracking −0.03em, line height 0.95, in capitals
Body text: 1rem (16px), line height 1.55, up to 64 characters a line
Download: 81 KB, Latin characters, WOFF2
Suits: Gyms and fitness, Events and promoters

Serves the styles

Bold

Try it on the sample

Workshop

A brushed, calligraphic serif and a clear sans, with a script for the maker's signature.

Heading face: Lora by Olga Karpushina for Cyreal. Open Font License 1.1 (opens in a new tab)
Body face: Source Sans 3 by Paul D. Hunt for Adobe. Open Font License 1.1 (opens in a new tab)

Headings: weight 600, size ×1, tracking 0, line height 1.2, sentence case
Body text: 1.0625rem (17px), line height 1.6, up to 66 characters a line
Download: 65 KB, Latin characters, WOFF2
Suits: Makers and craft studios, Florists and gift shops

Serves the styles

Handcrafted

Try it on the sample

Keep going

Found your type?

Pick a plan and bring your two pairings with you. We start your design from them.

Start Your Project Talk to a human

Choosing type for your site.

How type works

Twelve pairings, one sample

Save this pairing

The twelve, up close

System

Quiet

Precise

Counsel

Atelier

Harvest

Old style

Friendly

Crayon

Diner

Loud

Workshop

Keep going

Found your type?

Your $150 SEO audit, free