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

1. Introduction: The Canon and the Fixed Page

1.1 Bringhurst's Formulation

The Canon, as described by Robert Bringhurst, derives the position and dimensions of a book's text block from the physical page rectangle using geometric construction organised within a framework of musical proportion. Bringhurst presents the Van de Graaf canon — reconstructed by Jan Tschichold in a 1955 diagram (1955 is the date of that reconstruction, not of a book) — as the governing principle for typographic page design. That reconstruction is conventionally described as after Villard de Honnecourt (c. 1280), but Villard's Ms Fr 19093 contains no page-layout geometry: his geometric method is architectural. The transmission path runs Euclid → medieval architectural practice, with Villard as a documented practitioner → Tschichold's reconstruction → Van de Graaf → Bringhurst, and the connection between Villard's diagonal methods and page layout is Tschichold's inference, not Villard's own claim. (Ms Fr 19093 was read in an Archive.org transcription whose edition and provenance were never established.) The construction is not aesthetic preference — it is the outcome of a proportional derivation whose logic is grounded in musical interval and geometric form.

The simplest statement of the Canon's algorithm: given a page of width W and height H, the text block should have width w and height h such that W:H = w:h. The text block is similar to the page — identical in aspect ratio. Its position on the page is then determined by a margin sequence whose ratios are also derived from the page dimensions: in the Van de Graaf variant, inner : top : outer : bottom = 1 : R : 2 : 2R, where R = H/W is the page's own aspect ratio. On the canonical 2:3 page (R = 3/2) this is 2 : 3 : 4 : 6 — Bringhurst's own statement of it (Elements, ch. 8, p. 173), where the inner and top margins are w/9 and h/9 and the outer and bottom margins are twice each.

Bringhurst organises all page proportions around the chromatic scale of musical intervals — each page shape is a named interval, with the Perfect Fifth (2:3) and Perfect Fourth (3:4) as the dominant medieval page shapes (Elements of Typographic Style, ch. 8, p. 147). The musical character is structural, not nominal. The typographic system is similarly structured — all typographic elements (type size, line length, margins, inter-paragraph space) relate to a single fundamental, the page rectangle, as musical intervals relate to a fundamental tone.

Bringhurst makes this animating principle explicit in his treatment of vertical space: "Space in typography is like time in music. It is infinitely divisible, but a few proportional intervals can be much more useful than a limitless choice of arbitrary quantities" (Elements, ch. 2, p. 36). This plain statement precedes the formal system of ch. 8 and clarifies its foundation: the Canon is not a geometric curiosity applied to typography, but an expression of the same proportional logic that structures musical time — applied to typographic space.

1.2 The Web Problem

The printed page is a physical object with fixed dimensions. The web's "page" is the viewport: a rectangle whose dimensions vary across devices but are fixed for a given user at reading time. Bringhurst's Canon was designed for the former; the question we investigate is whether it can be extended to the latter.

A further historical dimension shapes this question. Writing in the early 2000s, Bringhurst assessed screen typography with caution: the best monitors of the time had "dismal resolution (about 140 dpi: less than a quarter the current norm for laser printers and less than 6% of the norm for professional digital typesetting)" (Elements, ch. 9, p. 192). At that resolution, the subtle letterforms that a proportional type scale requires — the fine gradations between type sizes, the precise spacing relationships of the Canon — were unreliable to render. Retina and high-DPI displays (220–500+ dpi) have removed this specific constraint. The technical barrier that made proportional typographic precision impractical on the web is now gone. This article is therefore not merely theoretical; it has become practically answerable in a way it was not when Bringhurst wrote.

The web problem has three structural features that resist direct translation:

1. The viewport is variable. At reading time for a given user, the viewport is fixed — Euclid's "given magnitude." But across users, it varies from 320 CSS pixels (WCAG minimum) to 2560px or wider. A proportion system that takes the viewport as its given must work at all viewport sizes simultaneously.
2. The direction is inverted. In print, the page rectangle is the given, and type size is derived from it. On the web, readability evidence and accessibility standards constrain the column width before proportion enters the calculation. The given is already determined by a different authority.
3. The ch unit is self-referential. CSS's ch unit — the width of the '0' glyph at the current font size — creates a circular dependency: font size determines ch width, which determines column pixel width, which appears to require font size to compute. This circularity has no analogue in print typography.

