You're viewing the readable version of this site. The interactive extras (search, diagrams, read-aloud) need JavaScript and a current browser. Enable JavaScript; if it is already enabled, update your browser.

How This Website Was Built — A Colophon

Notes on the method, typography, publishing system, and authors of its fonts.

A colophon is a printer's note at the back of a book describing how it was made — the types, the paper, the presses. The same impulse, applied to a website.

Typography exists to honor content.

— Robert Bringhurst, The Elements of Typographic Style

Method

The ideas, the opinions, the direction, and the final say on every page here are mine. Much of the drafting and editing is done with AI — the way earlier writers worked with editors, typists, and typesetters, except that this editor can also read source code. I point; it drafts; I cut, correct, and sign. What ships is what I stand behind, and anything wrong in it is my fault, not the tool's.

The games on this site were developed by OpenAI's Codex, then reviewed and tested under the same standard as the rest of the site.

The honest complaint about machine-assisted text is rarely about who did the typing — it is about writing that nobody checked. So the thing that earns trust here is not the hand on the keyboard but the discipline every page has to survive before it ships: mechanism claims about a system are read out of that system's source, never from documentation or memory; every quoted code snippet is included from a file this site's own build compiles and tests, so a quotation cannot drift from code that passes; diagrams are rendered and reviewed against a written geometry rule; citations point at primary sources — the paper, the specification, the file in the tree. When drafting gets fast, that discipline is the entire difference between an essay and slop.

And if you find a place where the discipline slipped, the margin is yours: select the passage and say so.

Typography

This site's typographic foundation is Linux Libertine by Philipp H. Poll, a transitional serif designed alongside its sans-serif companion Linux Biolinum by the same hand. Biolinum carries the section headings, the table of contents, and the sans register that runs through the page; Libertine is the book body face — one of several reading faces you can choose between (see below). The pairing is intentional — these faces were drawn as a single project, and they look like it.

The interface itself — the toolbar, the search and Ask AI dialogs, the menus — wears a face of its own, held apart from the page so it keeps one voice whichever reading face the article wears. By default that is Atkinson Hyperlegible Next by the Braille Institute, a legibility-first sans engineered to keep easily-confused letters (I/l/1, O/0) distinct at the small sizes interface text lives at. It is a choice separate from your reading face: the Reading preferences panel offers an Interface font of Atkinson, Biolinum, Lexend, or your system font.

The site's name, in the masthead, is set in Cinzel by Natanael Gama — inscriptional Roman capitals in the Trajan lineage, drawn from the letters carved into classical monuments. Its lowercase is small caps, so the name reads as a carved wordmark; the English name sits over its Devanagari twin, the two coupled close to read as one name in two scripts.

Article titles are set in Cormorant Upright by Christian Thalmann, an upright sibling of the Cormorant family. Where the parent Cormorant Garamond leans italic and calligraphic, Cormorant Upright is firmly roman — a stricter Garamond derivative that holds its own at display sizes. Cormorant also stands in for the note-register blockquote — quoted prose that should flow with body text but read in a different voice.

The decorative initial that opens each article is Goudy Initialen, a digital revival of Frederic W. Goudy's floriated initials cast by Lanston as Goudy Initials No. 296 in the early 1900s. The revival is by Dieter Steffmann.

Ballet by Eduardo Tunni — a delicate upright connecting script designed for very large display sizes — is reserved for pull quotes, the rare moment where a quotation is the point of the page rather than a citation in passing. Below ~60 pt the script's connection logic loses its character, so we set it generously or not at all.

