Typography System

Typography

Two registers: UI and Comms, Socarrat and Albufera. Manrope for the product interface. The marketing tríada (Instrument Serif, Schibsted Grotesk, and Iosevka Charon) for all external materials.

Rationale

Two registers, one system

The product UI register runs on Manrope alone — a geometric sans-serif already embedded in Socarrat, operating at 14px because Latency's interfaces are information-dense and every pixel of padding recovered from type size is a pixel available for data.

"The marketing register is a high-contrast formal tríada: Instrument Serif at display scale, Schibsted Grotesk as the body anchor, and Iosevka Charon as the monospace voice for data and code contexts. The combination is deliberate provocation."
Typography Rationale

Context split

The product dashboard uses Air (#FFFFFF), not Parchment. High-density data interfaces require the fastest possible scan. The warm earth palette is calibrated for reading pace, which is a feature in marketing and a friction in a dashboard. The two systems serve two cognitive modes and must not bleed into each other.

Density rule

The Instrument Serif / Schibsted pairing only works at low information density. The sophistication of the marketing register lives in scale and whitespace. Compress either and the aesthetic collapses into visual noise. A landing page section with a 64px headline, three sentences of body copy, and a Grape CTA reads as premium. The same section with five content blocks does not.

A — Product UI typography · Socarrat

Manrope

Manrope; Socarrat system. Applies to the product platform interface only. A geometric sans-serif optimised for information density.

Manrope; Product UI Socarrat · Google Fonts · OFL

Manrope

The platform uses Schibsted Grotesk in this brand book (both share geometric DNA). Manrope is the production typeface in the Socarrat component library.

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789


Product type scale

Platform standard: 14px (Body S) as the base body size. This is a deliberate exception to the WCAG 16px guideline; accepted because Latency's interfaces are information-dense financial data dashboards. Midnight on Air achieves 18.58:1 — AAA PASS — well above AA at 14px.

ui.display 32px · Bold · 44px lh Display
ui.title-m 24px · Bold · 32px lh Title M
ui.title-s 20px · Bold · 28px lh Title S
ui.body-s 14px · Regular · 20px lh Body S; platform standard. Information-dense data interfaces.
ui.caption 12px · Regular · 16px lh Caption; metadata and labels
ui.tiny 11px · Regular · 16px lh Tiny; overlines, status chips, minimal labels

Deprecated: Body M (16px Regular) is no longer used anywhere in the platform. Do not reintroduce it.

B — Marketing typography · Albufera

The tríada

Instrument Serif + Schibsted Grotesk + Iosevka Charon. For all external marketing materials. The combination is not safe; it requires precise size relationships and spacing to function as a craft decision rather than a typographic error.

Instrument Serif — Display & headlines Google Fonts · OFL · Regular (400) only

The definitive intelligence layer for European private markets.

Aa Bb Cc Dd Ee Ff Gg

Italic variant; for editorial emphasis

Minimum size

48px for headings. Never below in any heading or label context. Exception: italic pull quotes inside dark callout panels (.callout) may use Instrument Serif at 20–28px — the only sub-48px context permitted.

Letter-spacing

0 to -0.02em only. Never positive tracking. Opening the spacing makes the headline look like a typeface mistake.

Colour

Midnight (#1A181E) or Air (#FFFFFF) only. For tonal variation: Grape (#4E00EB). Semantic colours are off-limits for any heading.

Schibsted Grotesk — Body & supporting text Google Fonts · OFL · 400, 500, 600, 700

The European private markets data infrastructure problem isn't about effort. It's about architecture. Three platforms running in parallel, financial data arriving 18 months late, and the most interesting companies staying effectively invisible; that's not a research failure. It's a process failure.

Schibsted Grotesk Semibold (600) — h3 · Dusk

Schibsted Grotesk Bold (700) — h4 · Obsidian

OVERLINE — 11PX 600 UPPERCASE

Pairing principle

Schibsted's circular 'o' and 'a' produce open, readable body text that contrasts deliberately with Instrument's compressed, sharp editorial character. This combination requires precise size relationships; if the hierarchy breaks down, the page reads as a typographic error.

Letter-spacing

-0.01em for body and heading sizes. 0.08em for overlines (uppercase only). Never positive tracking on body text.

Iosevka Charon — Monospace Self-hosted · OFL · github.com/be5invis/Iosevka

Revenue: €12,400,000
EBITDA margin: 18.4%
3-year CAGR: 14.2%
Ownership: Holding entity → OpCo
Registry: Registro Mercantil 2023

Source-level · Traceable · Normalised

Variant

Iosevka Charon specifically; for serifed 1 and slashed 0. Do not substitute with plain Iosevka. JetBrains Mono is the brand book fallback (used on this site).

Minimum weight

Medium (500) on warm backgrounds. At Regular (400) and 14px on Parchment, hairline strokes can lose perceived definition due to subpixel rendering.

Cell padding

Minimum 16px horizontal cell padding in all table cells containing Iosevka. Add 4px extra vertical padding (24px total). The whitespace makes the data legible.

Marketing type scale

The full scale

Two-column scale: Instrument Serif for headline tokens, Schibsted Grotesk for body tokens. Scale adjacency check: every adjacent step is at least 2px apart.

Instrument Serif — headline tokens

mkt.display 80px · 400 · 1.05lh Display
mkt.h1 64px · 400 · 1.1lh Heading 1
mkt.h2 48px · 400 · 1.15lh Heading 2

Schibsted Grotesk — body tokens

mkt.h3 28px · 600 · 1.2lh · Dusk Heading 3 — Schibsted Semibold
mkt.h4 22px · 700 · 1.25lh Heading 4
mkt.body-lg 18px · 400 · 1.6lh Body large — primary body copy for marketing pages
mkt.body-md 16px · 400 · 1.55lh Body medium — secondary body copy
mkt.body-sm 14px · 400 · 1.5lh Body small — captions, footnotes, supporting detail
mkt.overline 11px · 600 · uppercase · 0.08em ls SECTION LABEL
mkt.code 14px · 500 · mono · 1.6lh €12,400,000 · 18.4% · 14.2% CAGR

Combination rules

How the three typefaces work together

These rules encode the design guidance provided in the brief. They are system constraints, not stylistic preferences.

Instrument Serif is the typographic event

A headline at 64px or 80px that interrupts the Schibsted body is correct. A subheading at 28px is not. Instrument Serif at subheading scale reads as a rendering problem, not a craft decision.

Correct

Section intro. The serif interrupts:

Decoding private markets.

Body continues. The scale gap makes it a decision.

mkt.h1 — 64px · 400

Wrong

Section intro. The "subheading":

Market dynamics

At 28px between body blocks it reads as a rendering artifact.

28px — too close to body scale

Schibsted carries the reading weight

All body copy, supporting text, h3, h4, overlines, labels, captions. Schibsted does the work of communication; Instrument does the work of stopping the reader.

MARKET INTELLIGENCE

European private markets

Latency normalises 52 million European entities across every major registry, building a discovery layer that finds the companies your competitors haven't identified yet.

52M entities · 12M with financials

① Overline — 11px 600 ② h3 — 22px 700 Dusk ③ Body-lg — 15px 400 ④ Caption — 13px Steel

Iosevka is the data voice

Financial figures, code snippets, registry data, technical specifications. Iosevka in Amber on Deep Royal or Obsidian on Bone. Always Medium (500) or heavier on warm backgrounds.

DEAL METRICS

+52M entities

€3.2M median revenue

14.2% EBITDA margin

Sourced from 1,200 micro-markets across 52 registries.

JetBrains Mono 500 · Amber #C88A3E · Deep Royal

Never mix registers

Manrope belongs to Socarrat. Schibsted Grotesk is the Albufera body typeface. They serve different cognitive modes. A marketing PDF using Manrope reads like a product screenshot at page scale.

SOCARRAT · Product UI

Sector scan

1,204 companies

€3.2M

Median rev

14.2%

EBITDA

Dense · Air · no serif

ALBUFERA · Marketing

ORIGINATION

The edge that compounds.

Proprietary dealflow, built systematically.

Spacious · Parchment · tríada

Scale adjacency

Every adjacent step in the marketing scale is at least 2px apart. mkt.display (80px) to mkt.h1 (64px): 16px gap. mkt.h2 (48px) to mkt.h3 (28px): 20px gap. This is optical balance, not mathematical ratio.

Display 80px
16px gap
Heading 1 64px
16px gap
Heading 2 48px
20px gap
Heading 3 28px · Schibsted

Whitespace is the mechanism

The warm palette and the tríada carry their meaning through whitespace. Remove the whitespace and the palette reads as beige clutter, not editorial craft. A marketing page with 40 data points on Parchment doesn't look premium regardless of typeface choices.

Spacious — premium

ORIGINATION

Find what others don't see.

Proprietary dealflow, built systematically.

Compressed — collapses

ORIGINATION

Find what others don't see.

Proprietary dealflow.

DEAL SOURCING

The edge that compounds.

Parchment reads as beige, not editorial.

Type rendering and layout rules

How type is positioned and measured

Six rules governing layout, alignment, and spacing that apply across both registers. These are construction principles, not aesthetic preferences.

Line length: 45–75 characters

Lines longer than 75 characters cause the eye to lose its place on return. Lines shorter than 45 characters break reading rhythm with excessive line breaks. Constrain paragraph text to max-width: 65ch. This applies to paragraph text only — headlines, overlines, labels, and table cells are exempt.

Too narrow

Proprietary dealflow, built systematically — not by working harder.

< 45ch · too many breaks

Correct

Proprietary dealflow, built systematically — not by working harder on the same data.

65ch · rhythm intact

Too wide

Proprietary dealflow, built systematically — not by working harder on the same data. The eye must travel too far and loses its position when returning.

> 75ch · return lost

Baseline alignment on mixed-size pairings

When two text elements of different sizes appear on the same horizontal line — a large metric value next to a small unit label — do not vertically centre them. Align to the shared baseline. Centred mixed-size pairings look optically wrong because visual centres of different-size texts do not correspond.

Correct — baseline

€12.4M Revenue 2024

align-items: baseline · reads as a unit

Wrong — centred

€12.4M Revenue 2024

align-items: center · label floats

Line-height is inverse to font size

Large display text (80–64px) uses tight leading (1.05–1.1) — the eye finds the next line without help. Body text at 16–18px needs 1.55–1.6. The existing tokens encode this: mkt-tight: 1.1 · mkt-heading: 1.2 · mkt-body: 1.55 · mkt-body-lg: 1.6. Never flatten all text to a single line-height for "consistency."

Display · 1.05

Find what others don't see.

64px · mkt-tight · self-guiding

Body · 1.6

Proprietary dealflow, built systematically — not by working harder on the same data.

15px · mkt-body-lg · aids return

Centre alignment for short copy only

Centre alignment is correct for: one- or two-line headlines, overlines, single-line callouts. Any text block running beyond two or three lines must be left-aligned. Centred long-form copy creates a ragged-right edge that makes finding the start of the next line harder than a clean left margin. A long centred block is also a signal to reduce the copy.

Correct

Origination

Find what others don't see.

Short · both lines balance cleanly

Wrong

Origination

Proprietary dealflow, built systematically — not by working harder on the same data. Maps an investor's thesis and surfaces matches.

Multi-line · ragged right · hard to return

Right-align numbers in tables

Numerical data in table columns — revenue figures, ratios, percentages, dates — must be right-aligned. Right alignment positions all decimal separators in a vertical column, enabling comparison by vertical scan. Left-aligned numbers force the eye to locate the unit position in every row independently. Applies to Iosevka Charon in financial tables and to both registers.

Wrong — left

Co. Revenue
Nordvik €4,820,000
Solberg €412,000
Lacasa €28,300,000

Units shift · scan impossible

Correct — right

Co. Revenue
Nordvik €4,820,000
Solberg €412,000
Lacasa €28,300,000

Units align · scan instant

Increase letter-spacing on all-caps text

All-caps removes the visual variety of mixed case: no descenders, no ascenders, uniform cap height. Reduced inter-character distinction makes all-caps harder to parse at default spacing. The mkt.overline token encodes this correctly: letter-spacing: 0.08em at 11px/600. Apply the same principle to any new all-caps element in either register.

Sector overview — Europe

letter-spacing: 0 — characters crowd, harder to parse

Sector overview — Europe

letter-spacing: 0.08em — matches mkt.overline token

Misuse guide

Eleven forbidden treatments

Six on the tríada itself, five on layout and measurement. Each describes what actually happens, not a hypothetical.

1
Instrument Serif as a heading or label below 48px

Do not

A "Features" section uses Instrument Serif at 24px Bold for the subsection titles. At 24px the condensed letterforms compress against the Schibsted body copy and look narrow, fragile, and unrelated to the headline above. The intended editorial contrast becomes a rendering problem.

Correct use

Instrument Serif below 48px is forbidden for headings and labels. Switch to Schibsted Grotesk Semibold (600) at 28px in Dusk (#2D3548) — mkt.h3. Exception: Instrument Serif italic at 20–28px is permitted inside dark callout panels (.callout, Deep Royal background) as an editorial pull quote — the only sub-48px context where the typeface is allowed.

Do not — what this looks like

Features

Maps an investor's thesis onto normalised company data and surfaces matches continuously.

Data coverage

+52M European companies across every major registry.

Instrument Serif at 24px and 22px. The condensed proportions collapse — it reads as a failed web font load, not a craft decision.

Correct use — what this looks like

Features

Maps an investor's thesis onto normalised company data and surfaces matches continuously.

Data coverage

+52M European companies across every major registry.

Schibsted Grotesk Semibold (600) in Dusk (#2D3548) at 28px (mkt.h3). h4 uses Bold (700) in Obsidian. The weight and colour difference creates clear hierarchy without visual heaviness.

2
Open letter-spacing on Instrument Serif

Do not

A marketing designer applies letter-spacing: 0.05em to a 48px Instrument Serif headline to "open it up." The condensed proportions of Instrument Serif are designed to work at tight or zero tracking. Opening the spacing makes the headline look like a typeface mistake.

Correct use

letter-spacing: 0 to -0.02em on all Instrument Serif copy. Never positive tracking on this typeface under any circumstances.

Do not — what this looks like

Decoding private markets.

letter-spacing: 0.06em. The condensed letterforms are designed for zero or negative tracking — open spacing makes them look unanchored.

Correct use — what this looks like

Decoding private markets.

letter-spacing: -0.01em. Slightly negative tracking locks the condensed proportions together — the headline reads as a single composed unit.

3
Iosevka without cell padding in financial tables

Do not

A case study shows a comparison table of company financials in Iosevka Charon at 14px with standard 8px cell padding. The narrow monospace characters pack together, and the table looks like a data dump rather than an analytical insight. Revenue figures like 12,400,000 become hard to parse across columns.

Correct use

Minimum 16px horizontal cell padding on all table cells containing Iosevka. Add 4px extra vertical padding (24px total). The whitespace is not wasted; it is what makes the data legible.

Do not — what this looks like
CompanyRevenueEBITDA%
Acme Holdings GmbH€12,400,00018.4%
BauKonzern AG€3,500,0008.7%
CargologisteSL€840,00021.1%

8px horizontal padding. Narrow monospace numbers pack together; €12,400,000 against €840,000 is hard to parse. The table reads as a data dump.

Correct use — what this looks like
CompanyRevenueEBITDA%
Acme Holdings GmbH€12,400,00018.4%
BauKonzern AG€3,500,0008.7%
CargologisteSL€840,00021.1%

16px horizontal + 8px vertical padding. Whitespace separates each cell from its neighbours — numbers breathe and column alignment is legible at a glance.

4
Steel text on Cloud in marketing tables

Do not

A data table uses Steel (#687692) as the secondary data text colour on Cloud (#F0F2F4) row backgrounds. The ratio is 4.07:1; PASS for large text only. At mkt.body-sm size (14px), the text becomes unreadable on mobile screens.

Correct use

Use Lead (#465063) for secondary text in tables on Cloud backgrounds: 7.23:1; AAA PASS. Reserve Steel for decorative labels and non-essential metadata only.

Do not — what this looks like
CompanyFoundedEmployees
Acme Holdings GmbH2009142
BauKonzern AG2003870
CargologisteSL201738

Steel #687692 on Cloud #F0F2F4 — 4.07:1. Passes for large text only. At 14px (mkt.body-sm) every data row falls below the required 4.5:1 threshold.

Correct use — what this looks like
CompanyFoundedEmployees
Acme Holdings GmbH2009142
BauKonzern AG2003870
CargologisteSL201738

Lead #465063 on Cloud #F0F2F4 — 7.23:1 AAA. All data rows exceed the 4.5:1 threshold at every size.

5
Semantic colour as Instrument Serif headline tint

Do not

A "success story" page section uses Neon (#16CA7F) as the colour for an Instrument Serif 64px headline. The green looks energetic but is not a brand colour; it belongs to the success semantic layer. Readers trained on the system will read "success state" not "headline."

Correct use

Instrument Serif headlines in Midnight (#1A181E) or Air (#FFFFFF) only. For tonal variation, use Grape (#4E00EB). Semantic colours are off-limits for any heading or decorative typographic use.

Do not — what this looks like

See what's possible.

Neon (#16CA7F) headline — Neon belongs to the success semantic layer. The colour says "operation succeeded" before the copy says anything about the section.

Correct use — what this looks like

See what's possible.

Midnight (#1A181E) — no semantic meaning. The headline carries only its typographic and content intent. Neon remains unambiguously a success indicator in the product.

6
Socarrat typeface (Manrope) in Albufera materials

Do not

A marketing PDF uses Manrope (Socarrat) as the body typeface because the designer recognises it from the product. The document reads like a product screenshot at page scale; the geometric precision that serves Socarrat's dense data interfaces reads as mechanical in a long-form analytical piece.

Correct use

Manrope belongs to Socarrat. Schibsted Grotesk is the Albufera body typeface. They serve different cognitive modes and must not appear in each other's contexts.

Do not — system-ui as Manrope proxy

The European private markets data infrastructure problem isn't about effort. It's about architecture. Three platforms running in parallel, financial data arriving 18 months late, and the most interesting companies staying effectively invisible — that's not a research failure.

Geometric sans-serif (Manrope/system-ui). The neutral precision strips the editorial warmth — the page reads as product UI at page scale, not a considered marketing document.

Correct use — Schibsted Grotesk

The European private markets data infrastructure problem isn't about effort. It's about architecture. Three platforms running in parallel, financial data arriving 18 months late, and the most interesting companies staying effectively invisible — that's not a research failure.

Schibsted Grotesk — Albufera's body typeface. The slightly warm, editorial quality of the face supports the marketing register and maintains the tríada intact.

7
Paragraph text without line-length constraint in wide layouts

Do not

A marketing page has a 1200px content area. Body copy is set at 100% width because the layout grid calls for it. On a widescreen monitor, every paragraph runs to 1100px — approximately 140 characters per line. After each line, the eye must travel back to the far left margin. Reading slows to a crawl and comprehension drops.

Correct use

Apply max-width: 65ch to all paragraph text. The 65ch constraint limits lines to approximately 75 characters regardless of the surrounding layout width. Headlines, overlines, and table cells are exempt — this rule applies to paragraph copy only.

Do not — what this looks like

The European private markets data infrastructure problem isn't about effort — it's about architecture. Three platforms running in parallel, financial data arriving 18 months late, and the most interesting companies staying effectively invisible. That's not a research failure; it's a process failure. Latency solves this by normalising company data directly from national registries across 50 European markets, without intermediaries and without the aggregator lag that makes late-stage companies invisible until they're already visible to everyone. The platform ingests registry filings directly and verifies financials for 12M companies across every major European market. A proprietary taxonomy covers 1,200 micro-markets.

No max-width — text fills the full container edge to edge. At normal reading sizes on a wide layout, every line exceeds 120 characters. The tinted area shows the text block width.

Correct use — what this looks like

The European private markets data infrastructure problem isn't about effort — it's about architecture. Three platforms running in parallel, financial data arriving 18 months late, and the most interesting companies staying effectively invisible. That's not a research failure; it's a process failure. Latency solves this by normalising company data directly from national registries across 50 European markets, without intermediaries and without the aggregator lag that makes late-stage companies invisible until they're already visible to everyone. The platform ingests registry filings directly and verifies financials for 12M companies across every major European market. A proprietary taxonomy covers 1,200 micro-markets.

max-width: 65ch — the tinted area stops well before the container edge. Lines stay ~75 characters regardless of layout width. The right-side whitespace is intentional.

8
Centre alignment on text blocks longer than two lines

Do not

A section intro paragraph of four sentences is centred because the headline above it is centred and the designer wants "visual symmetry." The ragged-right edge produced by centring four lines is different on every line, creating an inconsistent starting position for each new line that makes reading measurably harder than a left-aligned equivalent.

Correct use

Centre alignment for headlines, overlines, and one- to two-line callouts only. Left-align every text block running beyond two lines. A centred block that keeps growing long is also a signal to reduce the copy — fewer, sharper sentences fix both the alignment problem and the content.

Do not — what this looks like

The European private markets data infrastructure problem isn't about effort.
It's about architecture. Three platforms running in parallel,
financial data arriving 18 months late, and the most interesting companies
staying invisible until they're no longer interesting — that's a process failure.

Four lines centred. Every line ends at a different position on the right. Finding the start of the next line requires an active search — the eye has no anchor.

Correct use — what this looks like

The European private markets data infrastructure problem isn't about effort.
It's about architecture. Three platforms running in parallel,
financial data arriving 18 months late, and the most interesting companies
staying invisible until they're no longer interesting — that's a process failure.

Left-aligned. The left margin is a fixed vertical rail — every line begins from the same x-position. The eye finds the next line without searching.

9
Left-aligned numbers in table columns

Do not

A financial comparison table shows revenue figures left-aligned because that is the browser's default for <td> elements. Revenue figures of 12,400,000 · 3,500,000 · 840,000 cannot be compared by vertical scan — the eye must read the length of each number before it can understand the relative scale.

Correct use

Right-align all numerical data in table columns using text-align: right. This positions all decimal separators in a vertical line — comparison is immediate and requires no counting. Apply to both Iosevka Charon financial tables and any numeric column in the product UI.

Do not — what this looks like
RevenueEBITDA
€12,400,00018.4%
€3,500,0008.7%
€840,00021.1%
€127,300,0006.2%

Left-aligned. Decimal separators land at different columns. Comparing €12,400,000 against €840,000 requires reading the full length of each number — no vertical scan possible.

Correct use — what this looks like
RevenueEBITDA
€12,400,00018.4%
€3,500,0008.7%
€840,00021.1%
€127,300,0006.2%

Right-aligned. All decimal separators form a vertical line. Scale comparison between €127,300,000 and €840,000 is immediate — no character counting required.

10
All-caps text at default letter-spacing

Do not

A section header is set in Schibsted Grotesk 600 uppercase at default letter-spacing (0). The absence of descenders and ascenders in all-caps means every character is the same cap height — adjacent letters have less visual separation than in mixed case. At default spacing, the characters crowd and the label becomes harder to read quickly.

Correct use

Apply increased letter-spacing to all all-caps text. The mkt.overline token (letter-spacing: 0.08em at 11px/600) is the reference value. For larger all-caps text, the absolute letter-spacing value will differ but the direction is always positive from the typeface default.

Do not — what this looks like

Sector overview — European private equity

letter-spacing: 0. Adjacent uppercase characters crowd — no ascenders or descenders to introduce visual rhythm. Every character is the same uniform cap height, making the label hard to scan quickly.

Correct use — what this looks like

Sector overview — European private equity

letter-spacing: 0.08em. Each character has space to read as a distinct unit. The overline is legible at speed — matching the mkt.overline token specification.

11
Vertically centring two different text sizes on the same line

Do not

A KPI card places a large Instrument Serif figure (48px) and a small Schibsted label (14px) on the same row using align-items: center. The visual centres of 48px and 14px text don't match. The large figure appears to float; the label appears to dip. The pairing reads as two independent elements rather than a single unit.

Correct use

Align mixed-size horizontal pairings to their shared baseline using align-items: baseline. The baseline — the line on which the bottom of characters rests — is the same for both sizes. Baseline alignment makes the pairing read as a single unit and matches natural visual perception of text on a page.

Do not — what this looks like
€12.4M Revenue 2024

align-items: center. The visual centres of 44px and 14px text don't match — the large figure appears to float, the small label dips. The pairing reads as two independent elements.

Correct use — what this looks like
€12.4M Revenue 2024

align-items: baseline. Both elements share the same floor line — the baseline all characters rest on. The figure and label read as a single composed unit.

Design tokens

W3C font token format

Two sections: Product UI tokens for Manrope, Marketing tokens for the tríada. Both follow W3C format with kebab-case keys.

JSON — W3C Design Tokens
{
  "font": {
    "family": {
      "ui-base":     { "$value": "'Manrope', 'Noto Sans', system-ui, sans-serif" },
      "mkt-display": { "$value": "'Instrument Serif', 'Georgia', serif" },
      "mkt-body":    { "$value": "'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif" },
      "mkt-mono":    { "$value": "'Iosevka Charon', 'JetBrains Mono', 'Fira Code', monospace" }
    },
    "size": {
      "ui-display":   { "$value": "32px" },
      "ui-title-m":   { "$value": "24px" },
      "ui-title-s":   { "$value": "20px" },
      "ui-body-s":    { "$value": "14px" },
      "ui-caption":   { "$value": "12px" },
      "ui-tiny":      { "$value": "11px" },
      "mkt-display":  { "$value": "80px" },
      "mkt-h1":       { "$value": "64px" },
      "mkt-h2":       { "$value": "48px" },
      "mkt-h3":       { "$value": "28px" },
      "mkt-h4":       { "$value": "22px" },
      "mkt-body-lg":  { "$value": "18px" },
      "mkt-body-md":  { "$value": "16px" },
      "mkt-body-sm":  { "$value": "14px" },
      "mkt-overline": { "$value": "11px" },
      "mkt-code":     { "$value": "14px" }
    },
    "letterSpacing": {
      "mkt-instrument": { "$value": "0em"    },
      "mkt-schibsted":  { "$value": "-0.01em" },
      "mkt-overline":   { "$value": "0.08em"  }
    }
  }
}

Download

Download typography

Typeface reference pack for the Latency brand system. Includes the SIL Open Font License for each typeface, Google Fonts download links, and the recommended CSS font stack for each context.

  • OFL 1.1 license — Instrument Serif
  • OFL 1.1 license — Schibsted Grotesk
  • OFL 1.1 license — Iosevka (v34, Regular + Medium)
  • OFL 1.1 license — Manrope (variable)
  • README — Iosevka Charon note + CSS font stacks
Download typography pack

ZIP · 6.1 MB · 4 families · TTF + OFL licences

Agent layer

Machine-readable.

The full type system is available as W3C design tokens (JSON), CSS, and YAML constraints in typography.md. Eleven forbidden treatments are documented. New: type layout rules cover line length, alignment, line-height calibration, and all-caps tracking.

typography.md — marketing scale
css
--font-display: 'Instrument Serif', serif;
--font-body:    'Schibsted Grotesk', sans-serif;
--font-mono:    'Iosevka Charon', monospace;

/* mkt.display  80px  / Regular / ls: 0    */
/* mkt.h1       64px  / Regular / ls:-0.01 */
/* mkt.h2       48px  / Regular — min size */
/* mkt.h3       28px  / Semibold (600) / Dusk #2D3548 */
/* mkt.body-lg  18px  / Regular / lh: 1.6  */
/* mkt.overline 11px  / 600 / ls: 0.08em   */
/*              uppercase                  */

/* layout rules */
p, .mkt-body-lg,
.mkt-body-md   { max-width: 65ch; }
.baseline-pair { display: flex;
                 align-items: baseline; }
td.numeric,
th.numeric     { text-align: right; }
typography.md — critical constraints
yaml
critical_constraints:
  instrument_serif:
    minimum_size: "48px for headings and labels"
    tracking: "0 to -0.02em — never positive"
    weight: "Regular (400) only"
    tagline: italic always
    below_48px: "use Schibsted Bold instead"
    exception_editorial_callout:
      context: ".callout blockquote (Deep Royal panel only)"
      permitted_size: "20px–28px"
      required_style: italic
      required_colour: "Lavender #D6C2FF"
      scope: "pull-quote role only — not headings"

  iosevka:
    variant: Charon (serifed 1, slashed 0)
    min_weight_warm_bg: 500

  registers:
    product_ui: "Manrope only (Socarrat)"
    marketing:  "Instrument + Schibsted
                 + Iosevka (Albufera)"
    rule: never mix registers

layout_rules:
  line_length:
    max: "65ch / ~75 characters"
    applies_to: "paragraph text only"
    css: "max-width: 65ch"
  baseline_alignment:
    rule: "mixed-size horizontal pairings"
    css: "align-items: baseline"
  line_height:
    display_h1: "1.05–1.1 (mkt-tight)"
    h2_h3:      "1.2 (mkt-heading)"
    body:       "1.55–1.6 (mkt-body)"
    principle:  "inverse to font size"
  centre_alignment: "short copy only (≤2 lines)"
  numbers_in_tables: "right-aligned always"
  all_caps_tracking: "always > typeface default
    reference: mkt.overline 0.08em"
Source document