Skip to content
Browse foundations

Foundation

Typography

See the reading experience first. Inter carries human language; JetBrains Mono identifies information that is operational by nature.

01 / The decision

One voice, two clear jobs

Use Inter Variable for every idea, instruction, label, and action people must read. Use JetBrains Mono Variable only when the content itself is technical.

Human language · Inter Variable

Build clearly. Operate confidently.

Inter carries the ideas, instructions, navigation, and decisions people need to understand.

Operational data · JetBrains Mono

Illustrative data
Timestamp
2026-08-05 12:42:08 UTC
Request ID
req_84A2F6
API path
POST /v1/orders

02 / See it in use

The same identity at two operating rhythms

Editorial expression creates emphasis and momentum. Product expression stays compact and task-led. Both preserve the same typographic voice.

Editorial specimenIllustrative evidence label

Run what builders cannot afford to improvise.

Create a differentiated marketplace experience while the connected operational foundation stays legible, measurable, and ready for the work behind it.

  1. 01DisplayThe main operating idea
  2. 02Body largeThe narrative and consequence
  3. 03UI labelThe concrete next action
  4. 04Operational labelShort evidence metadata only

Marketplace operations

production / overview

Illustrative data

Heading · product content

Service health

Readable content remains Inter even inside a technical product.

ServiceStatusUpdatedRequest ID
Ordering.co APIOperational12:42:08 UTCreq_84A2F6
Catalog syncNeeds review12:39:51 UTCreq_84A1D9

Operational data · mono, tabular where alignment changes

03 / How it works

Hierarchy follows the job

Display and heading establish the idea. Body explains it. Product content supports the task. UI labels name actions. Operational data identifies the machine-readable detail.

Display and heading

Use decisive weight, compact leading, and restrained negative tracking for a clear editorial idea.

Body and product content

Keep reading text in Inter, with comfortable leading and a measure that survives zoom and narrow viewports.

UI label and operational data

Use sentence case for actions. Switch to mono only for paths, methods, timestamps, IDs, code, and brief values.

04 / Use & avoid

Mono means something

JetBrains Mono is a semantic signal, not a shortcut for making a composition look technical.

Use

2026-08-05 12:42 UTC

POST /v1/orders

ord_84A2F6

latency_ms

Timestamps, identifiers, paths, code, and brief operational values.

Avoid

RUN YOUR MARKETPLACE WITH TOTAL OPERATIONAL CONFIDENCE

Explore the platform

Paragraphs, headlines, navigation, and buttons. Mono is not decorative technical texture.

05 / Adaptation

Scale the composition, not the reader’s effort

The same hierarchy must remain legible on desktop, at 320px, and at 200% text size without clipping or forced tracking.

Desktop composition

System note

The hierarchy survives the viewport.

Headlines wrap naturally, body measure remains readable, and labels never require tighter tracking to fit.

320px content field

System note

The hierarchy survives the viewport.

Headlines wrap naturally, body measure remains readable, and labels never require tighter tracking to fit.

Sentence case

Use sentence case for headings, labels, navigation, and buttons.

Stable numerals

Use tabular numerals for changing operational values when alignment helps comparison.

Tracking boundary

Do not tighten body, labels, or controls to force content into a fixed width. Let text wrap or the layout adapt.

06 / Technical reference

Implementation detail, when you need it

The examples above teach the behavior. Open the reference for font delivery, exact tokens, and production rules.

Font files, scale, and tokens

Delivery

Inter Variable and JetBrains Mono Variable are self-hosted, versioned with the guidelines, and licensed under SIL OFL 1.1. No runtime request to Google Fonts is required.

Implementation

Keep mono ligatures off by default. Use no more than three prominent hierarchy levels in one viewport, and test all content at 200% text size.
font.family.sans

--od-font-sans

'Ordering Inter Local', 'Inter Variable', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
font.family.mono

--od-font-mono

'Ordering JetBrains Mono Local', 'JetBrains Mono Variable', 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace
font.variant.monoLigatures

--od-font-mono-ligatures

none
font.weight.regular

--od-font-weight-regular

400
font.weight.medium

--od-font-weight-medium

500
font.weight.semibold

--od-font-weight-semibold

600
font.weight.bold

--od-font-weight-bold

700
font.weight.extrabold

--od-font-weight-extrabold

800
font.size.1

--od-font-size-1

0.75rem
font.size.2

--od-font-size-2

0.875rem
font.size.3

--od-font-size-3

1rem
font.size.4

--od-font-size-4

1.125rem
font.size.5

--od-font-size-5

1.375rem
font.size.6

--od-font-size-6

1.75rem
font.size.7

--od-font-size-7

2.25rem
font.size.8

--od-font-size-8

3rem
font.size.9

--od-font-size-9

clamp(3.5rem, 8vw, 7.5rem)
font.size.productUi

--od-font-size-product-ui

13px
font.size.productContent

--od-font-size-product-content

14px
font.lineHeight.tight

--od-line-tight

1.04
font.lineHeight.heading

--od-line-heading

1.15
font.lineHeight.body

--od-line-body

1.6
font.tracking.tight

--od-tracking-tight

-0.045em
font.tracking.heading

--od-tracking-heading

-0.025em
font.tracking.label

--od-tracking-label

0.08em