06

Type

Three typefaces, fourteen tokens. Tartuffo for display, Roobert for body and UI, Roboto Mono for labels and metadata. The scale is fixed. The tokens are non-negotiable.

Typography provenance

Three typefaces.
Three distinct voices.

Visualist uses three typefaces, each selected for a specific character and personality. Each maps to one of the three brand attributes through the same design heritage logic as the colors and the geometric forms. The three typefaces together hold the same three-way tension as the attributes: each has a distinct voice, and none works without the other two.

Aa
Tartuffo
A romantic, editorial serif with calligraphic origins. Graceful contrast between thick and thin strokes, warmth at large display sizes. Used for hero titles and brand moments where Visualist needs to make a statement. Its character maps to Refined: considered, elegant, and precise: an editorial sensibility that feels deliberate rather than decorated. Light and Thin weights only in marketing contexts.
Display · Refined
Aa
Roobert
A chic, humanist sans-serif with an edge. Clean and confident without being generic. The primary workhorse: headlines at smaller scales, body text, labels, buttons, and UI copy. Its character maps to Dynamic: versatile and assured, with enough individuality to avoid the predictable. The majority of Visualist's written communication is set in Roobert.
Body · Dynamic
Aa
Roboto Mono
Modern, precise, and geometric. A monospaced typeface with a strong structured presence. Used for technical contexts, data display, captions, and labels. Its character maps to Trustworthy: reliable, structured, and grounded: the precision layer that anchors the warmth of Tartuffo and Roobert. Negative tracking at all sizes is non-negotiable.
Technical · Trustworthy
Typography

Three typefaces. Fourteen tokens.

Tartuffo for display: large, editorial, brand-defining. Roobert for body and UI: the workhorse. Roboto Mono for labels, metadata, and technical contexts: precision and structure. The tokens below are the complete scale. Nothing outside this table should appear in Visualist output.

The product app uses Instrument Serif, Instrument Sans, and Roboto Mono: the three closest commercially available equivalents. Sizes and weights align at the body and mono layers so that moving between product and marketing surfaces feels continuous, not jarring. Display diverges intentionally: Tartuffo at editorial scale is a brand moment the product UI never needs to match.

The type scale
Tartuffo — Display Hero headlines, chapter titles, campaign statements. Never below 40px. Light and Thin weights only in marketing.
Display XLarge
Tartuffo · Light 300
80px · lh 1.0 · −2% tracking
≈ Product: no equivalent — editorial only
Scale
your taste.
Display Large
Tartuffo · Light 300
56px · lh 1.02 · −2.5% tracking
≈ Product: no equivalent
The OS that remembers.
Display Medium
Tartuffo · Light 300
42px · lh 1.1 · −2% tracking
≈ Product: Display XLarge (40px Serif)
Three forces. Always present.
Display Small
Tartuffo · Light 300
30px · lh 1.15 · −2% tracking
≈ Product: Display Large (32px Serif)
The OS that remembers your taste.
Display XSmall
Tartuffo · Light 300
22px · lh 1.2 · −1% tracking
≈ Product: Display Medium (24px Serif)
Scale your taste, not your time.
Roobert — Body and UI Body text, subheadings, captions, UI labels. The workhorse. Regular weight throughout — no bold.
Body XLarge
Roobert · Regular 400
22px · lh 1.35 · 0 tracking
≈ Product: Display Small (20px Serif)
Vai holds the context of every project.
Body Large
Roobert · Regular 400
18px · lh 1.7 · 0 tracking
≈ Product: Body Large (17px Sans)
Chapter introductions and hero sublines. The first paragraph after a title. Used only when the content justifies the scale.
Body Medium
Roobert · Light 300
16px · lh 1.8 · 0 tracking
≈ Product: Body Medium (15px Sans)
The default body size. Used for all prose, rule descriptions, section copy, and running text. Generous line height is not optional. It carries the same refinement as white space in layout.
Body Small
Roobert · Light 300
14px · lh 1.75 · 0 tracking
≈ Product: Body Small (13px Sans)
Secondary body. Rule text within vi-sections, card descriptions, supporting copy within components. Not the primary reading size. Used sparingly to create hierarchy within dense sections.
Caption
Roobert · Light 300
12px · lh 1.65 · 0 tracking
≈ Product: Label Small (12px Sans)
Fine print, image captions, supplementary context. Never for primary content. Below this size, switch to Roboto Mono.
Roboto Mono: Labels and Metadata Section labels, data, hex values, annotations, technical UI. All-caps with tracking for headlines. Never lowercase headlines.
Mono Large
Roboto Mono · SemiBold 600
12px · lh 1.4 · 0.04em tracking
≈ Product: Mono Large (13px · 400)
15.9:1 · Body + label · Leather on Cotton
Mono Medium
Roboto Mono · Medium 500
11px · lh 1.4 · 0.08em tracking
≈ Product: Mono Medium (12px · 400)
Section labels · Color guide headers · Verdict text
Mono Small
Roboto Mono · Regular 400
10px · lh 1.4 · 0.12em tracking
All-caps always
= Product: Mono Small (10px · 400 · caps)
Dynamic · Refined · Trustworthy · The standard label size · Chapter labels · Section metadata
Mono XSmall
Roboto Mono · Regular 400
9px · lh 1.4 · 0.14–0.20em tracking
All-caps always · Metadata only
≈ Product: no equivalent — marketing only
Hex values · Swatch names · Scale markers · Deep annotation · The absolute floor: nothing smaller appears on any Visualist surface
Usage principles
Scale over weight
Hierarchy is created through size difference, not bold. A 56px Tartuffo next to 16px Roobert needs nothing else. Never reach for bold to compensate for weak scale decisions.
Tracking is fixed
Tartuffo uses −2% at all display sizes. Roboto Mono uses 0.04–0.20em depending on token: tighter for data, wider for labels. Roobert uses 0 throughout. None of these are adjustable.
Tartuffo has a floor
Tartuffo is never used below 22px (Display XSmall). Below that threshold it loses its editorial character and becomes illegible. Switch to Roobert for anything smaller.