Geometric heading + humanist body

Circle-and-line geometric headings feel modern and orderly, and a humanist body with pen-shaped curves restores the warmth and legibility geometry lacks at small sizes.

Headings: Jost
Body: Source Sans 3

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.

A library built around daylight

The reading rooms face north so the light stays soft all day. Shelves run low along the windows and rise towards the centre, leaving every desk with a view of the trees. Quiet zones and group tables are separated by a single wide staircase.

Heading in Jost 600 at 44px, line height 1.15. Body in Source Sans 3 400 at 16px, line height 1.6.

Headings

Jost

Semibold 600

Body

Source Sans 3

Regular 400
Semibold 600

The type scale

60pxA library built around daylight
44pxA library built around daylight
32pxA library built around daylight
24pxA library built around daylight
19pxA library built around daylight
16pxA library built around daylight
14pxA library built around daylight

Copy the idea

The Geometric heading + humanist body recipe — its idea, faces, scale and rules — ready to paste into a design tool or an AI assistant, or as design tokens.

# Geometric heading + humanist body — type pairing recipe

## The idea
- Circle-and-line geometric headings feel modern and orderly, and a humanist body with pen-shaped curves restores the warmth and legibility geometry lacks at small sizes.

## Use it for
- Architecture and interior studios
- Public service information
- Education and course pages

## Avoid it when
- The brand voice is playful or handmade
- Everything must feel strictly mechanical

## The faces
- Headings: Jost (@fontsource/jost), weights 600
- Body: Source Sans 3 (@fontsource/source-sans-3), weights 400 and 600

## Scale and rhythm
- Scale: 14px, 16px, 19px, 24px, 32px, 44px, 60px
- Heading line height: 1.15
- Body line height: 1.6

## Principles
- Let the geometric face set the structure: headings, navigation and big numbers.
- Let the humanist face do all reading, including captions and form help text.
- Match x-heights by eye: set the body a pixel or two larger if it looks smaller than the headings.
- Use generous, even spacing that echoes the geometric shapes of the heading face.

Design with the "Geometric heading + humanist body" type pairing.
The idea: Circle-and-line geometric headings feel modern and orderly, and a humanist body with pen-shaped curves restores the warmth and legibility geometry lacks at small sizes.
It suits: Architecture and interior studios.
It suits: Public service information.
It suits: Education and course pages.
Do not choose it when: The brand voice is playful or handmade.
Do not choose it when: Everything must feel strictly mechanical.
Use Jost in weights 600 for headings.
Use Source Sans 3 in weights 400 and 600 for body text.
Use only these type sizes: 14px, 16px, 19px, 24px, 32px, 44px, 60px.
Set headings at a line height of 1.15 and body text at 1.6.
Follow this rule: Let the geometric face set the structure: headings, navigation and big numbers.
Follow this rule: Let the humanist face do all reading, including captions and form help text.
Follow this rule: Match x-heights by eye: set the body a pixel or two larger if it looks smaller than the headings.
Follow this rule: Use generous, even spacing that echoes the geometric shapes of the heading face.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --font-heading: "Jost", sans-serif;
  --font-body: "Source Sans 3", sans-serif;
  --type-1: 14px;
  --type-2: 16px;
  --type-3: 19px;
  --type-4: 24px;
  --type-5: 32px;
  --type-6: 44px;
  --type-7: 60px;
  --leading-heading: 1.15;
  --leading-body: 1.6;
}

Download brief (.md)

Where it fits

Use it for

Architecture and interior studios
Public service information
Education and course pages

Avoid it when

The brand voice is playful or handmade
Everything must feel strictly mechanical

Principles

Let the geometric face set the structure: headings, navigation and big numbers.
Let the humanist face do all reading, including captions and form help text.
Match x-heights by eye: set the body a pixel or two larger if it looks smaller than the headings.
Use generous, even spacing that echoes the geometric shapes of the heading face.

Back to all pairings