Typography

The Shape of Thought

"The page is a unit of space and time."
—Robert Bringhurst

Typography is not decoration. It is epistemology made visible—a belief that form shapes thought, that the vessel changes the water. This site's typography emerges from a simple question: what would reading feel like if every choice served presence rather than efficiency?

The answer lives somewhere between a 16th-century Aldine edition and tomorrow's screen. Between the manuscript's breathing room and the terminal's clarity. Between slowness and precision.

The Voices

Three typographic voices converse across these pages:

EB Garamond — The Storyteller

Our body text speaks in Claude Garamont's voice, as interpreted by Georg Duffner. This isn't nostalgia—it's recognition that 450 years of readers have found home in these letterforms. Garamond carries time differently than sans serifs. It knows that reading is durational, not instantaneous.

Technical notes for the curious: We use the full family at text sizes—regular, italic, and bold. True small caps come from EB Garamond SC. Everything self-hosted as WOFF2, because consistency matters.

IBM Plex Sans — The Guide

Headings and interface elements speak in Plex Sans—IBM's gift to the commons, designed by Bold Monday. It provides wayfinding without shouting, structure without rigidity. Where Garamond whispers history, Plex Sans states the present.

The medium weight (500) adds just enough presence for navigation. Regular (400) for breadcrumbs. Bold (700) for emphasis.

IBM Plex Mono — The Precision

Code and metadata require different breathing. Monospace isn't just for terminals—it's for any text that needs to declare its construction. Dates, times, technical notes. The grid made visible.

Scaled to 0.88× to match Garamond's visual weight. Typography is about optical harmony, not mathematical equality.

The Measure

Reading happens in the body. These measurements honor that:

• Line length: 68 characters—about fourteen words. Long enough for thought to develop, short enough to return.
• Line height: 1.6 on desktop, 1.55 on mobile. Air between lines is thinking space.
• Font size: 21px base on desktop, 22px on mobile. Large enough to invite sustained reading.

The page breathes through an 8px rhythm. Every margin, every space between elements follows this musical interval. Not because grids are sacred, but because rhythm aids comprehension.

Responsive Attention

Your distance from the screen changes everything:

In Hand (22px)

Mobile reading is intimate—often in bed, in transit, in stolen moments. The type swells slightly, line height opens. Paragraphs align left (never justified on narrow measures). The page becomes a private conversation.

At Lap (20px)

Tablets occupy a middle distance. Still personal but less immediate. The bridge between lean-in and lean-back reading.

At Desk (21px)

Full attention at arm's length. Here the classical proportions emerge. Margins frame thought. The full typographic system comes alive.

Ornaments & Flourishes

Where others place horizontal rules, we set ornaments—breathing marks borrowed from manuscript tradition:

• ❦ — The Aldus leaf, our default pause
• ⁂ — The asterism, for triple emphasis
• ❧ — The rotated fleuron, marking turns in thought
• ◊ — The lozenge, for journeys and positions
• ◉ — The aperture, for photographic glimpses (no title, pure image)
• ⊙ ⊙ ⊙ — The triple viewfinder, for photo essays

These aren't mere decoration. They're semantic punctuation, each carrying its own quality of pause.

Small Capitals & Other Graces

Small capitals mark proper names and concepts requiring gentle emphasis. Not the fake scaling that word processors offer, but true small caps drawn for this purpose.

Oldstyle figures (notice these numerals: 1234567890) sit within text rather than upon it. They have ascenders and descenders like letters, because numbers are part of language, not above it.

Ligatures—the fi and fl connections—happen automatically. They're the typographic equivalent of smooth bowing, preventing the collision of letters that want to touch.

Post Qualifiers

Beyond the body text, certain posts carry qualifying symbols that modify their semantic meaning:

• ✦ — The encounter mark, appearing after titles of posts where ordinary observation opened into direct experience
• ⟐ — The chamber seal, marking texts that have undergone collective review and emerged transformed through that process

These qualifiers function like musical accidentals—they change how the following content should be approached.

The Technical Garden

For those who like to peek behind curtains:

// Visual compensation - making different fonts feel equal
$garamond-scale: 1;      // Our baseline
$plex-sans-scale: 0.94;  // Sans appears larger
$plex-mono-scale: 0.88;  // Mono larger still

// The 8px grid that undergirds everything
$space-unit: 0.5rem;
$space-sm: 1rem;    // Breathing
$space-md: 1.5rem;  // Thinking  
$space-lg: 2rem;    // Sectioning

Every font loads with font-display: swap, respecting slow connections. No external dependencies—your privacy matters more than my convenience.

For the Especially Curious

View the complete technical implementation:

• Internal typography documentation
• SCSS source files
• Type specimen tests

Typography as Ethics

Matthew Butterick writes that "typography is the visual component of the written word." But it's more—it's the tempo of thought, the gesture of meaning, the breath between ideas.

This site's typography makes commitments:

1. Reading is not scanning. These pages resist the quick extract. They invite dwelling.

2. Beauty is not superficial. Careful form honors both writer and reader.

3. Tradition and innovation converse. Garamond meets system fonts meets variable viewports.

4. Every choice has meaning. From the kerning of small caps to the rhythm of margins—nothing is arbitrary.

The best typography, like the best teaching, is invisible until you need it. Then it holds you like a trusted friend.

Use & Reuse

This typographic system is open for adaptation. Take what serves, leave what doesn't. The only request: maintain the spirit of craft. Don't just copy—understand, then transform.

For implementation details, see the technical guide. For philosophy, you're already here.

Typography set in EB Garamond, IBM Plex Sans, and IBM Plex Mono. Designed in Barcelona, 2024–2025. Last refined: today, probably.