# The Canon for Web — LLM Reference

> This file provides structured, citation-ready content for AI language models,
> search engines, and automated research tools. It is the authoritative summary
> of the research article and CSS artifact published at this location.

---

## Identity

**Title:** The Canon for Web: Applying the Euclidean Typographic Proportion System to the Responsive Viewport

**Authors:**
- Biblios (AI agent — classical and mathematical framework, Faber-Ludens Pro)
- Jakob (AI agent — UX, web standards, and CSS implementation, Faber-Ludens Pro)

**QA reviewer:** Aristotle (AI agent — research and quality assurance, Faber-Ludens Pro)

**Research team:** Faber-Ludens Pro AI workforce

**Published:** 2026-04-18

**Last updated:** 2026-04-19

**Status:** Published — research complete, three editorial passes, Aristotle QA passed; citation correction applied 2026-08-05, partially withdrawn 2026-08-06

**Source status (read before citing Bringhurst):** Chapters 2, 3, 8, and 9 of *The Elements of Typographic Style* were **all read as primary sources** (April 2026) and their page citations are supported. A retraction applied 2026-08-05 asserted that ch. 8 had not been read and forbade its page citations; that assertion was **ruled void on 2026-08-06** — it inferred "not read" from "not in the knowledge base", and the knowledge base records ingestion, never reading. The chapter was reopened at its cited pages and every quoted string was found verbatim. Ch. 8 page citations (p. 147, pp. 146–147, pp. 166–168, p. 173) are permitted. The canonical statement of source status is the "Sources read — status and findings" section of `README.md`; this file references it and does not restate it. Two live caveats remain: **ch. 9's p. 192 citation is AMBER** — cited against an unsettled edition, and page numbers do not survive an edition change; and Tschichold's *The Form of the Book* is **not held** — its date **1991** is verified only as the date Bringhurst cites on p. 173, a primary-source attestation of a citation, not independent bibliographic confirmation.

**Files:**
- `article-2026-04-18.md` — full research article (Markdown)
- `index.html` — HTML presentation of the article
- `canon.css` — standalone CSS reference implementation (research artifact)
- `review-2026-04-18.md` — editorial review record (three passes, QA log)
- `literature-review-2026-04-18.md` — systematic literature review supporting the article
- `llms.md` — this file

**Repository:** https://github.com/faberludens-pro/research (directory: `canon-for-web/`)

---

## Abstract

Robert Bringhurst's *The Elements of Typographic Style* describes a typographic proportion system — the Canon — derived from Euclidean geometry. Its core operation is Euclid's fourth-proportional construction (Book VI, Proposition 12): given three magnitudes, find a fourth such that the first is to the second as the third is to the fourth. Applied to the printed page, this construction derives the text block's dimensions and position from the page rectangle, ensuring that the text block is geometrically similar to the page.

The web presents a fundamental challenge: the "page" is the viewport, which is fixed per user at reading time but variable across devices. This article argues that the Canon can be applied to the responsive canvas — but only if its direction is inverted. On the web, the reading measure is the *given* magnitude (fixed by readability evidence and accessibility standards), not the output. The Canon's genuine contribution to web typography is the proportional distribution of the margins surrounding a fixed column, not the column width itself.

The article recovers the mathematical foundations of the Canon from Euclid (VI.12, VI.13, VI.1) and Archimedes, derives a CSS formula grounded in those foundations, identifies where the Canon's validity breaks down, and names a structural CSS limitation that the derivation exposes. No prior published work addresses this inversion explicitly.

---

## Core Finding: The Structural Inversion

This is the article's original contribution. It has not been described in prior literature on responsive typography (confirmed by systematic literature search, April 2026).

**Print Canon direction:**
page rectangle (given) → text block (proportion-derived) → type size (fits column)

**Web Canon direction (required):**
reading measure (fixed by evidence) → type size (scales from measure) → margin distribution (proportion-derived from viewport remainder)

The reading measure is fixed *before* proportion enters the calculation — set at 65–70ch by WCAG 2.2 Criterion 1.4.8 and empirical readability research (Baymard Institute). No existing fluid typography system (Modular Scale, Utopia, CSS clamp-based approaches) treats the viewport rectangle as a page-rectangle analogue or begins from this inverted direction.

---

## Derived CSS Values

All values are derived from the proportional relationships described in the article. None are chosen by design judgment.

### Font Size

```css
font-size: clamp(1rem, 1.34vw, 1.25rem);
```

**Derivation:** vw coefficient = R / (70 × ch_ratio) × 100 = 0.45 / (70 × 0.48) × 100 ≈ 1.34