Caveat by Pablo Impallari is the one casual hand on the site — a handwriting face that stays legible small, used for the sticky note so its scrawl reads as written-by-hand rather than typeset. (Inline code on a note stays in Fira Code; you don't write a token name in cursive.)

Devanagari runs — Sanskrit verses, Hindi titles — are set in Mukta by Ek Type (lead designers Erin McLaughlin and Girish Dalvi), a humanist sans designed for body use. The face is loaded only over the Devanagari Unicode block, so Latin prose interleaved with the script still resolves to Linux Libertine.

Code is set in Fira Code by Nikita Prokopov (after Carrois Apostrophe's Fira Sans), with its contextual programming ligatures left on.

Diagrams use Fira Sans for labels that name a node, category, or region. Its open humanist forms stay clear at figure scale. Explanatory prose remains in Linux Libertine, while literal code, versions, hashes, and filenames remain in Fira Code; the distinction follows meaning rather than geometry.

Reading is personal, so the body typeface is yours to choose: the toolbar's Reading switch offers six faces, and your pick is remembered across visits. The default is Alegreya by Juan Pablo del Peral (Huerta Tipográfica), a serif drawn for long-form literature with a warm, dynamic rhythm. Like the others, it swaps the prose only, leaving interface elements and headings in their default faces.

The book face is Linux Libertine (above), the transitional serif the rest of the site is built around. Crimson Text by Sebastian Kosch is an old-style serif in the Garamond lineage, drawn for book-length body text. Lora by Olga Karpushina (Cyreal) is a contemporary serif with brushed, calligraphic roots, tuned for long-form screen reading with moderate contrast and well-crafted curves.

Two profiles serve readers with particular needs, and both carry their face across the reading surface — body, section headings, captions, and the page's nav and footer — rather than the prose alone. (The floating interface — the toolbar, the search and Ask AI dialogs, the menus — is the exception: it follows the separate Interface font setting above, so it holds one voice whichever reading profile is active.) The legible profile is built on Atkinson Hyperlegible Next by the Braille Institute, a face engineered around low-vision legibility, its letterforms drawn to keep easily-confused pairs (I/l/1, O/0, b/d) distinct. The lexend profile is built on Lexend by Bonnie Shaver-Troup and Thomas Jockin, a face designed for reading proficiency: expanded spacing and open letterforms shown to improve fluency for readers who find dense text hard going. Both leave the large display faces (article titles in Cormorant, the Cinzel masthead, the drop cap) and the monospaced camera data in place, where letters are already easy to tell apart and the Braille Institute itself advises pairing Atkinson with a separate display face.

Each line below is set in the face it names, and every line says the same thing — the difference you see is the typeface. Selecting one applies it to this page, and the site remembers.

Iconography

Small interface icons use Phosphor Icons, self-hosted from the @phosphor-icons/web package in the regular weight. The site keeps the icon vocabulary narrow: links, downloads, source references, contact destinations, and small document-type labels. Prose links stay textual, and figures or evidence timelines may still use inline SVG when a custom shape communicates more clearly than a glyph.

GitHub · Email · Resume PDF

  • book
  • paper
  • benchmark
  • source

Conventions

Footnotes are rendered as Edward Tufte's sidenotes — numbered in the body and set in the right margin, aligned with the line that introduced them. Unnumbered margin notes live in the same gutter. Following Tufte's one-sided convention, marginalia sit on a single outer edge — the right — leaving the inner edge free for the navigation rail. An arrow note (#+BEGIN_marginnote-arrow) goes further, drawing a thin leader from the gutter back toward the word it annotates. On narrow viewports all marginalia collapse to indented blocks beneath their reference.

The page itself is set as a sheet of warm ivory paper floating on a darker parchment board, the way a printed page looks open in a document viewer — a soft drop shadow, a sliver of the next page below, and a surround toned from the paper rather than neutral gray.

A long piece carries its table of contents inline at the top — the canonical, no-JavaScript navigation. On a wide enough screen the sheet shifts toward its outer edge to open the inner margin, and a small script mirrors the contents into a fixed rail there, lighting up the section you're reading as you scroll. The rail is pure enhancement: it never appears without the room or the script, and the inline ToC is always there underneath it.

A sticky note (#+BEGIN_sticky) is a separate primitive, and deliberately not part of the typeset page: a foreign object, as if a reader peeled one off a pad and pressed it on. It hangs off the sheet's edge onto the board at a real angle — the tilt alternating per note — and casts a lifted shadow. Its yellow stock and dark ink hold in dark mode too, the way a physical note keeps its color in a dim room. Marginalia stay clean in every state; the stuck-on look is always opt-in, never an automatic disguise for a note that ran out of room.

Article opens with a drop cap — a three-line floriated initial followed by a small-caps first line, in the classical print convention. Section breaks within an article are marked by a dinkus (three centered ornaments) rather than a plain rule, and the hierarchy of quotation distinguishes the note register (Cormorant Upright, flowing with body prose), the epigraph (italic display sans, sitting between header and body), and the pull quote (Ballet at display size, the page's moment of pause).

Color

The page has a single accent — the warm copper that tints links, the active marks in the navigation rail, and the highlight in diagrams. It is one CSS variable, --accent; everything else in that family (the link colour, its hover, the diagram accent) is derived from it in the browser with relative-colour syntax, shifting only lightness and holding hue and chroma. Change the one variable and the whole family recomposes in step. The copper itself has a light and a dark value, a shade apart, so it reads against both the cream paper and the umber.

A reader can change it. The viewer toolbar carries an accent control beside the mode and reading-face switches: a row of preset swatches and a custom colour well. The choice persists, and — like the colour scheme — is applied before the first paint, so a returning visitor never sees the default flash past their preference. This is mostly an accessibility affordance: the accent never encodes meaning here (it is one colour at a time, never a key), so the point is simply to let someone whose colour vision differs pick a hue that sits well for them.

The presets are deliberately few — copper, navy, amber, pink — and chosen to stay apart from one another under colour-blind vision, not just under typical vision. The figure below is the test. Each row simulates one kind of vision — normal, then the three dichromacies — and shows the four swatches as that eye would see them, against the paper in that same simulation, with the closest pair's perceptual distance (a CIELAB ΔE, where ten or more reads as clearly different).

Light · cream paperNormal visionΔE 22.6ProtanopiaΔE 11.3DeuteranopiaΔE 10.9TritanopiaΔE 12.3Dark · umber paperNormal visionΔE 34.2ProtanopiaΔE 14.4DeuteranopiaΔE 13.7TritanopiaΔE 13.9
The accent presets under simulated colour vision. Toggle the copper default between its original brand value and the nudged one: the original dips below the "clearly distinct" line on a couple of rows, while the nudged copper clears it everywhere. Four is the ceiling — both red-green dichromacies collapse the whole red-green axis, so a fifth categorical colour cannot be kept distinct. The check is reproducible: scripts/check-accent-cvd.py.

Emblem and motto

The crest in full — line art with no color of its own, tinted to the page so it follows light and dark. Click to zoom.

The masthead carries a small crest: a maned lion between two seated cats on a pedestal, an open book at its heart, a ring of mathematical signs around the base, and a single paw print at the foot.

The composition echoes the Lion Capital of Aśoka (Sārnāth, 3rd century BCE), the sculpture from which India draws its state emblem. The book reads Gaṇitapāda (गणितपाद) — the mathematics chapter of Āryabhaṭa's Āryabhaṭīya (499 CE), which set out arithmetic, algebra, and trigonometry in thirty-three terse Sanskrit verses; the signs ringing the base (∑, ∫, ∞, √, π) carry that thread forward to the present. pāda carries both meanings at once: a chapter — the Āryabhaṭīya divides into four pāda sections, of which gaṇita (mathematics) is one — and a foot, the word's older sense. So the paw print at the crest's foot is a pun on both readings: the foot of the pedestal, and the chapter the book lies open to.

Beneath the crest, the masthead begins with Satyameva Jayate (सत्यमेव जयते): “Truth alone triumphs.” The phrase comes from the Mundaka Upanishad and is India's national motto, inscribed below the State Emblem in Devanagari. Here it names the editorial standard rather than an official identity: claims should be traceable to evidence, quotations to their sources, and mistakes to visible corrections. The masthead then carries the same thought through forty-five other distinct renderings, one at a time.

The set represents all twenty-two languages in the Eighth Schedule to India's Constitution, followed by a wider international set. The Legislative Department's regional editions of the Constitution supply a second government catalog of the names and scripts; the National Translation Mission independently describes its work across the same twenty-two languages.

A distinct rendering appears only once. Sanskrit, Hindi, Bodo, Dogri, Konkani, Maithili, Marathi, and Nepali share सत्यमेव जयते in Devanagari, so the rotation does not repeat it under eight labels. The remaining scheduled languages each contribute a distinct written form.

Language names — English / native Motto rendering Grouping rationale
Sanskrit / संस्कृतम्; Hindi / हिन्दी; Bodo / बड़ो; Dogri / डोगरी; Konkani / कोंकणी; Maithili / मैथिली; Marathi / मराठी; Nepali / नेपाली सत्यमेव जयते One shared Sanskrit expression in Devanagari; rendered once rather than eight times.
Assamese / অসমীয়া সত্যমেৱ জয়তে Distinct scheduled-language script.
Bengali / বাংলা সত্যমেব জয়তে Distinct scheduled-language script.
Gujarati / ગુજરાતી સત્યમેવ જયતે Distinct scheduled-language script.
Kannada / ಕನ್ನಡ ಸತ್ಯಮೇವ ಜಯತೇ Distinct scheduled-language script.
Kashmiri / کٲشُر سچ چھُ کامیاب گژھان Distinct scheduled-language translation in Perso-Arabic script.
Malayalam / മലയാളം സത്യമേവ ജയതേ Distinct scheduled-language script.
Manipuri (Meitei) / ꯃꯤꯇꯩꯂꯣꯟ ꯑꯆꯨꯝꯕꯅ ꯃꯥꯏ ꯄꯥꯛꯏ Distinct scheduled-language translation in Meitei Mayek.
Odia / ଓଡ଼ିଆ ସତ୍ୟମେବ ଜୟତେ Distinct scheduled-language script.
Punjabi / ਪੰਜਾਬੀ ਸੱਚ ਦੀ ਹੀ ਜਿੱਤ ਹੁੰਦੀ ਹੈ Distinct scheduled-language translation in Gurmukhi.
Santali / ᱥᱟᱱᱛᱟᱲᱤ ᱥᱟᱹᱨᱤ ᱜᱮ ᱡᱤᱛᱟᱹᱣᱜ-ᱟ Distinct scheduled-language translation in Ol Chiki.
Sindhi / سنڌي سچ جي فتح ٿيندي آهي Distinct scheduled-language translation in Perso-Arabic script.
Tamil / தமிழ் வாய்மையே வெல்லும் Distinct scheduled-language translation.
Telugu / తెలుగు సత్యమేవ జయతే Distinct scheduled-language script.
Urdu / اردو سچائی کی جیت ہوتی ہے Distinct scheduled-language translation in Perso-Arabic script.

Beyond India, the first group completes the six United Nations official languages. The rest broaden geographic and writing-system coverage or carry a historical “truth prevails” tradition. These are selection principles, not a claim to rank cultures or to define a closed canon.

Group Language names — English / native Motto rendering
UN official Arabic / العربية الحق ينتصر
UN official Chinese / 中文 真理必胜 (Simplified); 真理必勝 (Traditional)
UN official English / English Truth Alone Triumphs
UN official French / français La vérité triomphe
UN official Russian / русский Истина торжествует
UN official Spanish / español La verdad triunfa
Broad international reach German / Deutsch Die Wahrheit siegt
Broad international reach Indonesian / Bahasa Indonesia Kebenaran pasti menang
Broad international reach Italian / italiano La verità trionfa
Broad international reach Japanese / 日本語 真実は勝つ
Broad international reach Korean / 한국어 진실은 승리한다
Broad international reach Portuguese / português A verdade triunfa
Broad international reach Thai / ไทย ความจริงย่อมชนะ
Broad international reach Turkish / Türkçe Hakikat galip gelir
Broad international reach Vietnamese / Tiếng Việt Sự thật sẽ chiến thắng
Regional breadth Amharic / አማርኛ እውነት ታሸንፋለች
Regional breadth Filipino / Filipino Katotohanan ang nagwawagi
Regional breadth Hebrew / עברית האמת תנצח
Regional breadth Irish / Gaeilge Buaíonn an fhírinne
Regional breadth Māori / te reo Māori Ka toa te pono
Regional breadth Dutch / Nederlands De waarheid zegeviert
Regional breadth Persian / فارسی راستی پیروز است
Regional breadth Polish / polski Prawda zwycięża
Regional breadth Swahili / Kiswahili Ukweli hushinda
Regional breadth Ukrainian / українська Правда перемагає
Regional breadth Yoruba / Yorùbá Òtítọ́ máa ń ṣẹ́gun
Regional breadth Zulu / isiZulu Iqiniso liyanqoba
Motto lineage Czech / čeština Pravda vítězí
Motto lineage Latin / lingua Latina Veritas vincit
Motto lineage Welsh / Cymraeg Y gwir a orfydd

The crest is a personal composition that echoes the Lion Capital; it is not the State Emblem of India. Clicking the crest returns home. Clicking the motto returns here, to the account of what the two mean and how they were made.

The paw at the crest’s foot — the pāda, and the site’s favicon.

The original drawing was generated by Google's Gemini; Anthropic's Claude vectorized it with potrace into a single SVG; and OpenAI's ChatGPT helped polish the crest and favicon images. The SVG is line art with no color of its own, tinted to the page by CSS so it follows light and dark. The paw at its foot, lifted out on its own, is the site's favicon.

Licenses

Family Designer / digitisation License
Linux Libertine Philipp H. Poll SIL Open Font License 1.1
Linux Biolinum Philipp H. Poll SIL Open Font License 1.1
Cinzel Natanael Gama SIL Open Font License 1.1
Cormorant Upright Christian Thalmann SIL Open Font License 1.1
Goudy Initialen Frederic W. Goudy; digital by Dieter Steffmann 1001Fonts FFC
Ballet Eduardo Tunni SIL Open Font License 1.1
Caveat Pablo Impallari SIL Open Font License 1.1
Alegreya Juan Pablo del Peral (Huerta Tipográfica) SIL Open Font License 1.1
Lora Olga Karpushina (Cyreal) SIL Open Font License 1.1
Atkinson Hyperlegible Next Braille Institute of America SIL Open Font License 1.1
Mukta Ek Type (McLaughlin, Dalvi, et al.) SIL Open Font License 1.1
Fira Code Nikita Prokopov, Carrois Apostrophe SIL Open Font License 1.1
Fira Sans Carrois Apostrophe; Mozilla Foundation; Telefónica S.A. SIL Open Font License 1.1
Phosphor Icons Phosphor Icons MIT