FoundationsShipped

Typography

Onest carries display and body alike. Redaction 35 italic is the accent - on single words, never a whole block. Mono is for labels and numbers.

Used onEvery page

Families

--sansOnest - display & body
Variable 400..600 from Google Fonts. A subrange request: 7 @font-face rules instead of 21.

--serifRedaction 35 - accents
Italic 400 only, from jsDelivr (OFL). The number is how destroyed the face is; cleaner is downward, and 35 is settled.

--monoui-monospace - labels, numbers, code
The system stack. Uppercase, tracked, 12px.

Scale

Seven steps and nothing between them. 18px is the floor for anything meant to be read; the 12px mono label sits outside the scale because it is chrome, not copy.

--t-head-lg64 Page title

--t-head56 Section heading

--t-sub-lg40 Case title

--t-sub-md32 Beat title

--t-sub24 Card title, lede

--t-body18 Body copy, the reading floor

--t-ui14 Dense UI: rails, menus, docs

--t-label12 Mono label

Show code

<div class="d-spec"><code>--t-head-lg</code><span class="h1">64 Page title</span></div>
<div class="d-spec"><code>--t-head</code><span class="h2">56 Section heading</span></div>
<div class="d-spec"><code>--t-sub-lg</code><span class="h3">40 Case title</span></div>
<div class="d-spec"><code>--t-sub-md</code><span class="h3 d-md">32 Beat title</span></div>
<div class="d-spec"><code>--t-sub</code><span class="h4">24 Card title, lede</span></div>
<div class="d-spec"><code>--t-body</code><span class="prose">18 Body copy, the reading floor</span></div>
<div class="d-spec"><code>--t-ui</code><span class="small">14 Dense UI: rails, menus, docs</span></div>
<div class="d-spec"><code>--t-label</code><span class="label">12 Mono label</span></div>

Stepping down

Role	Desktop	≤ 900	≤ 640
h1	64	56	40
h2	56	40	32
h3 (case title)	40	32	24
Pull quote	40	24	24

At 640, h1 and h2 were both 40px once, which flattened the two; h2 now steps to 32 so the pair stays apart.

Headings

Selling through a single product page

What the data said

Show code

<h1 class="h1">Selling through a <em>single</em> product page</h1>
<h2 class="h2">What the <em>data</em> said</h2>

Text

A lede sits one step under the heading at 24px, in --mut.

Body copy is 18px at line-height 1.7, set in --ink-body with a 62ch measure. Inline strong goes to ink at 600 - at the heading weight of 450 it would stop reading as emphasis.

Mono label · 12px · .14em

Show code

<p class="lede">A lede sits one step under the heading at 24px, in --mut.</p>
<p class="prose">Body copy is 18px at line-height 1.7, set in <code class="inline">--ink-body</code> with a 62ch measure. <strong>Inline strong</strong> goes to ink at 600 - at the heading weight of 450 it would stop reading as emphasis.</p>
<span class="label">Mono label · 12px · .14em</span>

Weights

Token	Value	Role	Status
`--w-body`	`400`	Body and Redaction accents.	Shipped
`--w-head`	`450`	Every heading and heading-ish <b>. A real instance of Onest's variable axis.	Shipped
`--w-strong`	`600`	Inline <strong> and the wordmark only.	Shipped

450 is a genuine instance of Onest's variable axis, not a synthesised in-between: a width probe gives 746.25 / 749.77 / 753.16 / 759.69px at 400 / 450 / 500 / 600, strictly monotonic.

Rules

Accent one word per heading with Redaction - the word the sentence turns on.
Use tabular numbers for anything that counts.
Prove a webfont loads with a width probe, never by eye.

Don't

Set a whole paragraph or pull quote in Redaction - the pull quote is Onest italic.
Ask Redaction for 500 or 600: only italic 400 is declared, anything else synthesises.
Use clamp() for type.

All type tokens

Token	Value	Role	Status
`--sans`	`"Onest",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif`	Display and body alike. Variable 400..600 from Google Fonts.	Shipped
`--serif`	`"Redaction 35",Georgia,serif`	Italic 400 only, for <em> accents in headings. Never a whole block.	Shipped
`--mono`	`ui-monospace,"SF Mono",Menlo,monospace`	Uppercase labels, numbers in tools, code.	Shipped
`--t-label`	`12px`	Mono labels. Chrome, not copy.	Shipped
`--t-ui`	`14px`	Dense UI: tool rails, menus, docs sidebar.	In tools
`--t-body`	`18px`	The floor for anything meant to be read.	Shipped
`--t-sub`	`24px`	Lede, card titles, h2 at 640.	Shipped
`--t-sub-md`	`32px`	Case h3 at 900, beat titles.	Shipped
`--t-sub-lg`	`40px`	Case h3, metrics, pull quotes, h2 at 900.	Shipped
`--t-head`	`56px`	Section h2.	Shipped
`--t-head-lg`	`64px`	Page h1.	Shipped
`--w-body`	`400`	Body and Redaction accents.	Shipped
`--w-head`	`450`	Every heading and heading-ish <b>. A real instance of Onest's variable axis.	Shipped
`--w-strong`	`600`	Inline <strong> and the wordmark only.	Shipped