Tall display + steady text

A condensed all-caps display face shouts in very little width, and a round, even sans gives the body the steadiness the display lacks.

Headings: Bebas Neue
Body: Lato

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.

Night run along the river

Meet at the old boathouse at eight. We run five easy kilometres with head torches, regroup at the footbridge and finish with warm soup by the water. All paces are welcome and nobody is left behind.

Heading in Bebas Neue 400 at 72px, line height 1. Body in Lato 400 at 17px, line height 1.6.

Headings

Bebas Neue

Regular 400

Body

Lato

Regular 400
Bold 700

The type scale

96pxNight run along the river
72pxNight run along the river
48pxNight run along the river
32pxNight run along the river
22pxNight run along the river
17pxNight run along the river
15pxNight run along the river

Copy the idea

The Tall display + steady text recipe — its idea, faces, scale and rules — ready to paste into a design tool or an AI assistant, or as design tokens.

# Tall display + steady text — type pairing recipe

## The idea
- A condensed all-caps display face shouts in very little width, and a round, even sans gives the body the steadiness the display lacks.

## Use it for
- Event and festival pages
- Sports clubs and fitness classes
- Posters and announcement banners

## Avoid it when
- Headings need lowercase or long sentences
- The page is mostly long reading

## The faces
- Headings: Bebas Neue (@fontsource/bebas-neue), weights 400
- Body: Lato (@fontsource/lato), weights 400 and 700

## Scale and rhythm
- Scale: 15px, 17px, 22px, 32px, 48px, 72px, 96px
- Heading line height: 1
- Body line height: 1.6

## Principles
- The display face has only capitals: keep headings to a few words and never set paragraphs in it.
- Go big: the condensed letters only look intentional from about 32 px up.
- Add a little letter spacing to the display face at smaller sizes so letters do not merge.
- Use the bold body weight for dates, prices and times so key facts stand out without the display face.

Design with the "Tall display + steady text" type pairing.
The idea: A condensed all-caps display face shouts in very little width, and a round, even sans gives the body the steadiness the display lacks.
It suits: Event and festival pages.
It suits: Sports clubs and fitness classes.
It suits: Posters and announcement banners.
Do not choose it when: Headings need lowercase or long sentences.
Do not choose it when: The page is mostly long reading.
Use Bebas Neue in weights 400 for headings.
Use Lato in weights 400 and 700 for body text.
Use only these type sizes: 15px, 17px, 22px, 32px, 48px, 72px, 96px.
Set headings at a line height of 1 and body text at 1.6.
Follow this rule: The display face has only capitals: keep headings to a few words and never set paragraphs in it.
Follow this rule: Go big: the condensed letters only look intentional from about 32 px up.
Follow this rule: Add a little letter spacing to the display face at smaller sizes so letters do not merge.
Follow this rule: Use the bold body weight for dates, prices and times so key facts stand out without the display face.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --font-heading: "Bebas Neue", sans-serif;
  --font-body: "Lato", sans-serif;
  --type-1: 15px;
  --type-2: 17px;
  --type-3: 22px;
  --type-4: 32px;
  --type-5: 48px;
  --type-6: 72px;
  --type-7: 96px;
  --leading-heading: 1;
  --leading-body: 1.6;
}

Download brief (.md)

Where it fits

Use it for

Event and festival pages
Sports clubs and fitness classes
Posters and announcement banners

Avoid it when

Headings need lowercase or long sentences
The page is mostly long reading

Principles

The display face has only capitals: keep headings to a few words and never set paragraphs in it.
Go big: the condensed letters only look intentional from about 32 px up.
Add a little letter spacing to the display face at smaller sizes so letters do not merge.
Use the bold body weight for dates, prices and times so key facts stand out without the display face.

Back to all pairings