This article works through each of these structural features in turn.

2. The Mathematical Foundations of the Canon

2.1 The Fourth Proportional: Euclid VI.12

The Canon's core operation is Euclid's Proposition VI.12:

"To three given straight lines to find a fourth proportional."

Let A, B, C be the three given straight lines; thus it is required to find a fourth proportional to A, B, C.

Let two straight lines DE, DF be set out containing any angle EDF; let DG be made equal to A, GE equal to B, and further DH equal to C; let GH be joined, and let EF be drawn through E parallel to it.

Since GH has been drawn parallel to EF, one of the sides of the triangle DEF, therefore, as DG is to GE, so is DH to HF.

But DG is equal to A, GE to B, and DH to C; therefore, as A is to B, so is C to HF.

Therefore to the three given straight lines A, B, C a fourth proportional HF has been found. Q.E.F.

— Euclid, Elements VI.12, trans. T.L. Heath

Heath glosses this as "the geometrical equivalent of the rule of three." The algorithm is simple: given any three magnitudes A, B, C, construct D such that A:B = C:D. All Canon proportions are fourth-proportional derivations from the page.

Application to the printed page: Given page width W, page height H, and desired text block width w, the construction yields text block height h such that W:H = w:h. The text block is geometrically similar to the page.

2.2 Similar Figures: Euclid VI, Definition 1 and VI.1

Euclid defines similar rectilineal figures as those whose angles are severally equal and whose sides about the equal angles are proportional (VI, Definition 1). For rectangles, all angles are right by definition, so the similarity condition reduces to a single constraint: the width-to-height ratio must be identical.

The Canon's deepest claim is that the text block must be similar to the page in Euclid's strict sense — not merely well-proportioned, but geometrically identical in shape.

A corollary from VI.19's Porism is non-obvious and has direct typographic consequences:

"If three straight lines be proportional, as the first is to the third, so will the figure described on the first be to the similar and similarly described figure on the second."

This means: the area of the text block scales as the square of the linear proportion, not linearly. If the column width doubles, the area of the text block quadruples. Type size, which is proportional to the linear dimension of a character, must therefore scale as the square root of the area relationship — not linearly with column width. In CSS terms: a clamp-based font scale with a square-root response to viewport width would be more faithful to the Canon than a linear one.

2.3 The Mean Proportional: Euclid VI.13

Euclid VI.13 constructs the mean proportional M between two given magnitudes A and B such that A:M = M:B, yielding M = √(A×B):

"To two given straight lines to find a mean proportional. Let AB, BC be the two given straight lines... in the right-angled triangle ADC, DB has been drawn from the right angle perpendicular to the base, therefore DB is a mean proportional between the segments of the base, AB, BC."

— Euclid, Elements VI.13, trans. T.L. Heath

Application: Given viewport width W and column pixel width C, the geometric mean M = √(W×C) is the canonical "middle term" between the viewport scale and the character scale. This is the classical source for the modular type scale: a hierarchy of type sizes in geometric progression between two extremes, with ratio r = √(C/W). Utopia (James Gilyeat, utopia.fyi) implements exactly this structure — two complete modular scales at two viewport widths, interpolated — though it derives this approach from design practice rather than from Euclid directly.

2.4 Geometric Progression: Archimedes

Archimedes, in his treatment of proportion, formalises the geometric series that underlies the typographic hierarchy:

"Suppose that there is a series of magnitudes in continued proportion (i.e. in geometrical progression) a₁, a₂, a₃… so that a₁/a₂ = a₂/a₃ = … Then by multiplication, aₙ/a₁ = (a₂/a₁)ⁿ⁻¹."

— Archimedes, Works, trans. T.L. Heath

