Elegant serif + airy geometric

A refined, high-contrast garalde gives headings grace and a light geometric sans with wide letter spacing keeps the page airy and modern.

Headings: Cormorant Garamond
Body: Josefin Sans

See it live

Cormorant Garamond for headings and Josefin Sans for text, set at the pairing's own sizes and line heights. The sample text is written for this explorer.

Dinner by candlelight, seven courses, one long table

Each autumn we invite twenty guests to share a single table in the orchard. The menu follows whatever the garden offers that week, and the evening ends with warm cake and slow music under the trees.

Cormorant Garamond at 64px, line height 1.1 · Josefin Sans at 16px, line height 1.7

Headings Cormorant Garamond, weights 500, 600

500 Dinner by candlelight, seven courses, one long table

600 Dinner by candlelight, seven courses, one long table

Self-hosted from the @fontsource/cormorant-garamond package.

Body Josefin Sans, weights 400, 600

400 Each autumn we invite twenty guests to share a single table in the orchard.

600 Each autumn we invite twenty guests to share a single table in the orchard.

Self-hosted from the @fontsource/josefin-sans package.

Scale 6 steps from 14px to 64px; from 24px up in Cormorant Garamond, below in Josefin Sans

64pxDinner by candlelight, seven courses, one long table
44pxDinner by candlelight, seven courses, one long table
30pxDinner by candlelight, seven courses, one long table
20pxDinner by candlelight, seven courses, one long table
16pxDinner by candlelight, seven courses, one long table
14pxDinner by candlelight, seven courses, one long table

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.

# Elegant serif + airy geometric — type pairing recipe

## The idea

- A refined, high-contrast garalde gives headings grace and a light geometric sans with wide letter spacing keeps the page airy and modern.

## Use it for

- Weddings and events
- Boutique hotels and restaurants
- Fashion and beauty portfolios

## Avoid it when

- The page is dense with information
- Readers will scan on small, low-quality screens

## The faces

- Headings: Cormorant Garamond, weights 500, 600 (self-hosted from @fontsource/cormorant-garamond)
- Body: Josefin Sans, weights 400, 600 (self-hosted from @fontsource/josefin-sans)

## Scale and rhythm

- Scale: 14px, 16px, 20px, 30px, 44px, 64px
- Line height: 1.1 for headings, 1.7 for body text

## Principles

- Set the serif large; its delicate strokes need size
- Space small geometric labels widely and use uppercase
- Use lots of white space around both faces
- Keep paragraphs short; let headings carry the mood
- Use the serif italic for a single word of emphasis at most

Design with the "Elegant serif + airy geometric" type pairing.

The idea: A refined, high-contrast garalde gives headings grace and a light geometric sans with wide letter spacing keeps the page airy and modern.

It suits:
- Weddings and events
- Boutique hotels and restaurants
- Fashion and beauty portfolios
It is a poor fit when:
- The page is dense with information
- Readers will scan on small, low-quality screens

Use Cormorant Garamond (weights 500, 600) for headings, self-hosted from the @fontsource/cormorant-garamond package.
Use Josefin Sans (weights 400, 600) for body text, self-hosted from the @fontsource/josefin-sans package.
Use this type scale: 14px, 16px, 20px, 30px, 44px, 64px.
Set headings at a line height of 1.1 and body text at 1.7.

Follow these principles:
- Set the serif large; its delicate strokes need size
- Space small geometric labels widely and use uppercase
- Use lots of white space around both faces
- Keep paragraphs short; let headings carry the mood
- Use the serif italic for a single word of emphasis at most

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

:root {
  --font-heading: "Cormorant Garamond", serif;
  --font-body: "Josefin Sans", sans-serif;
  --type-1: 14px;
  --type-2: 16px;
  --type-3: 20px;
  --type-4: 30px;
  --type-5: 44px;
  --type-6: 64px;
  --leading-heading: 1.1;
  --leading-body: 1.7;
}

Download brief (.md)

Where it fits

Use it for

Weddings and events
Boutique hotels and restaurants
Fashion and beauty portfolios

Avoid it when

The page is dense with information
Readers will scan on small, low-quality screens

Principles

The rules that keep the two faces working as one.

Set the serif large; its delicate strokes need size
Space small geometric labels widely and use uppercase
Use lots of white space around both faces
Keep paragraphs short; let headings carry the mood
Use the serif italic for a single word of emphasis at most