Bold grotesk + plain sans

Two sans-serifs that differ in character, not category: a quirky, squared-off grotesk for headings over a soft, plain sans for reading.

Headings: Space Grotesk
Body: DM Sans

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.

Ship the small thing first

Start with one screen that does one job well. Put it in front of five people, watch where they pause, and fix that before adding anything new. A narrow tool that people trust beats a wide one they have to learn.

Heading in Space Grotesk 700 at 48px, line height 1.05. Body in DM Sans 400 at 16px, line height 1.55.

Headings

Space Grotesk

Bold 700

Body

DM Sans

Regular 400
Medium 500

The type scale

64pxShip the small thing first
48pxShip the small thing first
32pxShip the small thing first
24pxShip the small thing first
18pxShip the small thing first
16pxShip the small thing first
14pxShip the small thing first

Copy the idea

The Bold grotesk + plain sans recipe — its idea, faces, scale and rules — ready to paste into a design tool or an AI assistant, or as design tokens.

# Bold grotesk + plain sans — type pairing recipe

## The idea
- Two sans-serifs that differ in character, not category: a quirky, squared-off grotesk for headings over a soft, plain sans for reading.

## Use it for
- Software product pages
- Start-up landing pages
- Developer tool documentation home pages

## Avoid it when
- The brand needs warmth or tradition
- The audience expects a formal, institutional tone

## The faces
- Headings: Space Grotesk (@fontsource/space-grotesk), weights 700
- Body: DM Sans (@fontsource/dm-sans), weights 400 and 500

## Scale and rhythm
- Scale: 14px, 16px, 18px, 24px, 32px, 48px, 64px
- Heading line height: 1.05
- Body line height: 1.55

## Principles
- Let the heading face carry the personality; keep the body face plain and never mix their roles.
- Set large headings with slightly negative letter spacing so the squared shapes read as one block.
- Use the medium body weight for buttons and labels instead of reaching for the heading face.
- Keep one accent of contrast: size, not extra weights, separates heading levels.

Design with the "Bold grotesk + plain sans" type pairing.
The idea: Two sans-serifs that differ in character, not category: a quirky, squared-off grotesk for headings over a soft, plain sans for reading.
It suits: Software product pages.
It suits: Start-up landing pages.
It suits: Developer tool documentation home pages.
Do not choose it when: The brand needs warmth or tradition.
Do not choose it when: The audience expects a formal, institutional tone.
Use Space Grotesk in weights 700 for headings.
Use DM Sans in weights 400 and 500 for body text.
Use only these type sizes: 14px, 16px, 18px, 24px, 32px, 48px, 64px.
Set headings at a line height of 1.05 and body text at 1.55.
Follow this rule: Let the heading face carry the personality; keep the body face plain and never mix their roles.
Follow this rule: Set large headings with slightly negative letter spacing so the squared shapes read as one block.
Follow this rule: Use the medium body weight for buttons and labels instead of reaching for the heading face.
Follow this rule: Keep one accent of contrast: size, not extra weights, separates heading levels.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --type-1: 14px;
  --type-2: 16px;
  --type-3: 18px;
  --type-4: 24px;
  --type-5: 32px;
  --type-6: 48px;
  --type-7: 64px;
  --leading-heading: 1.05;
  --leading-body: 1.55;
}

Download brief (.md)

Where it fits

Use it for

Software product pages
Start-up landing pages
Developer tool documentation home pages

Avoid it when

The brand needs warmth or tradition
The audience expects a formal, institutional tone

Principles

Let the heading face carry the personality; keep the body face plain and never mix their roles.
Set large headings with slightly negative letter spacing so the squared shapes read as one block.
Use the medium body weight for buttons and labels instead of reaching for the heading face.
Keep one accent of contrast: size, not extra weights, separates heading levels.

Back to all pairings