Guidelines

Typography

Three families, as coach.com sets them: Neue Helvetica Extended for the editorial voice, Helvetica for the interface, Garamond for fine print. The files are the licensed originals, converted to woff2 and served through next/font.

Families

Each family has one job. When text does two jobs, it is two pieces of text.

Linotype · display

Helvetica Neue LT Pro Extended

The editorial voice. 73 Bold Extended sets headlines; 53 Extended sets story titles, notes and links.

--font-display → var(--font-helvetica-neue-lt-pro-extended)

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@€$

Linotype · sans

Helvetica LT Pro

The interface. Navigation in tracked caps, category labels, body copy, buttons.

--font-sans → var(--font-helvetica-lt-pro)

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@€$

Monotype · serif

Garamond MT Pro

Fine print. Footer links, the newsletter disclaimer, search, mega menu links.

--font-serif → var(--font-garamond-mt-pro)

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@€$

Cuts

Every cut shipped in fonts/, with its foundry name. Helvetica LT Pro has no medium: interface text is Roman or Bold.

Helvetica Neue LT Pro Extended

  • 43 Light Extended · 300The Fall 2026 Runway Collection
  • 53 Extended · 400The Fall 2026 Runway Collection
  • 63 Medium Extended · 500The Fall 2026 Runway Collection
  • 73 Bold Extended · 700The Fall 2026 Runway Collection

Helvetica LT Pro

  • Light · 300The Fall 2026 Runway Collection
  • Roman · 400The Fall 2026 Runway Collection
  • Oblique · 400 italicThe Fall 2026 Runway Collection
  • Bold · 700The Fall 2026 Runway Collection

Garamond MT Pro

  • Regular · 400The Fall 2026 Runway Collection
  • Italic · 400 italicThe Fall 2026 Runway Collection
  • Bold · 700The Fall 2026 Runway Collection

Type scale

Ten roles, each a Tailwind utility defined in app/globals.css. Components name the role (type-title-3), never the size. Values below are read from the stylesheet.
type-display

Find your courage

Family
Helvetica Neue LT Pro Extended
Weight
700
Size
40–96px, fluid
Leading
1
Tracking
-0.02em
Case
As written
Use
Statements on the intro and campaign openers. Rare.
type-title-1

Explore the world of Coach

Family
Helvetica Neue LT Pro Extended
Weight
700
Size
24–28px, fluid
Leading
1.2
Tracking
0.015em
Case
As written
Use
Page and section titles: Explore the world of Coach.
type-title-2

We're teaming up with Spotify to bring our Fall 2026 campaign to life

Family
Helvetica Neue LT Pro Extended
Weight
400
Size
20px
Leading
1.3
Tracking
0.012em (0.24px)
Case
As written
Use
Notes in a band, the hero's title on mobile, text cards on mobile.
type-title-3

How to Style Bags with Chain Accents

Family
Helvetica Neue LT Pro Extended
Weight
400
Size
15px
Leading
1.4
Tracking
0.012em (0.18px)
Case
As written
Use
Story titles on cards, band headings.
type-body

Style shapes your story. Music helps you tell it.

Family
Helvetica LT Pro
Weight
400
Size
14px
Leading
1.6
Tracking
0.0125em (0.18px)
Case
As written
Use
Running text, category rail on desktop, form fields.
type-body-sm

Soft shapes, hard shine. Metallic outerwear meets suede bags made to be carried every day.

Family
Helvetica LT Pro
Weight
400
Size
12px
Leading
1.45
Tracking
0.015em (0.18px)
Case
As written
Use
Excerpts, captions, the country and stores links.
type-eyebrow

Runway

Family
Helvetica LT Pro
Weight
400
Size
10px
Leading
1.2
Tracking
0.1em (1px)
Case
Uppercase
Use
Story categories, legal links, small labels.
type-nav

Find your courage

Family
Helvetica LT Pro
Weight
400
Size
12px
Leading
1.15
Tracking
0.104em (1.25px)
Case
Uppercase
Use
Primary navigation and buttons.
type-link

Continue reading

Family
Helvetica Neue LT Pro Extended
Weight
400
Size
12px
Leading
1.4
Tracking
0.015em (0.18px)
Case
As written
Use
Continue reading, Learn more: every text link.
type-fine

You are signing up to receive Coach emails.

Family
Garamond MT Pro
Weight
400
Size
14px
Leading
1.5
Tracking
normal
Case
As written
Use
Footer links, legal copy, the newsletter disclaimer.

Measured on coach.com

The live site's computed styles, which the scale above follows. The prototype sizes story titles up a step (15px) to hold the four-column grid at 1440.
ElementCutSize / leadingTrackingCase
Primary navigationHelvetica LT Pro Roman12px1.25pxUppercase
Page title (H1)Neue Helvetica 73 Bold Extended24px / 28.8px0.4pxAs written
Story text and namesNeue Helvetica 53 Extended14px / 19.6px0.2pxAs written
Links (Discover the campaign)Neue Helvetica 53 Extended14px0.2pxAs written
Search, footerGaramond MT Pro Regular16px / 24pxNormalAs written

Rules

  • Uppercase only through the nav, eyebrow and button styles, which add tracking. Never type in caps.
  • Extended is for reading at a glance: titles, notes, links. Long text is set in Helvetica.
  • Garamond stays small. It is the footnote, not the headline.
  • No italics for emphasis in interface copy. Oblique exists for quoted titles in body text.