← All Pages PLP + header typography lab  ·  Retail sans trials + product grid titles
VK Build Family Style Guide All Pages Page Layouts PLP Fonts Demo Dashboard
Category · Product listing · Nav chrome

Compare retail header fonts and PLP product titles in one place

Part 1 — Header: DM Sans (today) next to common retail sans options — Roboto (already used on the prototype wordmark in places), Inter, and Source Sans 3 — same layout, different voice. Part 2 — PLP: the standalone category prototype grid uses DM Sans 14px / 500; featured row uses Playfair 17px for names.

Prices and strike-throughs stay in DM Sans (or the chosen UI sans) — never display serif on numbers. Category H1 samples below the mini nav use either Playfair (VK default) or the retail sans in that column for apples-to-apples comparison.

Locked rules

What does not change across variants

  • Pricing: DM Sans, weight 500, var(--near-black) — never Playfair on numbers.
  • Brand line under product: 12px mid grey — same across PLP columns.
  • Badges: same uppercase / tracking pattern as the category PLP grid.

What you are choosing

Product name line only

  • A — Grid default: highest scan speed; neutral commerce tone.
  • B — Featured row: matches homepage / editorial product cards; more “boutique” in longer titles.
  • C — Display compact: Playfair one step smaller for 4-up grids without switching to full sans.

Part 1 · Nav chrome + category H1

Same layout: wordmark, four parents, Deals accent, Talk to an Expert. Column 1 keeps Playfair on the category H1 (VK default). Columns 2–4 set the H1 in the retail sans so you can judge catalog tone in one scan.

DM Sans
Current UI sans · category H1 Playfair 34/600
Talk to an Expert
Home / Microphones

Microphones

Roboto
Prototype wordmark family · H1 Roboto 700 34px
Talk to an Expert
Home / Microphones

Microphones

Inter
Common high-conversion retail UI · H1 Inter 700 34px
Talk to an Expert
Home / Microphones

Microphones

Source Sans 3
Open retail / Adobe stack · H1 Source Sans 3 700 34px
Talk to an Expert
Home / Microphones

Microphones

SEO / GEO: H1 text is identical across columns (Microphones) — this block is for visual and conversion tone only. Pricing and cart chrome stay DM Sans in production until tokens change.

Three columns · identical products · different name fonts

Each column repeats the same four placeholder products so differences read clearly. Image blocks are neutral placeholders.

Variant A
Grid PLP
Matches .grid-product-name in the category tab — DM Sans 14px / 500.
Image
New
U 87 Ai Studio Set
Neumann
$3,595
Image
Used
C 414 XLS Condenser
AKG
$699 $899
Image
Sale
SM7dB Active Dynamic
Shure
$449 $499
Variant B
Featured row
Matches .product-card-name in the category tab — Playfair 17px.
Image
New
U 87 Ai Studio Set
Neumann
$3,595
Image
Used
C 414 XLS Condenser
AKG
$699 $899
Image
Sale
SM7dB Active Dynamic
Shure
$449 $499
Variant C
Playfair compact
Trial pattern — Playfair 15px / 500 for dense 4-up grids (not in prototype yet).
Image
New
U 87 Ai Studio Set
Neumann
$3,595
Image
Used
C 414 XLS Condenser
AKG
$699 $899
Image
Sale
SM7dB Active Dynamic
Shure
$449 $499

Long title stress test

Same long product name in all three columns. Watch line breaks and vertical rhythm.

A · Grid
Image
Open Box
WA-47JR Vintage Series Large Diaphragm Tube Condenser Microphone
Warm Audio
$599
B · Featured
Image
Open Box
WA-47JR Vintage Series Large Diaphragm Tube Condenser Microphone
Warm Audio
$599
C · Compact
Image
Open Box
WA-47JR Vintage Series Large Diaphragm Tube Condenser Microphone
Warm Audio
$599