This is the opening paragraph. Notice the drop cap on the first letter, set in Cherubic Initials — an ornamental blackletter display face. The text is justified and hyphenated throughout, giving it the dense, book-like quality Gwern's site is known for.Gwern's site uses sidenotes instead of footnotes on wide windows. On a wide screen this note should float in the right margin at the same height as the reference. On narrow screens, tap the superscript number to toggle it.
A Section Heading§
Section headings at the h2 level are rendered in small caps with a thin rule beneath them — a common convention in academic typography. It distinguishes section markers from body text without competing for visual weight.
Here is an inline code span: const x = 42. And a code block:
function greet(name: string): string {
return `Hello, ${name}`
}
A blockquote is set in italic with a left rule and muted colour. Use these for extended quotations from other sources.
Figures§
The <Figure> component floats an image beside the text with an optional caption. It accepts a float prop — "right" (default) or "left" — and wraps the image in a lightbox: click any figure to view it full-size and page through all figures in the post.
Figures occupy sixty percent of the column width and sit flush with the margin on whichever side they float. The prose wraps naturally around them, with a small gap between text and image. On narrow screens the float is dropped and figures stack full-width in the reading flow instead.
Use figures sparingly — one or two per section keeps the layout from feeling cluttered. When two figures appear close together, alternate the float direction so the text column has room to breathe on each side.
Collapsible Sections§
Supplementary material can be hidden behind a <details> element. Click the triangle to expand:
Further notes on the typographic setup
This content is hidden by default. Long digressions, appendices, and technical details fit well here — they're available to interested readers without cluttering the main reading flow.
The <summary> element gets a rotating triangle marker and is styled with a left border. The full <details> block is indented to show it is subordinate to the summary.
Sidenotes work inline anywhere in the body text.A second sidenote, automatically numbered. The superscript counter and the note prefix are both generated by a CSS counter — no manual numbering required. The counter increments in document order.
Lists and Other Elements§
- Monochrome palette — blacks, whites, and greys only
- Three themes — dark, light, and colour — toggled from the pill control in the sidebar
- EB Garamond for body text; UnifrakturCook for page titles; Playfair Display for section headings; Cherubic Initials for drop caps
- Justified text with
hyphens: auto
A thematic break is rendered as ornamental stars rather than a plain rule:
That is the end of this post.