Sharp serif + quiet grotesk

A high-contrast display serif gives headlines a crisp, confident edge, while a neutral grotesk steps back so long text reads without fuss.

Headings: DM Serif Display
Body: Inter

See it live

DM Serif Display for headings and Inter for text, set at the pairing's own sizes and line heights. The sample text is written for this explorer.

Good work speaks quietly, then all at once

We plan every project around a single clear question, test the answer with real people, and ship only what earns its place on the page. The rest stays in the sketchbook, where it can still be useful next time.

DM Serif Display at 72px, line height 1.1 · Inter at 16px, line height 1.6

Headings DM Serif Display, weights 400

400 Good work speaks quietly, then all at once

Self-hosted from the @fontsource/dm-serif-display package.

Body Inter, weights 400, 600

400 We plan every project around a single clear question, test the answer with real people, and ship only what earns its place on the page.

600 We plan every project around a single clear question, test the answer with real people, and ship only what earns its place on the page.

Self-hosted from the @fontsource/inter package.

Scale 7 steps from 14px to 72px; from 24px up in DM Serif Display, below in Inter

72pxGood work speaks quietly, then all at once
56pxGood work speaks quietly, then all at once
40pxGood work speaks quietly, then all at once
28pxGood work speaks quietly, then all at once
20pxGood work speaks quietly, then all at once
16pxGood work speaks quietly, then all at once
14pxGood work speaks quietly, then all at once

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.

# Sharp serif + quiet grotesk — type pairing recipe

## The idea

- A high-contrast display serif gives headlines a crisp, confident edge, while a neutral grotesk steps back so long text reads without fuss.

## Use it for

- Editorial landing pages
- Studio and agency portfolios
- Product launches with a story to tell

## Avoid it when

- The interface is dense with small labels and tables
- The brand must feel playful or casual

## The faces

- Headings: DM Serif Display, weights 400 (self-hosted from @fontsource/dm-serif-display)
- Body: Inter, weights 400, 600 (self-hosted from @fontsource/inter)

## Scale and rhythm

- Scale: 14px, 16px, 20px, 28px, 40px, 56px, 72px
- Line height: 1.1 for headings, 1.6 for body text

## Principles

- Use the serif only at 28 px and above; below that its thin strokes break up
- Keep the grotesk for everything functional: body, buttons, labels, captions
- Tighten the serif's line height and letter spacing as it grows
- Let one large serif headline lead each section instead of several competing ones
- Use the grotesk's semibold for emphasis, never a bold serif

Design with the "Sharp serif + quiet grotesk" type pairing.

The idea: A high-contrast display serif gives headlines a crisp, confident edge, while a neutral grotesk steps back so long text reads without fuss.

It suits:
- Editorial landing pages
- Studio and agency portfolios
- Product launches with a story to tell
It is a poor fit when:
- The interface is dense with small labels and tables
- The brand must feel playful or casual

Use DM Serif Display (weights 400) for headings, self-hosted from the @fontsource/dm-serif-display package.
Use Inter (weights 400, 600) for body text, self-hosted from the @fontsource/inter package.
Use this type scale: 14px, 16px, 20px, 28px, 40px, 56px, 72px.
Set headings at a line height of 1.1 and body text at 1.6.

Follow these principles:
- Use the serif only at 28 px and above; below that its thin strokes break up
- Keep the grotesk for everything functional: body, buttons, labels, captions
- Tighten the serif's line height and letter spacing as it grows
- Let one large serif headline lead each section instead of several competing ones
- Use the grotesk's semibold for emphasis, never a bold serif

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

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

Download brief (.md)

Where it fits

Use it for

Editorial landing pages
Studio and agency portfolios
Product launches with a story to tell

Avoid it when

The interface is dense with small labels and tables
The brand must feel playful or casual

Principles

The rules that keep the two faces working as one.

Use the serif only at 28 px and above; below that its thin strokes break up
Keep the grotesk for everything functional: body, buttons, labels, captions
Tighten the serif's line height and letter spacing as it grows
Let one large serif headline lead each section instead of several competing ones
Use the grotesk's semibold for emphasis, never a bold serif