Tech grotesk + neutral sans

Two sans serifs with different characters: a quirky, technical grotesk for headings and a neutral workhorse for text, so the page feels engineered but stays easy to read.

Headings: Space Grotesk
Body: Inter

See it live

Space Grotesk for headings and Inter for text, set at the pairing's own sizes and line heights. The sample text is written for this explorer.

Ship the small fix today, the big one next week

The new release cuts build times by a third and makes every error message point at the line that caused it. Upgrade in one command, roll back in another, and read the changelog in under two minutes.

Space Grotesk at 60px, line height 1.15 · Inter at 18px, line height 1.55

Headings Space Grotesk, weights 500, 700

500 Ship the small fix today, the big one next week

700 Ship the small fix today, the big one next week

Self-hosted from the @fontsource/space-grotesk package.

Body Inter, weights 400, 500

400 The new release cuts build times by a third and makes every error message point at the line that caused it.

500 The new release cuts build times by a third and makes every error message point at the line that caused it.

Self-hosted from the @fontsource/inter package.

Scale 7 steps from 13px to 60px; from 24px up in Space Grotesk, below in Inter

60pxShip the small fix today, the big one next week
44pxShip the small fix today, the big one next week
32pxShip the small fix today, the big one next week
24pxShip the small fix today, the big one next week
18pxShip the small fix today, the big one next week
15pxShip the small fix today, the big one next week
13pxShip the small fix today, the big one next week

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.

# Tech grotesk + neutral sans — type pairing recipe

## The idea

- Two sans serifs with different characters: a quirky, technical grotesk for headings and a neutral workhorse for text, so the page feels engineered but stays easy to read.

## Use it for

- Software products and dashboards
- Developer tools and documentation
- Start-up landing pages

## Avoid it when

- The brand is traditional or heritage-led
- The content is long literary prose

## The faces

- Headings: Space Grotesk, weights 500, 700 (self-hosted from @fontsource/space-grotesk)
- Body: Inter, weights 400, 500 (self-hosted from @fontsource/inter)

## Scale and rhythm

- Scale: 13px, 15px, 18px, 24px, 32px, 44px, 60px
- Line height: 1.15 for headings, 1.55 for body text

## Principles

- Contrast the two sans faces through weight and size, not colour alone
- Use the grotesk for headings, numbers and key figures
- Keep body text in the neutral sans at a regular weight
- Avoid mixing the two inside one line
- Use tabular figures in the body face for data

Design with the "Tech grotesk + neutral sans" type pairing.

The idea: Two sans serifs with different characters: a quirky, technical grotesk for headings and a neutral workhorse for text, so the page feels engineered but stays easy to read.

It suits:
- Software products and dashboards
- Developer tools and documentation
- Start-up landing pages
It is a poor fit when:
- The brand is traditional or heritage-led
- The content is long literary prose

Use Space Grotesk (weights 500, 700) for headings, self-hosted from the @fontsource/space-grotesk package.
Use Inter (weights 400, 500) for body text, self-hosted from the @fontsource/inter package.
Use this type scale: 13px, 15px, 18px, 24px, 32px, 44px, 60px.
Set headings at a line height of 1.15 and body text at 1.55.

Follow these principles:
- Contrast the two sans faces through weight and size, not colour alone
- Use the grotesk for headings, numbers and key figures
- Keep body text in the neutral sans at a regular weight
- Avoid mixing the two inside one line
- Use tabular figures in the body face for data

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

:root {
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --type-1: 13px;
  --type-2: 15px;
  --type-3: 18px;
  --type-4: 24px;
  --type-5: 32px;
  --type-6: 44px;
  --type-7: 60px;
  --leading-heading: 1.15;
  --leading-body: 1.55;
}

Download brief (.md)

Where it fits

Use it for

Software products and dashboards
Developer tools and documentation
Start-up landing pages

Avoid it when

The brand is traditional or heritage-led
The content is long literary prose

Principles

The rules that keep the two faces working as one.

Contrast the two sans faces through weight and size, not colour alone
Use the grotesk for headings, numbers and key figures
Keep body text in the neutral sans at a regular weight
Avoid mixing the two inside one line
Use tabular figures in the body face for data