Typography: Rhythm & Proportion

I wrote this post in 2008, more than 16 years ago. It may be very out of date, partially or totally incorrect. I may even no longer agree with this, or might approach things differently if I wrote this post today. I rarely edit posts after writing them, but if I have there'll be a note at the bottom about what I changed and why. If something in this post is actively harmful or dangerous please get in touch and I'll fix it.

Horizontal motion

Bringhurst:

Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page […] The 66-character line […] is widely regarded as ideal (25).

Sabon at 16px has an alphabet length of 203 pixels, or approximately 152 points. To figure out the horizontal measure, I started with Bringhurst’s copyfitting table (29), which suggests a line length of 26-28 picas (around 450 pixels) for an optimal 66-character line. I was aiming for multiples of 32px across, so I tried 448px. This looked narrow to my eye, and sure enough it yields (in my prose) an average line length of around 61 characters. I tried 512px next — a nice number for us binary-thinking folk — and that hit the nail on the head at about a 68 character line.

To my eye this still looks very narrow, but I do find it exceptionally nice to read even long blocks of text. I have a bad habit of spurious paragraph breaks when I’m writing something I know will be read digitally; perhaps that bad habit stems from the relatively wide 80-line text editor standard. With luck this narrower column will help me break paragraphs more naturally.

Vertical motion

Bringhurst:

Most text requires positive leading. Settings such as 9/11, 10/12, 11/13, and 12/15 are routine. Longer measures need more lead than short ones (37).

I stole my choice a base font size of 16px from Wilson; his thinking about the relatively larger font size on screen seems right on. However, his 16/24 setting looked loose: Sabon looks more compact at 16px than Wilson’s Palatino. On top if that, calculating spacing in multiples of 24 seemed like exactly the kind of math I’d fuck up. Luckily, 16/20 looked quite a bit better, and I think I can handle multiples of 20 without needing to bust out the calculator.

Blocks & Paragraphs

Bringhurst:

In continuous text, mark all paragraphs after the first with an indent of at least one en (37).

For some reason I can’t quite figure out, I really can’t stand paragraph-indented text online. I much prefer whitespace-separated paragraphs — maybe because they remind me more of the monospaced text I spend most of my days writing? I tried Bringhurst’s way — I really did — but it just looked bad to me, so instead I separated paragraphs by a single line (20px).