This page is a layout study of Tony Zorman’s dissertation-typesetting article. The prose here is new, but the typesetting samples are reproduced from his GPL-licensed source so that the wide figures, ordinary images, and images inside margin notes can be tested in the new Typst pipeline.

The central trick is simple: ordinary screenshots respect the prose measure, while a small number of two-page spreads keep the same left edge and extend through the right margin. On a phone, those spreads return to the width of the text.

For reference, here are two views of the finished dissertation. Each preview links to its two-page PDF, just as it does in the original.

Two dissertation pages with a chapter opening on the right.
Two preliminary dissertation pages shown as a spread.
The white page images are intentionally undecorated: no frame, shadow, padding, or invented caption. Their paper edges provide all the separation they need from the dark reading surface.

The document class§

A long mathematical document needs structure before it needs ornament. The useful choice is therefore the class that makes chapter openings, running matter, notes, and page geometry easiest to control. The images below are less about a particular piece of software than about keeping those decisions coherent from one page to the next.

In this reconstruction, Typst remains responsible for authoring and semantic HTML. Rust adds stable heading links and validates metadata, while CSS controls only the web reading measure. That division lets native Typst functions and imported packages remain available without surrendering the site’s typography.

The page layout§

Page geometry changes the character of a book before the reader notices any individual font. A slightly narrower measure gives equations room to breathe while keeping prose lines from becoming exhausting.

Four alternative page layouts compared at the same scale.
The important web analogue is that this tall comparison remains exactly one text column wide. It never trespasses into the sidenote area, so its scale can be read against the prose around it.

Chapter headings§

Chapter openings carry more hierarchy than ordinary section headings. The unmodified sample leaves the number out of the composition:

A chapter opening without a visible chapter number.

A successful alternative can place a large number in the outer margin, leaving the title aligned with the text block. This uses the page’s empty space as structure rather than filling it with decoration. 

#let chapter-opening(number, title) = [
  #place(right, text(42pt, str(number)))
  #heading(level: 1, title)
]

The margin§

Margin notes work best when they are treated as a second, quieter voice. The next linked spread shows notes alternating with the outside edge of each page.

Two dissertation pages with notes set in their outside margins.
Side captions use the same principle. The figure stays in the primary measure; its explanation occupies the nearby margin without forcing the main text to narrow further.

A diagram with its caption positioned in the outer margin.

Equation numbers can move outward as well. Compare the conventional placement

An equation with its number at the right edge of the text block.

with a number placed in the margin:

The same equation with its number moved into the margin.

Across a spread, the labels follow the outside edges of the pages. The preview again grows only to the right on desktop and links to the original PDF.

A two-page spread with equation labels in both outer margins.

Picking fonts§

Alphabet samples are most useful at the size at which they will actually be read. These three strips therefore fill the prose width but retain their very shallow natural proportions.

A Computer Modern calligraphic alphabet sample.

An alternative calligraphic alphabet with uppercase and lowercase letters.

A lighter Fraktur alphabet with uppercase and lowercase letters.

Text-face comparisons need a little more vertical space, but they use the same rule: scale to the article measure and preserve the image’s aspect ratio.

A paragraph and mathematics sample set in Libertinus.

A paragraph and mathematics sample set in a Palatino-style face.

Small collisions often decide between otherwise excellent typefaces. One italic form reaches uncomfortably into the following calligraphic letter

An italic letter colliding with a following calligraphic symbol.

while the alternative leaves a more convincing interval:

An italic letter with comfortable spacing before a calligraphic symbol.

Images may also live inside a sidenote.

Theorem typography is another place where details compound. Upright punctuation can remain distinct from an italic theorem body:

  • The first treatment keeps structural punctuation upright while the theorem body remains italic: An italic theorem statement with upright punctuation. The alternative lets the punctuation follow the surrounding italics: An italic theorem statement with italic punctuation.

Miscellaneous thoughts§

Microtypographic changes should be quiet enough that a reader feels the improvement before identifying it. Extra space around long dashes is a good example. Here is the unadjusted sample

Text with tight spacing around long dashes.

and the version with a little more air:

Text with additional spacing around long dashes.

Oldstyle numerals are comfortable in prose, but citation labels behave more like compact identifiers. The first sample uses text figures throughout

Citation labels using oldstyle numerals.

while the second gives the labels lining numerals:

Citation labels using lining numerals.

Finally, repeated theorem references become easier to scan when the theorem number is part of the visible label and remains the link target.

A repeated theorem label with a linked theorem number.

The result is a faithful reconstruction of the reference page’s image grammar: full-measure comparisons, right-expanding linked spreads, and illustrations that can move into the margin when they belong to the secondary voice. All of it is authored from this Typst file and generated as static HTML.