# 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