Literary serif pair

A soft, characterful display serif over a sturdy text serif keeps a single bookish voice from headline to footnote, with contrast coming from shape rather than category.

Headings: Fraunces
Body: Source Serif 4

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.

Letters from a winter island

The ferry runs twice a week in January, and the post comes with it. I have learned to write long letters in the gaps, to read the weather from the colour of the harbour, and to keep a spare candle by the door. The island is small, but the days here feel wide.

Heading in Fraunces 600 at 42px, line height 1.1. Body in Source Serif 4 400 at 16px, line height 1.7.

Headings

Fraunces

Semibold 600

Body

Source Serif 4

Regular 400
Semibold 600

The type scale

58pxLetters from a winter island
42pxLetters from a winter island
30pxLetters from a winter island
22pxLetters from a winter island
18pxLetters from a winter island
16pxLetters from a winter island

Copy the idea

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

# Literary serif pair — type pairing recipe

## The idea
- A soft, characterful display serif over a sturdy text serif keeps a single bookish voice from headline to footnote, with contrast coming from shape rather than category.

## Use it for
- Long-form essays and magazines
- Book and author sites
- Cultural programmes

## Avoid it when
- The page is a dense app interface
- The brand should feel technical or futuristic

## The faces
- Headings: Fraunces (@fontsource/fraunces), weights 600
- Body: Source Serif 4 (@fontsource/source-serif-4), weights 400 and 600

## Scale and rhythm
- Scale: 16px, 18px, 22px, 30px, 42px, 58px
- Heading line height: 1.1
- Body line height: 1.7

## Principles
- Keep a comfortable measure of about 60 to 70 characters per line for the body serif.
- Make the size jump between body and headings large so two serifs never look like a mistake.
- Use the heading serif for drop caps and pull quotes as well as headings.
- Keep interface bits such as buttons in the body serif at semibold; do not bring in a third face.

Design with the "Literary serif pair" type pairing.
The idea: A soft, characterful display serif over a sturdy text serif keeps a single bookish voice from headline to footnote, with contrast coming from shape rather than category.
It suits: Long-form essays and magazines.
It suits: Book and author sites.
It suits: Cultural programmes.
Do not choose it when: The page is a dense app interface.
Do not choose it when: The brand should feel technical or futuristic.
Use Fraunces in weights 600 for headings.
Use Source Serif 4 in weights 400 and 600 for body text.
Use only these type sizes: 16px, 18px, 22px, 30px, 42px, 58px.
Set headings at a line height of 1.1 and body text at 1.7.
Follow this rule: Keep a comfortable measure of about 60 to 70 characters per line for the body serif.
Follow this rule: Make the size jump between body and headings large so two serifs never look like a mistake.
Follow this rule: Use the heading serif for drop caps and pull quotes as well as headings.
Follow this rule: Keep interface bits such as buttons in the body serif at semibold; do not bring in a third face.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --font-heading: "Fraunces", serif;
  --font-body: "Source Serif 4", serif;
  --type-1: 16px;
  --type-2: 18px;
  --type-3: 22px;
  --type-4: 30px;
  --type-5: 42px;
  --type-6: 58px;
  --leading-heading: 1.1;
  --leading-body: 1.7;
}

Download brief (.md)

Where it fits

Use it for

Long-form essays and magazines
Book and author sites
Cultural programmes

Avoid it when

The page is a dense app interface
The brand should feel technical or futuristic

Principles

Keep a comfortable measure of about 60 to 70 characters per line for the body serif.
Make the size jump between body and headings large so two serifs never look like a mistake.
Use the heading serif for drop caps and pull quotes as well as headings.
Keep interface bits such as buttons in the body serif at semibold; do not bring in a third face.

Back to all pairings