Foreword

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.

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.

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.

1 Foundations

Typography is the craft of endowing human language with a durable visual form.

1.1 Typography

1.1.1 A single versatile font as the basis of the design

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.

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.

1.1.2 A sizing system built on relative measurements

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.

Sizing everything based on the root font size makes it easy to scale the design, for instance on smaller viewports:

@media screen and (max-width: 480px) {
  :root {
    font-size: 14px;
  }
}

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.

1.1.3 Justified text in modern browsers

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.

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.

1.1.4 Indented paragraphs for legibility

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.

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.

1.2 Colors

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, but it’s also what Bringhurst argues in his book, although with print media in mind. I find it aesthetically pleasing and easier on the eyes, and it reserves the arsenal of color, and thus the attention of the reader, for the most critical things, such as diagrams conveying complex data.

2 Elements

This document uses a few extra classes here and there, but mostly it’s just semantic HTML5 markup. This, for instance, is a regular paragraph. The examples below are indented for clarity; in normal use they’d span the full width of the text.

2.1 Headings

The design provides styles for three level of headings: top-level chapter headings (h1), section headings (h2), and sub-section headings (h3).

2.2 Emphasis

There’s no surprise here; text in <em> tags is italicized, just as you’d expect:

2.3 Horizontal line breaks

There’s no clear guidance on horizontal line breaks in Bringhurst’s book, but it seems to me like a good place for ornamentation. Here’s one:

The symbol used is U+2767 Rotated Floral Heart Bullet from the Unicode Dingbats block.

2.4 Details

We can hide stuff in the <details> element. Click the label below:

2.5 Asides

Bringhurst’s book uses plenty of side notes. In HTML we define those using <aside> elements. Along with this paragraph there’s a side note. With a large enough viewport, you’ll see it in the right margin, aligned with the top of the previous paragraph; with a smaller viewport, it’ll be collapsed into an inline paragraph with ornamentation.

2.6 Names

Proper nouns and canonical names, distinguished using the .canonical-name class, are rendered as small-caps much like in the example from Bringhurst’s book:

2.7 Blockquotes

Bringhurst talks about various ways of typesetting quotations, and the one I landed on is using an indented block, quotation marks around the text, and a footer with author, work, and year.

Je n’ai fait celle-ci plus longue que parce que je n’ai pas eu le loisir de la faire plus courte.

2.8 Figures

Images with captions are put in <figure> and <figcaption> elements, respectively. Similar to blockquotes, author and work are styled specifically using small-caps and italic text, and they share the indentation.

2.9 Lists

This is a plain old bulleted list:

Ordered lists look pretty much as you’d expect:

2.10 Tables

Tabular data is presented with a strong table head, using small-caps labels and a border. Otherwise it’s very simple, relying only on spacing.

2.11 Code Blocks

This design is geared towards prose, not code-heavy technical writing, but code blocks and inline code should read well nonetheless. The font choice of Courier Prime might feel a bit typewriter-nostalgic, but I find it goes very well with Alegreya and the overall feel I’m aiming for. Here’s some code from the stylesheet:

:root {
  --font-family: "Alegreya", serif;
  --line-height: 1.2;
  --border-thickness: 1.5px;
  --text-color: #000;
  --background-color: #fff;
}

3 Usage

Immature poets imitate; mature poets steal.

3.1 Purpose

This design is meant for web documents comprised mainly of prose: books, journals, blogs, manuals, and the like. You might use this as a basis for your personal website, a specific project, or maybe a larger wiki. You probably don’t want it in a dynamic web application.

Copy or fork what you want, modify it to your heart’s content, but don’t forget proper attribution. The sources have license information in their headers, so it’s as easy as keeping those around.

3.2 Getting started

To get started quickly, download the sources from GitHub, put the directory in your project as the-proportional-web, and add these to the head element of your HTML:

<link rel="stylesheet" href="the-proportional-web/index.min.css" />
<script src="the-proportional-web/index.js"></script>

If you’re using Pandoc, invoke it with some thing like the following set of arguments:

pandoc \
    --toc --toc-depth=2 \
    -s \
    --number-sections --number-offset=0 \
    --css the-proportional-web/index.min.css \
    -V'header-includes=<script src="the-proportional-web/index.js"></script>' \
    --no-highlight \
   -i input.md \
   -o output.html

If you do need syntax highlighting, consider using a custom template like the one used for this HTML output, stripping away the default CSS included by Pandoc.

4 Related works

4.1 The Elements of Typographic Style Applied to the Web

The most closely related work that I know of is The Elements of Typographic Style Applied to the Web by Richard Rutter. It’s a website largely mirroring the structure of Bringhurst’s book, but adapting its advice to web design. It is much larger in scope and is seemingly focused on the information itself, while this document is a showcase of the ideas and of the stylesheet that is The Proportional Web. Furthermore, I had a hard time reading Rutter’s website on my phone, with font sizes varying drastically. From what I’ve gathered, it dates back at least 20 years, and seems to have had no updates in about 8 years. I have put a lot of effort into making this design responsive yet consistent across viewport sizes. In any case, I think it’s fair to say that they serve different purposes and can happily coexist.

4.2 Tufte CSS

Tufte CSS deserves an honorable mention. From what I’ve seen, it’s had a big impact and recognition. There are small details around typesetting that I don’t like in it, but it’s overall a solid piece of work.

Afterword

There we have it, The Proportional Web. The methodology of Bringhurst’s book is rich and I highly recommend you read it. I’ve only scratched the surface in this exposition, and applied and adapted a small subset of his ideas.

This document was produced using Pandoc, html-minifier, esbuild, and GNU Make. The design borrows heavily, both in ideas and actual layout, from The Elements of Typographic Style by Robert Bringhurst.

A big thanks to U.S. Graphics and Mikael Brockman for reviewing drafts of this document.