Sharp serif + quiet grotesk

A high-contrast serif gives headings a crisp, confident voice while a neutral grotesk keeps long text calm and out of the way.

Headings: Playfair Display
Body: Inter

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.

The quiet hour before the shop opens

Every morning the shelves are dusted, the lamps come on one by one and the first pot of tea is poured. Nothing is rushed. By the time the door unlocks, each object has been turned so the light falls on it just so, and the room feels ready to be looked at slowly.

Heading in Playfair Display 700 at 40px, line height 1.1. Body in Inter 400 at 16px, line height 1.6.

Headings

Playfair Display

Bold 700

Body

Inter

Regular 400
Semibold 600

The type scale

56pxThe quiet hour before the shop opens
40pxThe quiet hour before the shop opens
28pxThe quiet hour before the shop opens
20pxThe quiet hour before the shop opens
16pxThe quiet hour before the shop opens
14pxThe quiet hour before the shop opens

Copy the idea

The Sharp serif + quiet grotesk recipe — its idea, faces, scale and rules — ready to paste into a design tool or an AI assistant, or as design tokens.

# Sharp serif + quiet grotesk — type pairing recipe

## The idea
- A high-contrast serif gives headings a crisp, confident voice while a neutral grotesk keeps long text calm and out of the way.

## Use it for
- Editorial landing pages
- Boutique product shops
- Portfolio sites with written case studies

## Avoid it when
- Headings must work below about 20 px, where the hairline strokes break up
- The interface is dense data that needs one plain voice

## The faces
- Headings: Playfair Display (@fontsource/playfair-display), weights 700
- Body: Inter (@fontsource/inter), weights 400 and 600

## Scale and rhythm
- Scale: 14px, 16px, 20px, 28px, 40px, 56px
- Heading line height: 1.1
- Body line height: 1.6

## Principles
- Use the serif only for headings and pull quotes; every control and label stays in the grotesk.
- Set headings large and tight so the thick and thin strokes have room to show.
- Keep body text at regular weight and use the semibold only for short emphasis.
- Give headings generous space above and less below so each one clearly owns its section.

Design with the "Sharp serif + quiet grotesk" type pairing.
The idea: A high-contrast serif gives headings a crisp, confident voice while a neutral grotesk keeps long text calm and out of the way.
It suits: Editorial landing pages.
It suits: Boutique product shops.
It suits: Portfolio sites with written case studies.
Do not choose it when: Headings must work below about 20 px, where the hairline strokes break up.
Do not choose it when: The interface is dense data that needs one plain voice.
Use Playfair Display in weights 700 for headings.
Use Inter in weights 400 and 600 for body text.
Use only these type sizes: 14px, 16px, 20px, 28px, 40px, 56px.
Set headings at a line height of 1.1 and body text at 1.6.
Follow this rule: Use the serif only for headings and pull quotes; every control and label stays in the grotesk.
Follow this rule: Set headings large and tight so the thick and thin strokes have room to show.
Follow this rule: Keep body text at regular weight and use the semibold only for short emphasis.
Follow this rule: Give headings generous space above and less below so each one clearly owns its section.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --font-heading: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;
  --type-1: 14px;
  --type-2: 16px;
  --type-3: 20px;
  --type-4: 28px;
  --type-5: 40px;
  --type-6: 56px;
  --leading-heading: 1.1;
  --leading-body: 1.6;
}

Download brief (.md)

Where it fits

Use it for

Editorial landing pages
Boutique product shops
Portfolio sites with written case studies

Avoid it when

Headings must work below about 20 px, where the hairline strokes break up
The interface is dense data that needs one plain voice

Principles

Use the serif only for headings and pull quotes; every control and label stays in the grotesk.
Set headings large and tight so the thick and thin strokes have room to show.
Keep body text at regular weight and use the semibold only for short emphasis.
Give headings generous space above and less below so each one clearly owns its section.

Back to all pairings