Heavy slab + calm text

A sturdy slab serif makes headings feel stamped and dependable, and a modest grotesque body keeps the page easy to read underneath it.

Headings: Zilla Slab
Body: Karla

The faces, live

The sample is set in the pairing's own fonts, at its own sizes and line heights. The ladder shows every step of its type scale.

Fix a dripping tap in twenty minutes

Turn off the water under the sink, then open the tap to drain what is left. Lift the cap, undo the screw and pull out the old washer. Take it with you to the hardware counter so the new one matches, and fit it the same way round.

Heading in Zilla Slab 700 at 38px, line height 1.15. Body in Karla 400 at 17px, line height 1.6.

Headings

Zilla Slab

Bold 700

Body

Karla

Regular 400
Bold 700

The type scale

52pxFix a dripping tap in twenty minutes
38pxFix a dripping tap in twenty minutes
28pxFix a dripping tap in twenty minutes
21pxFix a dripping tap in twenty minutes
17pxFix a dripping tap in twenty minutes
15pxFix a dripping tap in twenty minutes

Copy the idea

The Heavy slab + calm text recipe — its idea, faces, scale and rules — ready to paste into a design tool or an AI assistant, or as design tokens.

# Heavy slab + calm text — type pairing recipe

## The idea
- A sturdy slab serif makes headings feel stamped and dependable, and a modest grotesque body keeps the page easy to read underneath it.

## Use it for
- Local services and trades
- Community newsletters
- Recipe and how-to sites

## Avoid it when
- The tone is luxurious or delicate
- Headings are long sentences rather than short labels

## The faces
- Headings: Zilla Slab (@fontsource/zilla-slab), weights 700
- Body: Karla (@fontsource/karla), weights 400 and 700

## Scale and rhythm
- Scale: 15px, 17px, 21px, 28px, 38px, 52px
- Heading line height: 1.15
- Body line height: 1.6

## Principles
- Keep slab headings short: three to seven words lands with the most weight.
- Pair the slab with plenty of white space so the heavy serifs do not crowd the text below.
- Use the body face in bold for step numbers and inline labels, never the slab.
- Avoid all-caps slab headings; the serifs already add enough emphasis.

Design with the "Heavy slab + calm text" type pairing.
The idea: A sturdy slab serif makes headings feel stamped and dependable, and a modest grotesque body keeps the page easy to read underneath it.
It suits: Local services and trades.
It suits: Community newsletters.
It suits: Recipe and how-to sites.
Do not choose it when: The tone is luxurious or delicate.
Do not choose it when: Headings are long sentences rather than short labels.
Use Zilla Slab in weights 700 for headings.
Use Karla in weights 400 and 700 for body text.
Use only these type sizes: 15px, 17px, 21px, 28px, 38px, 52px.
Set headings at a line height of 1.15 and body text at 1.6.
Follow this rule: Keep slab headings short: three to seven words lands with the most weight.
Follow this rule: Pair the slab with plenty of white space so the heavy serifs do not crowd the text below.
Follow this rule: Use the body face in bold for step numbers and inline labels, never the slab.
Follow this rule: Avoid all-caps slab headings; the serifs already add enough emphasis.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --font-heading: "Zilla Slab", serif;
  --font-body: "Karla", sans-serif;
  --type-1: 15px;
  --type-2: 17px;
  --type-3: 21px;
  --type-4: 28px;
  --type-5: 38px;
  --type-6: 52px;
  --leading-heading: 1.15;
  --leading-body: 1.6;
}

Download brief (.md)

Where it fits

Use it for

Local services and trades
Community newsletters
Recipe and how-to sites

Avoid it when

The tone is luxurious or delicate
Headings are long sentences rather than short labels

Principles

Keep slab headings short: three to seven words lands with the most weight.
Pair the slab with plenty of white space so the heavy serifs do not crowd the text below.
Use the body face in bold for step numbers and inline labels, never the slab.
Avoid all-caps slab headings; the serifs already add enough emphasis.

Back to all pairings