# 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.