Poster display + calm serif

A heavy, compact display face makes headlines read like posters, while a soft text serif brings the warmth and patience that long reading needs.

Headings: Archivo Black
Body: Lora

See it live

Archivo Black for headings and Lora for text, set at the pairing's own sizes and line heights. The sample text is written for this explorer.

Three nights of music on the old pier

The lanterns go up at dusk. Bring a blanket, a friend and whatever you like to drink; the bands start at eight and the last ferry home leaves at midnight. Tickets are pay what you can, and every penny goes to the harbour choir.

Archivo Black at 96px, line height 1 · Lora at 16px, line height 1.7

Headings Archivo Black, weights 400

400 Three nights of music on the old pier

Self-hosted from the @fontsource/archivo-black package.

Body Lora, weights 400, 600

400 The lanterns go up at dusk.

600 The lanterns go up at dusk.

Self-hosted from the @fontsource/lora package.

Scale 7 steps from 16px to 96px; from 24px up in Archivo Black, below in Lora

96pxThree nights of music on the old pier
72pxThree nights of music on the old pier
48pxThree nights of music on the old pier
32pxThree nights of music on the old pier
22pxThree nights of music on the old pier
18pxThree nights of music on the old pier
16pxThree nights of music on the old pier

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.

# Poster display + calm serif — type pairing recipe

## The idea

- A heavy, compact display face makes headlines read like posters, while a soft text serif brings the warmth and patience that long reading needs.

## Use it for

- Campaign and event pages
- Magazines with strong covers
- Cultural festivals and exhibitions

## Avoid it when

- The page is mostly forms or settings
- Headings are longer than about eight words

## The faces

- Headings: Archivo Black, weights 400 (self-hosted from @fontsource/archivo-black)
- Body: Lora, weights 400, 600 (self-hosted from @fontsource/lora)

## Scale and rhythm

- Scale: 16px, 18px, 22px, 32px, 48px, 72px, 96px
- Line height: 1 for headings, 1.7 for body text

## Principles

- Set display headlines very large and tight, often in capitals
- Never use the display face for body text or small labels
- Give the serif body generous line height to contrast the compact headings
- Use one display headline per screen
- Let the size jump between headline and body be dramatic

Design with the "Poster display + calm serif" type pairing.

The idea: A heavy, compact display face makes headlines read like posters, while a soft text serif brings the warmth and patience that long reading needs.

It suits:
- Campaign and event pages
- Magazines with strong covers
- Cultural festivals and exhibitions
It is a poor fit when:
- The page is mostly forms or settings
- Headings are longer than about eight words

Use Archivo Black (weights 400) for headings, self-hosted from the @fontsource/archivo-black package.
Use Lora (weights 400, 600) for body text, self-hosted from the @fontsource/lora package.
Use this type scale: 16px, 18px, 22px, 32px, 48px, 72px, 96px.
Set headings at a line height of 1 and body text at 1.7.

Follow these principles:
- Set display headlines very large and tight, often in capitals
- Never use the display face for body text or small labels
- Give the serif body generous line height to contrast the compact headings
- Use one display headline per screen
- Let the size jump between headline and body be dramatic

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

:root {
  --font-heading: "Archivo Black", sans-serif;
  --font-body: "Lora", serif;
  --type-1: 16px;
  --type-2: 18px;
  --type-3: 22px;
  --type-4: 32px;
  --type-5: 48px;
  --type-6: 72px;
  --type-7: 96px;
  --leading-heading: 1;
  --leading-body: 1.7;
}

Download brief (.md)

Where it fits

Use it for

Campaign and event pages
Magazines with strong covers
Cultural festivals and exhibitions

Avoid it when

The page is mostly forms or settings
Headings are longer than about eight words

Principles

The rules that keep the two faces working as one.

Set display headlines very large and tight, often in capitals
Never use the display face for body text or small labels
Give the serif body generous line height to contrast the compact headings
Use one display headline per screen
Let the size jump between headline and body be dramatic