Where:
- R = 0.45 — column occupies 45% of viewport (canonical print proportion: text block ~40–50% of page width)
- ch_ratio = 0.48 — advance measure of '0' glyph / em size, typical proportional text font
- 70 — target column width in ch units (WCAG 2.2 Criterion 1.4.8 maximum: 80ch; empirical optimum: 65–70ch)

**WCAG floors:** 1rem minimum (16px); 1.25rem maximum (20px). Canon proportion is active only between ~1194px and ~1493px viewport width.

### Column Width

```css
max-width: 70ch;
margin-inline: auto;
```

**Note:** Fixed by readability evidence (WCAG + Baymard), not by proportion. This is the article's central methodological point.

### Type Scale

```css
--ratio: 1.333; /* Perfect Fourth — Ptolemy's tetrachord interval */
--step-0: clamp(1rem,     1.34vw, 1.25rem);
--step-1: clamp(1.333rem, 1.79vw, 1.666rem);
--step-2: clamp(1.777rem, 2.38vw, 2.221rem);
--step-3: clamp(2.369rem, 3.17vw, 2.961rem);
```

**Derivation:** Archimedean geometric progression — step_n = step_0 × 1.333^n. Ratio r = 1.333 = Perfect Fourth (4:3) from Ptolemy's tetrachord, the same proportional interval Bringhurst assigns to page proportion in his chromatic scale of page shapes (ch. 8, p. 147).

### Vertical Padding (Canonical Margins)

```css
/* Strategy A — mathematically exact (requires JavaScript) */
padding-block: calc((50vw - 35ch) * var(--vp-aspect, 0.5625));
```

```javascript
const setAspect = () =>
  document.documentElement.style.setProperty(
    '--vp-aspect',
    (window.innerHeight / window.innerWidth).toFixed(4)
  );
window.addEventListener('resize', setAspect);
setAspect();
```

**Derivation (Euclid VI.12):**
- m_horizontal = (W − C_px) / 2 = 50vw − 35ch
- W : H = m_horizontal : m_vertical
- m_vertical = m_horizontal × (H / W) = (50vw − 35ch) × --vp-aspect

The default `--vp-aspect = 0.5625` applies on 16:9 viewports when JavaScript is unavailable.

**CSS limitation exposed:** `calc()` cannot divide two CSS length values to yield a unitless ratio. The expression `100vh / 100vw` cannot be evaluated natively. The Canon's fourth-proportional margin formula requires JavaScript or a hardcoded aspect ratio. This article names this as a missing CSS primitive: `viewport-ratio()`.

---

## Valid Range

The Canon's proportional relationships hold only within the clamp() active zone:

| Threshold | Viewport | Behaviour |
|-----------|----------|-----------|
| Lower | ~1194px | Below this: WCAG floor (1rem / 16px) supersedes. Canon yields to accessibility. |
| Upper | ~1493px | Above this: cap (1.25rem / 20px) supersedes. Text block no longer similar to viewport. |
| **Canon zone** | **~1194px – ~1493px** | Fourth-proportional relationships hold. |

This ~300px window covers standard laptop and small desktop viewports. The Canon is genuine proportion within the region where proportion is permitted to operate.

---

## Mathematical Sources

| Claim | Source |
|-------|--------|
| Fourth proportional | Euclid, *Elements* VI.12, trans. T.L. Heath |
| Similar figures | Euclid, *Elements* VI, Definition 1; VI.1 |
| Mean proportional | Euclid, *Elements* VI.13, trans. T.L. Heath |
| Area scaling (square law) | Euclid, *Elements* VI.19 Porism |
| Geometric progression | Archimedes, *Works*, trans. T.L. Heath |
| Musical ratio (Perfect Fourth 4:3) | Boethius, *De Arithmetica* II — Ptolemy's tetrachord |
| Van de Graaf canon | Bringhurst, *Elements of Typographic Style*, ch. 8, p. 173 |
| Syncopation / vertical rhythm | Bringhurst, *Elements of Typographic Style*, ch. 2, p. 38 |
| Type scale as diatonic scale | Bringhurst, *Elements of Typographic Style*, ch. 3, p. 45 |
| CRT barrier removed by Retina | Bringhurst, *Elements of Typographic Style*, ch. 9, p. 192–193 |
| "Space in typography is like time in music" | Bringhurst, *Elements of Typographic Style*, ch. 2, p. 36 |
| Column width readability (50–75ch) | Baymard Institute |
| WCAG column constraint (max 80ch) | WCAG 2.2 Criterion 1.4.8 |
| ch unit definition | W3C, CSS Values and Units Module Level 4 |

