Bookish serif + plain sans

A warm, traditional text serif carries the voice of the headings, and a humanist sans keeps the reading side calm and modern.

Headings: Libre Baskerville
Body: Source Sans 3

See it live

Libre Baskerville for headings and Source Sans 3 for text, set at the pairing's own sizes and line heights. The sample text is written for this explorer.

Notes from a winter of reading by the window

Some books ask to be read slowly. This season we kept a short list beside the kettle and returned to it every evening, one chapter at a time. Here is what stayed with us, and why each one is worth an unhurried afternoon.

Libre Baskerville at 46px, line height 1.25 · Source Sans 3 at 17px, line height 1.65

Headings Libre Baskerville, weights 400, 700

400 Notes from a winter of reading by the window

700 Notes from a winter of reading by the window

Self-hosted from the @fontsource/libre-baskerville package.

Body Source Sans 3, weights 400, 600

400 Some books ask to be read slowly.

600 Some books ask to be read slowly.

Self-hosted from the @fontsource/source-sans-3 package.

Scale 6 steps from 15px to 46px; from 24px up in Libre Baskerville, below in Source Sans 3

46pxNotes from a winter of reading by the window
34pxNotes from a winter of reading by the window
26pxNotes from a winter of reading by the window
21pxNotes from a winter of reading by the window
17pxNotes from a winter of reading by the window
15pxNotes from a winter of reading by the window

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.

# Bookish serif + plain sans — type pairing recipe

## The idea

- A warm, traditional text serif carries the voice of the headings, and a humanist sans keeps the reading side calm and modern.

## Use it for

- Publishers and literary journals
- Museums, archives and libraries
- Long-form essays and newsletters

## Avoid it when

- The product is a fast-moving tech tool
- Headings are mostly short UI labels

## The faces

- Headings: Libre Baskerville, weights 400, 700 (self-hosted from @fontsource/libre-baskerville)
- Body: Source Sans 3, weights 400, 600 (self-hosted from @fontsource/source-sans-3)

## Scale and rhythm

- Scale: 15px, 17px, 21px, 26px, 34px, 46px
- Line height: 1.25 for headings, 1.65 for body text

## Principles

- Set headings in sentence case so the serif reads like a book title
- Keep body lines between 60 and 75 characters
- Use the serif's italic sparingly for titles of works
- Give headings generous space above and a little below
- Let the sans handle navigation, forms and captions

Design with the "Bookish serif + plain sans" type pairing.

The idea: A warm, traditional text serif carries the voice of the headings, and a humanist sans keeps the reading side calm and modern.

It suits:
- Publishers and literary journals
- Museums, archives and libraries
- Long-form essays and newsletters
It is a poor fit when:
- The product is a fast-moving tech tool
- Headings are mostly short UI labels

Use Libre Baskerville (weights 400, 700) for headings, self-hosted from the @fontsource/libre-baskerville package.
Use Source Sans 3 (weights 400, 600) for body text, self-hosted from the @fontsource/source-sans-3 package.
Use this type scale: 15px, 17px, 21px, 26px, 34px, 46px.
Set headings at a line height of 1.25 and body text at 1.65.

Follow these principles:
- Set headings in sentence case so the serif reads like a book title
- Keep body lines between 60 and 75 characters
- Use the serif's italic sparingly for titles of works
- Give headings generous space above and a little below
- Let the sans handle navigation, forms and captions

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

:root {
  --font-heading: "Libre Baskerville", serif;
  --font-body: "Source Sans 3", sans-serif;
  --type-1: 15px;
  --type-2: 17px;
  --type-3: 21px;
  --type-4: 26px;
  --type-5: 34px;
  --type-6: 46px;
  --leading-heading: 1.25;
  --leading-body: 1.65;
}

Download brief (.md)

Where it fits

Use it for

Publishers and literary journals
Museums, archives and libraries
Long-form essays and newsletters

Avoid it when

The product is a fast-moving tech tool
Headings are mostly short UI labels

Principles

The rules that keep the two faces working as one.

Set headings in sentence case so the serif reads like a book title
Keep body lines between 60 and 75 characters
Use the serif's italic sparingly for titles of works
Give headings generous space above and a little below
Let the sans handle navigation, forms and captions