The Proportional WebForeword<br>Two summers ago, just before I started working at TigerBeetle, I picked up a new side project during downtime. I’ve always had a soft spot for CSS but I don’t know why; frankly, it’s weird, confusing, and infamously error-prone. It could be nostalgia from my early days of programming web applications. Whatever the cause, The Mono­space Web was born out of that love, and it took off way harder than I ever thought it would, with many personal blogs and even application interfaces having adopted it.<br>So, here I am again, spending weekend spare hours in a form of meditative state writing CSS. This time, inspiration struck after reading Robert Bring­hurst’s classic The Elements of Typographic Style. A challenge indeed, trying to implement the layout and typography of the book itself in the browser. Reckless, some might say! Surely the same rules don’t apply across print and web, where the latter cannot lean on a fixed page size, but has all the capabilities of a programmable platform. Perhaps, perhaps not. I’ve decided to publish regardless, and bid you to take from it what you will; if you find it pleasant or useful, that’s a wonder, and if not, that’s fine.<br>Consider this the spiritual and variable-width sequel of The Mono­space Web, and equally open for reuse. I’m a sucker for Pandoc, and that’s what I’ve used to produce this HTML, but the stylesheet should work in many other settings with minor tweaks.<br>1 Foundations<br>Typography is the craft of endowing human language with a durable visual form.

1.1 Typography<br>1.1.1 A single versatile font as the basis of the design<br>In this document and its design, I’m using two variants of the Alegreya font. The regular variant is used for body text and third-level headings. Its small-caps variant, Alegreya SC, is used for titling-caps top-level headings, small-caps second-level headings, and for inline abbreviations such as HTML. Finally, Courier Prime is used for monospace code snippets.<br>While this isn’t the most lightweight CSS ever imagined, I am mindful of the amount of bytes needing to be transmitted before you see something decent. The stylesheets are around 10kB and the fonts are just shy of 170kB.Bringhurst argues in his book for choosing a single versatile typeface rather than a hodgepodge of different ones. I think Alegreya is such a choice, and an excellent one at that.<br>1.1.2 A sizing system built on relative measurements<br>Every size is based on the root font size, which is 16px. Sizes are thus given in rem units, relative to the root font size. The following table shows how fractional, rem, and pixel measurements correlate.<br>aaaaaaaaaaa3/47/819/85/411/83/225/2340.750.87511.1251.251.3751.522.5341214161820222432404864Standard font sizes in fractional and decimal rem units, along with their px equivalents.Sizing everything based on the root font size makes it easy to scale the design, for instance on smaller viewports:<br>@media screen and (max-width: 480px) {<br>:root {<br>font-size: 14px;<br>The line height is 1.2rem, and is used as the basis for vertical alignment of all elements. Much like in The Mono­space Web — but not to the same extremes — I’ve tried to get everything globally aligned to multiples of the line height.<br>1.1.3 Justified text in modern browsers<br>As in Bringhurst’s book, body text is justified, not ragged right. To some, this is grave heresy on the web. Thou shalt not justify. That’s what we’ve all been taught. But browsers have improved over time and today it’s not unthinkable to justify text. This stylesheet uses word-break, text-wrap, and hyphens to control how words are broken and hyphenated at line breaks. The hyphenate-limit-chars property is useful to control the bounds of hyphenation.<br>The risk is of course getting horrible word spacing and rivers of whitespace in your paragraphs. If justified text doesn’t work for your uses, consider text-align: left instead. In this document I find that it works acceptably with the line lengths, font size, and the content itself. I’ve also inserted a few soft hyphens to further guide the word breaks for some tricky words.<br>“Justified Text: Better Than Expected?” goes into the weeds of text justification and modern browser support.1.1.4 Indented paragraphs for legibility<br>In keeping with tradition, each successive paragraph is indented 3ch, which is the width of three 0 (0x30) characters. As an example, the paragraph following this one leads with an indent.<br>This lets your eyes more easily scan the structure of the text and find the starts and ends of paragraphs. We’ve done this in print text for at least half a millennium, and while the web has largely settled on no indent and vertical space between paragraphs, it is still a valid approach.<br>1.2 Colors<br>You may have noticed that this design is devoid of color. It’s all black on white. Not only am I personally inclined towards this minimalism in prose-heavy documents, at least as a strong default that I depart from only with careful consideration,...