A typographic hierarchy structured as h1 = body × r³, h2 = body × r², h3 = body × r¹ is a geometric series in Archimedes's sense. Bringhurst himself names this structure the "typographic equivalent of the diatonic scale" (Elements, ch. 3, p. 45), identifying the traditional European type size series (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72 pt) as the canonical set of proportional intervals. The mathematical derivation and the practitioner's named structure converge on the same claim.

The ratio and the harmonic link: The Canon's ratio r should not be chosen arbitrarily. Bringhurst named the system after a musical form; Boethius, citing Ptolemy, applies the same fourth-proportional operation to tetrachord division — the same proportional ratios (4:3, 3:2) appear in both geometric and harmonic construction, though Boethius distinguishes the two means as distinct operations (De Arithmetica, II). The ratio for a canonical type scale should therefore be a musical interval. The Perfect Fourth (4:3 = 1.333) and Perfect Fifth (3:2 = 1.5) appear in Ptolemy's tetrachord; both are standard choices in contemporary fluid type systems. This is not a coincidence of preference but a transmission of the same proportional principle from musical theory to typographic practice. Bringhurst's chromatic scale assigns the Perfect Fourth (3:4) to page proportion; applying the same ratio to the type scale carries the same musical logic into a second register of the typographic system — an extension of Bringhurst's principle, not a quotation of his practice.

3. The Web Equivalent of the Page Rectangle

3.1 The WCAG Column Constraint (Independent Ground)

WCAG 2.2 Criterion 1.4.8 establishes maximum line length at 80 characters (40 for CJK scripts). Empirical readability research (Baymard Institute, Rudolph Rüder) identifies the optimal range for body text as 50–75 characters, with 65–70 characters as the working target for most typefaces.

In CSS, this constraint is expressed as max-width: 70ch, where ch represents the advance measure of the '0' glyph in the current typeface (W3C CSS Values Level 4). WCAG also establishes:

• Minimum line height: 1.5× font size
• Minimum paragraph spacing: 2× font size
• Minimum letter spacing: 0.12× font size
• Minimum word spacing: 0.16× font size
• Zoom requirement: text must be resizable to 200% without horizontal scrolling
• Minimum viewport: content must function at 320 CSS px width

Important methodological note: WCAG's typographic ratios are all anchored to font size, not to the viewport. WCAG's implicit model is that font size is the fundamental from which all other spacing derives. The viewport is a constraint, not a foundation. This is structurally different from the Canon's model, which takes the page rectangle as the given. The two frameworks arrive at similar column widths through entirely different reasoning. Coincidence of outcome does not mean unity of principle; these grounds are independent.

3.2 Current Web Typography Systems

Modular Scale (Tim Brown, Scott Kellum): Starts from a root font size plus a musical ratio, derives a step-based type scale. Viewport does not enter the construction. Does not address column width or margins.

Fluid Typography / CSS clamp(): Starts from minimum and maximum font sizes at minimum and maximum viewports. The preferred value interpolates linearly between these endpoints using vw units. Viewport-aware but not proportion-derived — the endpoints are chosen by design judgment.

Utopia (James Gilyeat): Starts from font size at two viewport anchors plus a ratio. Derives a two-dimensional fluid scale — type and space — across viewport breakpoints. The most proportionally rigorous current system. Still anchored to font size at viewport extremes, not to the viewport rectangle as a unified given.

Common finding across all three systems: None treats the viewport rectangle as a page rectangle analogue. All work from font size outward. The Canon's direction — page → text block → type — has no direct parallel in current web typography practice.

Sherman argues that responsive typography must account for physical viewing variables (actual display size, viewing distance, ambient context) rather than treating viewport pixels as abstract units (A List Apart, 2013) — a complementary physical ground for the WCAG evidence, independent of proportion theory.

3.3 The Structural Inversion (Original Contribution)

This inversion is the article's core finding:

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

