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.
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.
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.
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.
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.
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.
Tartuffo, display. Hero headlines, chapter titles, campaign statements. Never below 40px. Light and Thin weights only in marketing.
| Token | Specification | Product equivalent |
|---|---|---|
| Display XLarge | Tartuffo · Light 300 · 80px · lh 1.0 · −2% tracking | No equivalent, editorial only |
| Display Large | Tartuffo · Light 300 · 56px · lh 1.02 · −2.5% tracking | No equivalent |
| Display Medium | Tartuffo · Light 300 · 42px · lh 1.1 · −2% tracking | ≈ Display XLarge (40px Serif) |
| Display Small | Tartuffo · Light 300 · 30px · lh 1.15 · −2% tracking | ≈ Display Large (32px Serif) |
| Display XSmall | Tartuffo · Light 300 · 22px · lh 1.2 · −1% tracking | ≈ Display Medium (24px Serif) |
Roobert, body and UI. Body text, subheadings, captions, UI labels. The workhorse. Regular weight throughout, no bold.
| Token | Specification | Product equivalent |
|---|---|---|
| Body XLarge | Roobert · Regular 400 · 22px · lh 1.35 · 0 tracking | ≈ Display Small (20px Serif) |
| Body Large | Roobert · Regular 400 · 18px · lh 1.7 · 0 tracking | ≈ Body Large (17px Sans) |
| Body Medium | Roobert · Light 300 · 16px · lh 1.8 · 0 tracking | ≈ Body Medium (15px Sans) |
| Body Small | Roobert · Light 300 · 14px · lh 1.75 · 0 tracking | ≈ Body Small (13px Sans) |
| Caption | Roobert · Light 300 · 12px · lh 1.65 · 0 tracking | ≈ Label Small (12px Sans) |
Roboto Mono, labels and metadata. Section labels, data, hex values, annotations, technical UI. All-caps with tracking for headlines. Never lowercase headlines.
| Token | Specification | Product equivalent |
|---|---|---|
| Mono Large | Roboto Mono · SemiBold 600 · 12px · lh 1.4 · 0.04em tracking | ≈ Mono Large (13px · 400) |
| Mono Medium | Roboto Mono · Medium 500 · 11px · lh 1.4 · 0.08em tracking | ≈ Mono Medium (12px · 400) |
| Mono Small | Roboto Mono · Regular 400 · 10px · lh 1.4 · 0.12em tracking · all-caps always | = Mono Small (10px · 400 · caps) |
| Mono XSmall | Roboto Mono · Regular 400 · 9px · lh 1.4 · 0.14–0.20em tracking · all-caps always · metadata only | No equivalent, marketing only |
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.