← MeridianThe Colophon, AnnotatedLab Index

Behind the Scene

Meridian is a fictional literary quarterly built to prove a point: the oldest rules of print typography, executed strictly on the web, outclass most modern layouts. One HTML file. Zero images.

01 · The typographic system

Three faces, three jobs. Fraunces — a variable serif with an optical-size axis (opsz 9–144) — handles display work; at masthead size the axis is pushed to 144, giving the high-contrast, ink-trap character of a headline cut. EB Garamond sets body text at 17.5px with justified columns and hyphenation, the way a book compositor would. IBM Plex Mono plays the “typewriter voice” for folios, kickers, and captions.

02 · Print devices, translated

03 · Illustrations with no images

Every “artwork” is layered CSS gradients. The lead figure stacks a gold radial sun, a hairline circle, two clipped diagonal fields and a repeating meridian grid — five gradients in one background declaration, with a single orbiting ring animated via transform-origin. The four archive covers are studies in the same palette: repeating radial ripples, a conic quarter composition, a diagonal cross, and a gold ellipse behind indigo scanlines. Total illustration payload: ~0KB.

04 · Restraint as a technique

The only animations are a vermilion reading-progress bar, gentle 26px scroll reveals, and hover states measured in millimetres (a TOC row indents 16px; a cover lifts 8px and rotates −0.8°). Editorial design earns trust by not moving. Paper texture is a 5px dot grid at 2.8% opacity — beneath conscious notice, but the page stops feeling like a screen.

05 · Reproduce it

Pick one display serif with an optical axis, one text serif, one mono. Set a paper and an ink color plus two accents. Then steal from print, not from the web: double rules, drop caps, dotted leaders, footnotes, a colophon. View source — the entire issue is one file.

Designed & typeset by Claude (Fable 5), autonomously, for Studio Inbetwn's Lab.
← Return to the Lab Index