fin1te/dsv1.0.0
  1. ds
  2. Foundations
  3. Typography

Typography

Mona Sans with its width axis, IBM Plex Mono for metadata.

Families

Sans · Mona Sans Variable

Aa

Weight 200 to 900 and width 75 to 125%. Headlines use 600 to 640 at 105 to 115% width. Body is 400.

Mono · IBM Plex Mono

Aa

400 and 500. Dates, counts, code, kickers and table heads. Slashed zero on.

Scale

displayclamp(2.125rem, 4.9vw, 3.625rem)620 · wdth 112%Home hero, one per site

Systems that stay fast

titleclamp(2rem, 3.8vw, 2.875rem)620 · wdth 112%Page heads

Systems that stay fast

headingclamp(1.625rem, 3.2vw, 2.375rem)600 · wdth 108%Section heads

Systems that stay fast

subheading1.5rem600 · wdth 106%Card and era titles

Rewrote the ingestion path in Rust and cut memory by 70 percent.

leadclamp(1.0625rem, 1.6vw, 1.1875rem)400Intro paragraph under a title

Systems that stay fast

prose1.0625rem400Long-form writing

Rewrote the ingestion path in Rust and cut memory by 70 percent.

body1rem400Default text

Rewrote the ingestion path in Rust and cut memory by 70 percent.

small0.875rem400UI text, buttons, menus

Rewrote the ingestion path in Rust and cut memory by 70 percent.

caption0.8125rem400Hints, figure captions

Rewrote the ingestion path in Rust and cut memory by 70 percent.

meta0.75rem400Dates, counts, reading time

12 Aug 2026 · 8 min

label0.7188rem500Kickers, table heads, figure numbers

Section kicker

Width axis

Throughput 100%

Throughput 108%

Throughput 115%

Code
<p style="font-size:2rem;font-weight:620;font-stretch:100%">Throughput 100%</p>
<p style="font-size:2rem;font-weight:620;font-stretch:108%">Throughput 108%</p>
<p style="font-size:2rem;font-weight:620;font-stretch:115%">Throughput 115%</p>

Classes

ClassOnWhat it does
.labelanySmall uppercase mono. Kickers, table heads, figure numbers.
.label.kickerpThe accent kicker above a title.
.monoanyPlex Mono with slashed zero.
.numanyTabular figures, for columns of numbers.
.muted / .faintanySecondary and tertiary text colour.
.accent / .warmspanThe accent or amber text colour.
.grad-textspanThe one gradient phrase. See Backdrops.
.prosearticleLong-form writing: measure, rhythm, lists, quotes, code, tables.

Prose

Why the sort key matters

ClickHouse reads granules, not rows. A good sort key lets it skip most of them. Here is the query plan.

  • Put low-cardinality filters first.
  • Keep time last, unless every query filters on it.
The fastest data is the data you never read.

Run EXPLAIN indexes = 1 to check.

Code
<div class="prose">
  <h2>Why the sort key matters</h2>
  <p>ClickHouse reads <strong>granules</strong>, not rows. A good sort key lets it skip most of them. <a href="#">Here is the query plan</a>.</p>
  <ul><li>Put low-cardinality filters first.</li><li>Keep time last, unless every query filters on it.</li></ul>
  <blockquote>The fastest data is the data you never read.</blockquote>
  <p>Run <code>EXPLAIN indexes = 1</code> to check.</p>
</div>
Do
  • One headline size per page head; let width and weight do the rest.
  • Mono for anything a machine produced.
  • Sentence case everywhere.
Don't
  • Mono for paragraphs.
  • Bold in body text for emphasis; the accent strong in prose is enough.
  • Uppercase outside .label.