Foundations · Typography

Typography.

Tobias for editorial display, Haffer for functional UI, Neue Montreal Mono for clinical metadata.

01

At a glance.

Serif · Editorial

Tobias

Headlines, page titles, editorial pull-quotes. Display use only. Never below 18px.

Weights in use

300 · 300i

Sans · Functional

Haffer

Body copy, UI labels, packaging titles. Anything that needs to read at scale.

Weights in use

400 · 500 · 600

Mono · Clinical

Neue Montreal Mono

Eyebrows, metadata, packaging stamps, footnotes. Frame, not message.

Weight in use

Medium 500 only

02

Type scale.

Every token at its rendered size, grouped by family. This is the canonical scale: names, sizes, and weights match the token reference at the bottom of the page.

Tobias Editorial serif
--type-display 300 / 56–176px
Quiet authority.
--type-h1 300 / 40–72px
Always by your side.
--type-h2 300 / 40px
A new kind of women's health.
--type-editorial-italic 300i / 40–72px
Clinical Notes
--type-h3 300 / 28px
Made for every stage.
Haffer Functional sans
--type-title 400 / 42px
1st Trimester Prenatal Pack
--type-sub-header 500 / 20px
Doctor-formulated for every stage.
--type-body 400 / 16px
Doctor-formulated. Stage-specific. Clinically considered.
--type-small 400 / 14px
Dense UI labels, table cells, secondary metadata.
--type-caption 400 / 12px
*These statements have not been evaluated by the FDA.
Neue Montreal Mono Clinical metadata
--type-eyebrow 500 / 11px · .18em
stage 02 · note 04
--type-mono 500 / 13px
Net wt 18g · Lot 240315
--type-mono-sm 500 / 11px
Third-party tested · Research-backed
03

Tobias.

The editorial serif. Headlines, page titles, statistical numerals. Two weights are in use: Light for display and subsection heads, Light Italic for editorial pull-quotes and clinical-note prose. Tobias is never set above Light 300, and never used for product titles. Those belong to Haffer.

Hero / Section h1Light 300 · 56–132px · Homepage
Always by your side.
Editorial pull-quoteLight Italic 300 · 32px · Editorial
A new kind of women's health.
Editorial subsection h3Light 300 · 28px · Editorial
Made for every stage.

In context · Light 300 / 96px

Quiet Authority.
A new kind of women's health.
Never below 18px. Tobias is a display face. Below 18px its character collapses; switch to Haffer for body and UI.
04

Haffer.

The functional sans. Carries every product title and the bulk of UI copy across the e-com experience. Three weights are in use: Regular for product titles and body, Medium for accordion and section headings, SemiBold for packaging emphasis. Haffer is never set lighter than Regular or heavier than SemiBold.

PDP product titleRegular 400 · 42px · PDP buy-box h1
1st Trimester Prenatal Pack
Accordion h2Medium 500 · 20px · Pill value-props
Doctor-formulated for every stage.
Outer carton calloutSemiBold 600 · 14px tracked · outer carton
Doctor-formulated · 30-day supply

In context · Regular 400 / 42px

1st Trimester Prenatal Pack
For pregnancy weeks 0-13

A complete daily multivitamin formulated by OB/GYNs to support optimal nutrition, immune health, and brain development through every stage of pregnancy.

05

Neue Montreal Mono.

The clinical mono. Eyebrows, metadata, packaging stamps, footnotes. Medium 500 only: no light, italic, or bold. Always uppercase with .14–.22em tracking, kept small. Tiered legibility is intentional: the mono frames the composition, it doesn't carry the message.

Eyebrow · 11pxTracked .22em · uppercase
Stage 02 · Note 04
Metadata · 13pxSentence case · default tracking
Net wt 18g · Lot 240315
Footnote · 11pxCompact · fine print
Third-party tested · Research-backed

In context · Medium 500 / 11–13px

Stage 02 · Note 04
Net wt 18g · Lot 240315 · Tested 03/26
06

Global usage rules.

  • Tobias minimumNever below 18px. Below that, Tobias loses its character; switch to Haffer.
  • Haffer headlinesHaffer carries every product title. PDP buy-box h1 is Regular 400 / 42px. Accordion h2 in the pill value-props is Medium 500 / 20px. SemiBold 600 is reserved for outer carton callouts (tracked uppercase, ~14px). Never lighter than Regular or heavier than SemiBold.
  • Mono on siteUse minimally as a clinical flourish or footnote. Never for navigation, body copy, CTAs, or wayfinding. Neue Montreal Mono can flex more freely in social; on the site it's reserved for non-critical text treatments.
07

Token reference.

The full set of semantic type tokens. Use these directly via var(--type-…); values live in colors_and_type.css.

TokenFamilyWeight / SizeUse
--type-displayTobias300 / 56–176Hero display.
--type-h1Tobias300 / 40–72Page headlines.
--type-h2Tobias300 / 40Section headers.
--type-h3Tobias300 / 28Editorial subsection heads. Tobias never set above Light.
--type-editorial-italicTobias It.300i / 40–72Editorial pull-quote.
--type-titleHaffer400 / 42PDP product title. Haffer Regular at PDP buy-box scale.
--type-sub-headerHaffer500 / 20Pill value-props accordion h2.
--type-bodyHaffer400 / 16Default body.
--type-smallHaffer400 / 14Dense UI labels, table cells, secondary metadata.
--type-captionHaffer400 / 12FDA fine print, footnotes.
--type-eyebrowNeue Montreal Mono500 / 11 · .18emTracked clinical eyebrow.
--type-monoNeue Montreal Mono500 / 13Metadata, code, stamps.
--type-mono-smNeue Montreal Mono500 / 11Compact metadata.
08

Licensing.

The system's retail typefaces are licensed from Displaay (Tobias, Haffer) and Pangram Pangram (Neue Montreal Mono). Confirm the seat and web-font licenses cover the deployment before shipping any client-facing work.