Page 03.00Onshelf · Brand Guidelines · v1.0

onshelf.§03 Typography

Section 03

Typography.

One typeface family. Two roles. Inter Display for headlines that command attention. Inter for body copy that stays out of the way.

§03 Typography · Cover03.00

Page 03.01Onshelf · Brand Guidelines · v1.0

onshelf.§03 Typography

Display

Inter Display.

700 weight · -0.04em tracking · headlines, hero text, stat numbers, wordmark.

Body

Inter Regular & Medium — body copy that gets out of the way.

400 for paragraphs · 500 for UI labels, nav, card titles.

Availability

Google Fonts (free). Self-host WOFF2 for web. Variable font preferred.

Fallback stack

'Inter', 'Inter Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif

§03 Typography · Family03.01

Page 03.02Onshelf · Brand Guidelines · v1.0

onshelf.§03 Typography

Scale

Eleven levels. One rhythm.

Level	Size (px / rem)	Wt	Track	LH	Font	Example
Display	96 / 6rem	700	-0.04em	1.0	Inter Display	Direct-to-Retail.
H1	64 / 4rem	700	-0.04em	1.05	Inter Display	Get your brand onshelf.
H2	48 / 3rem	700	-0.03em	1.1	Inter Display	How it works
H3	36 / 2.25rem	700	-0.02em	1.15	Inter Display	100+ retail channels
H4	24 / 1.5rem	700	-0.02em	1.2	Inter Display	Compliance built in
H5	20 / 1.25rem	600	-0.01em	1.3	Inter	Southeast Asia distribution
Body L	18 / 1.125rem	400	0em	1.6	Inter	Operators, not consultants.
Body	16 / 1rem	400	0em	1.6	Inter	Nine warehouses. Five regions.
Small	14 / 0.875rem	400–500	0em	1.5	Inter	UI labels, metadata
Caption	12 / 0.75rem	500	0.02em	1.4	Inter	Image captions, legal
Stat #	48–96	700	-0.04em	1.0	Inter Display	100+.

Tracking tightens as size increases. Line-height loosens as size decreases. No exceptions.

§03 Typography · Scale03.02

Page 03.03Onshelf · Brand Guidelines · v1.0

onshelf.§03 Typography

Headings

Declare. Don't explain.

Get your brand onshelf. Everywhere.

Don't

We Help Global Brands Sell Their Products Directly to Retail Partners

9 warehouses. 5 regions. 1 platform.

Don't

Our Comprehensive Global Logistics Infrastructure

· Tracking tightens with size: -0.04em Display/H1, -0.03em H2, -0.02em H3/H4.
· Mid-sentence line breaks on hero H1s are encouraged.
· Sentence case always. Never Title Case.
· Maximum headline length: 8 words. Shorter is better.

§03 Typography · Heading rules03.03

Page 03.04Onshelf · Brand Guidelines · v1.0

onshelf.§03 Typography

Body copy

Built to be read.

Onshelf moves consumer brands from manufacturer to retail shelf without the middlemen, the spreadsheets, or the surprise fees. Operators built it.

Nine distribution centers across SEA, GCC, ANZ, and the US. Compliance baked in. Numbers we'll show you on demand.

Supporting copy lives one shade lighter. Metadata lives lighter still.

Caption · 12px · #888888 · used for image notes and legal.

Rules

· LH: 1.6 body · 1.5 small · 1.4 caption
· Max measure: 65–75ch (~680px)
· Paragraph gap: 1em. No indents.
· 400 paragraphs · 500 inline emphasis
· Three-sentence rule. Never more.
· Body #0B0F0E
· Supporting #555555
· Metadata #888888

§03 Typography · Body03.04

Page 03.05Onshelf · Brand Guidelines · v1.0

onshelf.§03 Typography

Stat numbers

The numbers carry the story.

100+

Retail channels

Distribution centers

Regions live

Anatomy

Number: Inter Display Bold, 48–96px, ink, -0.04em.
Underline: 4px tall, 48px wide, #C6FF3D, centered, 8px below baseline.
Label: Inter Medium 14px, #666666, 10px below underline.

Web animation

Count-up from 0 on scroll-into-view. 800ms, ease-out. Underline draws left-to-right in the final 200ms.

§03 Typography · Stats03.05

Page 03.06Onshelf · Brand Guidelines · v1.0

onshelf.§03 Typography

Components

Eyebrow & pull quote.

Eyebrow chip

How it works

Three steps to every shelf.

· BG #C6FF3D · text #0B0F0E
· Inter Bold 700, 11px, uppercase, tracking 0.08em
· Padding 5/14px · radius 100px
· Sits 16–20px above the headline

Pull quote

Onshelf put us in 600 stores across three regions in nine months. The spreadsheets are gone.

VP Sales · Global FMCG brand

· Quote mark: Georgia 72px, #C6FF3D, top-left decorative
· Text: Inter Italic 20px / 1.5, ink
· Attribution: Inter Medium 13px, #888888, lime dot prefix
· Left padding 36px to clear the mark

§03 Typography · Components03.06

Page 03.07Onshelf · Brand Guidelines · v1.0

onshelf.§03 Typography

Dev reference

Ship it, don't redraw it.

:root {
  --font-display: 'Inter Display', 'Inter', -apple-system, sans-serif;
  --font-body:    'Inter', 'Inter Display', -apple-system, sans-serif;

  --fs-display: 6rem;      --lh-display: 1.0;   --tr-display: -0.04em;
  --fs-h1:      4rem;      --lh-h1:      1.05;  --tr-h1:      -0.04em;
  --fs-h2:      3rem;      --lh-h2:      1.1;   --tr-h2:      -0.03em;
  --fs-h3:      2.25rem;   --lh-h3:      1.15;  --tr-h3:      -0.02em;
  --fs-h4:      1.5rem;    --lh-h4:      1.2;   --tr-h4:      -0.02em;
  --fs-h5:      1.25rem;   --lh-h5:      1.3;   --tr-h5:      -0.01em;
  --fs-body-l:  1.125rem;  --lh-body:    1.6;   --tr-body:     0;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;  --lh-sm:      1.5;
  --fs-cap:     0.75rem;   --lh-cap:     1.4;   --tr-cap:      0.02em;
}
.h1 { font: 700 var(--fs-h1)/var(--lh-h1) var(--font-display); letter-spacing: var(--tr-h1); }
.body { font: 400 var(--fs-body)/var(--lh-body) var(--font-body); color: #0B0F0E; max-width: 70ch; }
.stat { font: 700 clamp(3rem,8vw,6rem)/1 var(--font-display); letter-spacing: -0.04em; }

Load

Variable WOFF2, self-hosted, preloaded in <head>.

Features

font-feature-settings: "ss01","cv11","tnum" on stats.

Render

text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased.

§03 Typography · Reference03.07