Sturdy slab + open sans

A bold slab serif gives headings a solid, workmanlike weight, and a light, open sans balances it so the text never feels heavy.

Headings: Zilla Slab
Body: Nunito Sans

See it live

Zilla Slab for headings and Nunito Sans for text, set at the pairing's own sizes and line heights. The sample text is written for this explorer.

Fix it, patch it, wear it for ten more years

Bring your torn jacket or wobbly chair to the Saturday repair table. Volunteers will show you how to mend it yourself, lend you the tools, and send you home with a few tips for keeping it going.

Zilla Slab at 50px, line height 1.15 · Nunito Sans at 17px, line height 1.6

Headings Zilla Slab, weights 600, 700

600 Fix it, patch it, wear it for ten more years

700 Fix it, patch it, wear it for ten more years

Self-hosted from the @fontsource/zilla-slab package.

Body Nunito Sans, weights 400, 700

400 Bring your torn jacket or wobbly chair to the Saturday repair table.

700 Bring your torn jacket or wobbly chair to the Saturday repair table.

Self-hosted from the @fontsource/nunito-sans package.

Scale 6 steps from 15px to 50px; from 24px up in Zilla Slab, below in Nunito Sans

50pxFix it, patch it, wear it for ten more years
36pxFix it, patch it, wear it for ten more years
26pxFix it, patch it, wear it for ten more years
20pxFix it, patch it, wear it for ten more years
17pxFix it, patch it, wear it for ten more years
15pxFix it, patch it, wear it for ten more years

Copy the idea

Take the pairing with you as a brief for a person, as instructions for an AI assistant, or as design tokens: the two faces, the scale and the rules for using them.

# Sturdy slab + open sans — type pairing recipe

## The idea

- A bold slab serif gives headings a solid, workmanlike weight, and a light, open sans balances it so the text never feels heavy.

## Use it for

- Community groups and local services
- Outdoor gear and workshops
- Newsletters with a friendly, practical tone

## Avoid it when

- The brand is delicate or luxurious
- Headings need to be very long

## The faces

- Headings: Zilla Slab, weights 600, 700 (self-hosted from @fontsource/zilla-slab)
- Body: Nunito Sans, weights 400, 700 (self-hosted from @fontsource/nunito-sans)

## Scale and rhythm

- Scale: 15px, 17px, 20px, 26px, 36px, 50px
- Line height: 1.15 for headings, 1.6 for body text

## Principles

- Use the slab in bold for short, punchy headings
- Keep headings to two lines at most
- Pair the slab with generous white space so it does not shout
- Use the sans for all body text, lists and buttons
- Underline links in the body; keep the slab for headings only

Design with the "Sturdy slab + open sans" type pairing.

The idea: A bold slab serif gives headings a solid, workmanlike weight, and a light, open sans balances it so the text never feels heavy.

It suits:
- Community groups and local services
- Outdoor gear and workshops
- Newsletters with a friendly, practical tone
It is a poor fit when:
- The brand is delicate or luxurious
- Headings need to be very long

Use Zilla Slab (weights 600, 700) for headings, self-hosted from the @fontsource/zilla-slab package.
Use Nunito Sans (weights 400, 700) for body text, self-hosted from the @fontsource/nunito-sans package.
Use this type scale: 15px, 17px, 20px, 26px, 36px, 50px.
Set headings at a line height of 1.15 and body text at 1.6.

Follow these principles:
- Use the slab in bold for short, punchy headings
- Keep headings to two lines at most
- Pair the slab with generous white space so it does not shout
- Use the sans for all body text, lists and buttons
- Underline links in the body; keep the slab for headings only

Apply the idea and the rules above; do not copy any existing website.

:root {
  --font-heading: "Zilla Slab", sans-serif;
  --font-body: "Nunito Sans", sans-serif;
  --type-1: 15px;
  --type-2: 17px;
  --type-3: 20px;
  --type-4: 26px;
  --type-5: 36px;
  --type-6: 50px;
  --leading-heading: 1.15;
  --leading-body: 1.6;
}

Download brief (.md)

Where it fits

Use it for

Community groups and local services
Outdoor gear and workshops
Newsletters with a friendly, practical tone

Avoid it when

The brand is delicate or luxurious
Headings need to be very long

Principles

The rules that keep the two faces working as one.

Use the slab in bold for short, punchy headings
Keep headings to two lines at most
Pair the slab with generous white space so it does not shout
Use the sans for all body text, lists and buttons
Underline links in the body; keep the slab for headings only