Typography

Bitter for display, Onest for body and UI. Three reusable scales cover display, body, and data. Use the toggle below to compare the current pairing against the swapped pairing.

Reusable type scales for product surfaces.

Display / Bitter 400-600

Vestcove

Body / Onest 400-600

Default reading text for UI and product body copy. Onest regular weight, comfortable for property cards, evidence panels, and longer prose moments.

Display scale

Bitter Medium
Display XLAa3rem
line 1.00
--vc-display-xl-*
Maximum display size across product surfaces
Display LAa2.5rem
line 1.03
--vc-display-l-*
Page titles and major section openers
Display MAa2rem
line 1.07
--vc-display-m-*
Section headers and large card titles
Display SAa1.5rem
line 1.12
--vc-display-s-*
Panel titles and compact editorial labels

Body and UI scale

Onest Regular
Body LAa1.125rem
line 1.70
--vc-body-l-*
Intro copy and explanatory paragraphs
Body MAa1rem
line 1.65
--vc-body-m-*
Default UI and product body copy
Body SAa0.875rem
line 1.55
--vc-body-s-*
Controls, labels, tabs, chips, metadata
CaptionAa0.75rem
line 1.45
--vc-caption-*
Source notes, provenance, quiet context

Data scale

Onest Data
Metric LAa1.5rem
line 1.00
--vc-metric-l-*
Primary score and headline numbers
Metric MAa1.125rem
line 1.10
--vc-metric-m-*
Prices, rents, yields, confidence
Metric SAa0.8125rem
line 1.35
--vc-metric-s-*
Table values and compact values

Typography rules.

  • Display direction: Bitter, regular to medium, confident and app-like.
  • Body and UI direction: Onest from Google Fonts. Restrained, modern, premium, readable.
  • All body and general UI text uses Onest by default.
  • Bitter and Onest are loaded at 400, 500, and 600 via next/font/google.
  • Default body weight is regular. Use medium or semibold sparingly for functional emphasis only.
  • globals.css defines reusable display, body/UI, and data type scales. Update the stylesheet and this page together when changing product typography.
  • Active display scale caps at 3rem. Treat --vc-display-xl-size as the maximum type size for product surfaces.
  • Use Onest for prices, yields, confidence, and score outputs. Do not introduce a separate monospace font for product UI.