Web Canon direction (required): reading measure (fixed by readability 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 and readability research. It cannot be a proportion output because readability constraints are empirical floors, not proportional relationships. No amount of geometric elegance makes a 20-word line readable.

The Canon's genuine web contribution is therefore not the column width — which is already determined — but the ratio of margins around that fixed column: how the space between the column and the viewport edges is distributed proportionally.

The present derivation differs from all three current systems in its direction: it begins with the viewport rectangle as a proportional foundation, treats the reading measure as the fixed given, and derives the vw scaling coefficient and margin distribution from that inversion. No existing system asks this question; the derivation is the article's structural contribution, not an extension of prior work.

4. The CSS Formula: A Fourth-Proportional Derivation

4.1 The C Term in A:B = C:D

Restating the fourth-proportional for web use:

• A = viewport width (100vw)
• B = viewport height (100vh)
• C = content column width = 70ch — fixed by readability evidence (the reference implementation in §4.6 applies it as max-width: 70ch, so narrow viewports fall below it)
• D = content column height such that A:B = C:D

The derivation: D = C × (B/A) = 70ch × (100vh / 100vw)

This gives the column a height proportionally similar to the viewport, satisfying Euclid VI.1 (similar figures). Column height is normally determined by content on the web, so this formula does not apply as an absolute height constraint — but it provides the canonical height that the text block should approach, and it can constrain the column's maximum height on single-screen contexts (e.g., a reading pane in a fixed-height application).

4.2 Font Size Derivation from Proportion

CSS's ch unit creates a circular dependency: font size determines the width of a ch, which determines the column's pixel width, which would appear to require font size to compute. In print, type size and column width are independent measurable quantities. On the web, they are coupled through the font metric.

Resolution: Accept this as the web's structural condition. Derive the vw coefficient for fluid font size from the desired column-to-viewport proportion R, along with the ch unit's typical ratio to em size (ch_ratio):

font_size = R × viewport_width / (70 × ch_ratio)
font_size as a vw coefficient = [R / (70 × ch_ratio)] × 100

For R = 0.45 (the column occupies 45% of the viewport — matching the canonical print proportion, where the text block occupies approximately 40–50% of the page width) and ch_ratio = 0.48 (typical for proportional text fonts):

vw_coefficient = 0.45 / (70 × 0.48) × 100 ≈ 1.34

With WCAG floors applied:

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

Cross-validation — Bringhurst's 30× rule: Bringhurst observes that "on a conventional book page, the measure…is usually around 30 times the size of the type" (Elements, ch. 2, p. 27). At the proportional zone entry (~1194px viewport, 16px body text), the derived column width is 70 × 0.48 × 16px = 537px ≈ 33.6× the type size — within range of the observed print norm. This convergence is noted as independent evidence, not as mutual justification: Bringhurst's ratio is an empirical print observation at standard text sizes; the derivation applies to a different medium and a specific viewport range. The conditions differ; the convergence is nonetheless real.

Critical caveat: ch_ratio is typeface-dependent, ranging approximately 0.40 (condensed) to 0.60 (expanded). The coefficient 1.34 assumes a typical proportional text font. For a specific typeface, this value must be recalculated. This typeface dependency is absent from print typography, where column width is expressed in absolute units independent of font metrics. The derivation is proportion-grounded but not font-agnostic.

4.3 Margin Distribution via VI.12

Given:

• W = viewport width
• H = viewport height
• C_px = column pixel width ≈ 70 × ch_ratio × font_size_px

Horizontal margin per side (for centered text):

m_horizontal = (W − C_px) / 2

In CSS: calc(50vw - 35ch) — this is what margin-inline: auto produces on a centered block.

Vertical margin via VI.12: Applying the fourth-proportional with A = W, B = H, C = m_horizontal, find D = m_vertical:

W : H = m_horizontal : m_vertical
m_vertical = m_horizontal × (H/W) = [(W − C_px)/2] × (H/W)

Simplified: m_vertical = H/2 − (C_px × H) / (2W)

The CSS limitation: calc() cannot divide two CSS length values to yield a unitless ratio. The expression 100vh / 100vw — the viewport aspect ratio — cannot be evaluated natively in CSS. This is a genuine gap between the Canon's fourth-proportional structure and CSS's computational primitives.

4.4 Three Implementation Strategies

Strategy A — Mathematically exact (requires JavaScript):

article {
  max-width: 70ch;
  margin-inline: auto;
  padding-block: calc((50vw - 35ch) * var(--vp-aspect, 0.5625));
}

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

The default 0.5625 applies on 16:9 viewports when JavaScript is unavailable.

Strategy B — Pure CSS approximation:

article {
  max-width: 70ch;
  margin-inline: auto;
  padding-block: clamp(2rem, 8vh, 10rem);
}

Substitutes 8vh as an approximation for common aspect ratios. Proportional intent preserved; mathematical precision lost.

Strategy C — Container queries (best accessibility profile):

body { container-type: inline-size; }

article {
  max-width: 70ch;
  margin-inline: auto;
  padding-block: clamp(2rem, 4cqi, 8rem);
}

cqi (1% of the container's inline size) responds to zoom reliably, scales with the text container rather than the global viewport, and achieves the WCAG 200% zoom requirement more consistently than vw-based approaches. This is the recommended production strategy.

Discussion of the CSS gap: Strategy A is mathematically exact but requires JavaScript for a pure CSS property, which introduces a non-declarative dependency for what should be a presentation concern. Strategy C is the best accessibility implementation but measures the container, not the viewport — a different proportion than the one VI.12 derives. This tension exposes a missing CSS primitive: a unitless ratio of two viewport dimensions, expressible natively in calc(). The Canon's derivation makes this gap visible.

4.5 The Type Scale

Applying Archimedes's geometric progression (§2.4) with the Perfect Fourth ratio (r = 1.333):

:root {
  --ratio: 1.333; /* Perfect Fourth — Ptolemy's tetrachord interval */

  /* Each step: base × r^n, clamped with WCAG floor */
  /* min = 1rem × 1.333^n; max = 1.25rem × 1.333^n; vw = 1.34vw × 1.333^n */
  --step-0: clamp(1rem,     1.34vw, 1.25rem);   /* body */
  --step-1: clamp(1.333rem, 1.79vw, 1.666rem);  /* small heading */
  --step-2: clamp(1.777rem, 2.38vw, 2.221rem);  /* section heading */
  --step-3: clamp(2.369rem, 3.17vw, 2.961rem);  /* major heading */
}

The --step-n values are each step-0 multiplied by 1.333ⁿ, with clamp bounds and vw coefficients derived proportionally. The type hierarchy maintains its internal ratios (Perfect Fourth) across the viewport range. Note: these values produce an assertive hierarchy — h1 reaches ~2.96rem (≈47px) at maximum viewport. Validate against the specific typeface and reading context before production use; the reference implementation is a specimen of the derivation, not a universal prescription.

4.6 The Complete Reference Implementation

/*
 * Canon for Web — Reference Implementation
 * Derived from: Euclid VI.12, VI.13, VI.1 (fourth proportional, mean proportional,
 *              similar figures); Archimedes (geometric progression)
 * Constrained by: WCAG 2.2 Criterion 1.4.8
 * Column: fixed by readability evidence (WCAG + Baymard), not by proportion
 */

:root {
  /* Font size: vw coefficient derived from R=0.45, ch_ratio=0.48 */
  font-size: clamp(1rem, 1.34vw, 1.25rem);
  line-height: 1.5; /* WCAG 1.4.8 minimum */

  /* Type scale: Archimedean geometric progression, Perfect Fourth ratio (1.333) */
  --ratio: 1.333;
  --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);
}

body {
  container-type: inline-size;
}

article {
  /* Column: fixed by evidence */
  max-width: 70ch;
  margin-inline: auto;

  /* Canonical vertical padding: Strategy C (container queries, best WCAG) */
  padding-block: clamp(2rem, 4cqi, 8rem);

  /* Strategy A (exact, requires JS for --vp-aspect): */
  /* padding-block: calc((50vw - 35ch) * var(--vp-aspect, 0.5625)); */
}

article p + p {
  margin-block-start: 2em; /* WCAG 1.4.8: paragraph spacing ≥ 2× font-size */
}

5. Where the Canon Breaks

5.1 The Valid Viewport Range

The Canon's proportional font-size relationship holds only where clamp() is active — between its minimum and maximum clamping thresholds.

Lower threshold: The minimum clamp activates where 1.34vw = 1rem:

1.34 × (viewport_px / 100) = 16px
viewport_px = 16 × 100 / 1.34 ≈ 1194px

Below ~1194px viewport width, 1.34vw drops below the 16px minimum — the WCAG floor applies, and the Canon's proportional relationship is suspended. On small and medium viewports (mobile, most tablets), the column fills available width and font size locks at the accessibility floor. This is not a failure; it is the Canon yielding to a higher authority.

Upper threshold: The maximum clamp activates where 1.34vw = 1.25rem:

1.34 × (viewport_px / 100) = 20px
viewport_px = 20 × 100 / 1.34 ≈ 1493px

Above ~1493px, the font size caps at 1.25rem regardless of viewport width. The column stops growing (fixed at 70ch × 1.25rem-size ≈ 672px) while the viewport continues to expand — the Euclid VI.1 similarity constraint fails. The text block is no longer similar to the viewport.

The Canon's valid range: approximately 1194px to 1493px. This is a ~300-pixel window corresponding to standard laptop and small desktop viewports. Outside this range, the Canon yields to accessibility constraints at the lower end and to the fixed reading-measure ceiling at the upper end.

5.2 The Similarity Failure at Wide Viewports

At a 2560px viewport with a 70ch column fixed at 672px:

• Margin sum = 2560 − 672 = 1888px
• Column width / viewport width = 672 / 2560 ≈ 26% — far below the canonical 45%
• The text block aspect ratio ≠ the viewport aspect ratio (VI.1 violated)

The Canon has no mechanism to address this gap within its own proportional logic. The column simply cannot grow to fill a wider viewport, because the ch unit's readability constraint caps it. This is the primary place where the print Canon and the web Canon diverge structurally.

A canonical response would be to adopt a multi-column layout at wide viewports, restoring the text block's proportional relationship to the page by adding columns rather than stretching a single one. This is beyond the scope of this article's derivation but follows naturally from the Canon's logic.

5.3 The ch Circularity as Structural Limit

As established in §4.2, the ch unit's self-referential nature means the Canon's fourth-proportional cannot derive font size without an empirical approximation (ch_ratio) that Euclid's system has no mechanism to supply. The print Canon's clean one-directional chain — page rectangle → text block → type size — has no direct CSS analogue.

This is not a solvable problem. It is the web's structural condition: font metric and layout metric are coupled in a way that print typography does not require. Any web implementation of the Canon must accept this circularity and work within it rather than around it.

6. Discussion

6.1 What the Canon Contributes to Web Typography

The Canon's web application yields three 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. The derivation in §4.2 shows how to calculate it from a proportional relationship: the desired column-to-viewport ratio R and the typeface's ch_ratio. The coefficient is not arbitrary; it is derived — though the derivation requires a typeface-dependent empirical input (ch_ratio) that Euclid's system has no mechanism to supply (§5.3). The derivation is proportion-grounded but not font-agnostic.

2. A fourth-proportional basis for margin distribution. The margin formula m_vertical = m_horizontal × (vh/vw) gives the vertical-to-horizontal margin ratio a geometric justification rather than a visual one. 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.

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 for these specific ratios than "it looks right."

4. A rhythmic framework for breakpoint transitions. Bringhurst identifies a syncopation principle for printed typography: intrusions into the text (headings, block quotations, figures) create "syncopations and variations against the base rhythm of regularly leaded lines" that must "return after each variation precisely on beat and in phase" — the total vertical space consumed by each departure must be an even multiple of the basic leading (Elements, ch. 2, p. 38). CSS breakpoints are typographic syncopations in the same sense: they alter the base rhythm (font size, leading, column width) and require the rhythm to return to phase after the transition. The Canon's principle implies a concrete breakpoint constraint: the new base leading at each breakpoint should maintain or restore an integer multiple relationship with the previous leading. Fully deriving this constraint — expressing it in clamp() transitions at each breakpoint — is a third CSS application of the Canon that this article does not work through, but that follows naturally from the syncopation principle and merits a dedicated derivation.

6.2 What the Canon Cannot Contribute

The Canon does not determine:

• Column width. Fixed by readability evidence and WCAG standards, before proportion enters.
• Minimum font sizes. Fixed by WCAG. The Canon has no concept of accessibility floors.
• The exact pixel values at any viewport. These follow from the proportional structure and the WCAG constraints, not from the Canon's geometric construction alone.

6.3 The CSS Missing Primitive

The derivation exposes a gap in CSS: there is no native way to compute the ratio of two viewport dimensions (vh/vw) as a unitless scalar in calc(). The fourth-proportional for web margins cannot be expressed purely in declarative CSS without JavaScript or a hardcoded aspect ratio default.

This gap is not an obstacle to implementing the Canon — Strategy C (container queries) provides a workable production path. But the gap is worth naming explicitly, as it identifies a specific limitation that would need to be addressed for the Canon to be expressible in a single, exact, pure-CSS formula. A CSS function of the form viewport-ratio() — returning the ratio of two viewport dimensions — would close this gap.

6.4 The Bringhurst Question

Bringhurst's The Elements of Typographic Style (ch. 8, version 3.0) has now been read as a primary source (April 2026). Three findings are directly relevant to this article.

The Van de Graaf canon confirmed. On p. 173, Bringhurst presents the canonical medieval page construction for a 2:3 page: margins s:t:e:f = w/9 : h/9 : 2s : 2t = 2:3:4:6, with the textblock depth equalling the page width (d = w). He attributes this construction to "Jan Tschichold, 1955, after Villard de Honnecourt, France, c. 1280." The Euclid VI.12 derivation in §4.3 yields m_vertical = m_horizontal × (H/W) — the vertical-to-horizontal margin ratio equals R = H/W. The derivation therefore recovers the top-to-inner relation (R : 1) of the Van de Graaf canon, and only that relation: the canon further requires outer = 2 × inner and bottom = 2 × top, an across-the-spread asymmetry that a centred web column cannot produce. Within that limit, the fourth-proportional derivation and the Van de Graaf canon agree.

The musical grounding confirmed and stronger than described. Ch. 8 is organised around a "Chromatic Scale of Page Proportions" — every page shape is a named musical interval. The Perfect Fifth (2:3) and Perfect Fourth (3:4) are identified as "the favorite page shapes of the European Middle Ages, which are still in use today" (p. 147). The musical character of the system is structural throughout ch. 8, not merely named.

Bringhurst does not use Euclidean language. He grounds the system in musical intervals and geometric figures (pentagon, hexagon, octagon). He does not cite Euclid's propositions. The Euclidean derivation in this article — from VI.12, VI.13, and VI.1 — is our contribution: a rigorous derivation of the same system from its geometric foundations. The two approaches are consistent; they operate at different levels of mathematical explicitness.

7. Conclusion

Bringhurst's Canon can be applied to the responsive web 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 derivable by proportion. The Canon's genuine contribution is the proportional distribution of the margins surrounding that fixed column.

The derivation recovers the Canon's mathematical infrastructure from Euclid VI.12 (fourth proportional), VI.13 (mean proportional), and VI.1 (similar figures), and extends it to CSS via a fluid font-size formula whose scaling coefficient is proportion-derived rather than design-judged. The type scale's ratio is grounded in Archimedes's geometric progression and Ptolemy's tetrachord intervals. The margin formula applies the fourth proportional to the viewport's aspect ratio, exposing a genuine missing primitive in CSS.

The Canon holds within a bounded viewport range — approximately 1194px to 1493px — and yields gracefully to accessibility constraints outside that range. This is not a failure of the approach but its proper boundary condition: the Canon is a structural system for proportional space, not an absolute one. Euclid's constructions require given magnitudes; the web provides them, but constrains them too. The Canon on the web is genuine proportion within the region where proportion is permitted to operate.