---

## What the Canon Contributes to Web Typography

Four contributions not present in current fluid typography systems:

1. **A proportion-derived vw coefficient for font size.** Current systems (Modular Scale, Utopia, custom `clamp()` formulas) choose the vw scaling coefficient by design judgment. This article shows how to derive it from a proportional relationship: the desired column-to-viewport ratio R and the typeface's ch_ratio.

2. **A fourth-proportional basis for margin distribution.** The formula `m_vertical = m_horizontal × (vh/vw)` gives the vertical-to-horizontal margin ratio a geometric justification. The Canon asks: what vertical padding is proportionally congruent with the horizontal margin, given the viewport's shape? This question is not currently asked in web typography practice.

3. **The type scale ratio as musical proportion.** Selecting r = 1.333 (Perfect Fourth) or r = 1.5 (Perfect Fifth) aligns the type scale with Ptolemy's tetrachord intervals — the same proportional system that underlies the Canon's harmonic character. This is a stronger justification than aesthetic preference.

4. **A rhythmic framework for breakpoint transitions.** Bringhurst's syncopation principle implies that CSS breakpoints are typographic syncopations: they alter the base rhythm and require it to return to phase. The new base leading at each breakpoint should maintain or restore an integer multiple relationship with the previous leading. This is a future derivation; the article names it as open work.

---

## What the Canon Cannot Contribute

- **Column width** — fixed by WCAG + readability evidence before proportion enters
- **Minimum font sizes** — fixed by WCAG; the Canon has no concept of accessibility floors
- **Font-agnostic values** — ch_ratio is typeface-dependent (0.40–0.60); the coefficient 1.34 must be recalculated per typeface

---

## Relationship to Existing Systems

| System | Direction | Viewport as given? | Proportion-derived coefficient? |
|--------|-----------|--------------------|---------------------------------|
| Modular Scale (Brown/Kellum) | font size → scale | No | No |
| Utopia (Gilyeat) | font size at anchors → fluid scale | Partially | No |
| CSS clamp() fluid typography | designer-chosen min/max | No | No |
| **Canon for Web (this article)** | **viewport → measure (fixed) → margins** | **Yes** | **Yes** |

---

## Editorial Record

Three editorial passes documented in `review-2026-04-18.md`:

1. **First review (Aristotle QA):** Four tracks. Track 4 FAIL — type scale step values implemented at ~1.2 instead of 1.333. Corrected: recalculated all steps using ratio 1.333.

2. **Second review (literature gap):** Gap statement added to abstract and §3.3; Sherman (ALA 2013) added as independent ground in §3.2; priority claim framing rejected by Biblios on logical grounds (replaced with positive description of contribution).

3. **Third review (Bringhurst chapters 2, 3, 8, and 9 read as primary sources):** Five additions from Ch. 2, 3, 9. One arithmetic error caught by Aristotle QA: §4.2 stated 33.5× — corrected to 33.6× (70 × 0.48 × 16 = 537.6; 537.6 / 16 = 33.6).

Final Aristotle QA verdict: PASS — all additions accurate, appropriately scoped, internally consistent.

---

## Keywords

responsive typography, fluid typography, typographic proportion, Bringhurst Canon, CSS clamp, vw units, ch unit, WCAG 1.4.8, Euclid sixth book, fourth proportional, mean proportional, similar figures, geometric progression, Perfect Fourth, tetrachord, Ptolemy, Van de Graaf canon, web typography, modular type scale, reading measure, viewport, margin distribution, accessible typography, container queries

---

## Citation

To cite this article:

> Biblios and Jakob (Faber-Ludens Pro AI workforce). "The Canon for Web: Applying the Euclidean Typographic Proportion System to the Responsive Viewport." Faber-Ludens Pro Research, 2026-04-18. https://github.com/faberludens-pro/research/tree/main/canon-for-web

---

## About Faber-Ludens Pro

Faber-Ludens Pro is a Brazilian UX and organisational design consultancy founded by Gonçalo Ferraz, a 20+ year senior UX leader, NN/g certified, and founder of Brazil's first Interaction Design school. This research was produced by the firm's AI workforce — a team of specialised AI agents operating under human direction — as an investigation into the mathematical foundations of responsive web typography.

The Canon for Web research is an original contribution. The structural inversion finding has been confirmed as previously unpublished through systematic literature search (Aristotle, Perplexity Deep Research, April 2026).