Horizontal motion
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
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
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).
Comments:
I often read with Firefox zoomed in, which I guess makes me... resistant to this kind of typography. When I zoom in on your site I'm seeing character widths like 35-45 characters per line, which is much less readable. The lines in the comment box also do not line up with text, and the input fields have truncated text.
I don't think my eyes are particularly bad, but when casually reading I frequently like to scale up the text size because it feels more comfortable. But on narrow-column sites with a fixed pixel width, this is frustrating.
Also, there's the consideration of how to present a post that isn't purely text in paragraph form. For instance, a figure, code example, or outline. These can be truly horrendous in a layout like this. But if you want to make your posts more readable, introducing things that break from paragraph form is an excellent way to do that: it makes the post parsable without having to read the text, it provides a kind of organization for the reader, and just generally makes it more enjoyable to read. If you have a setting, per-post, that says "to hell with my site layout, I'm laying this page out just how I want it" then perhaps you are ready for that future post where you'll want more horizontal space. But of course most programs do not allow this (though unlike most people you'll be able to change your mind if you do write that post, while most blog writers are cursed with the theme designers choices).
I usually browse with the text size at least +1 myself, actually, so I'm more than familiar with the stuff that annoys you! If I were working on anything other than my personal site, I would use ems or percents. Fact is, though, that this site is pretty much designed just for me, so I feel comfortable doing stuff here that I wouldn't dream of doing in a professional context.
I've not even *glanced* at this site in anything made by Microsoft, for example.
However, I should point out that good browsers like the Firefox we both use will happily let you redefine what "pixel" means: turn off "View → Zoom → Zoom Text Only" and Firefox will do the right thing when you zoom in. As far as I'm concerned, this is a Good Thing: I *ought* to be able to design my site using whatever units make most sense for me, and browsers *ought* to let me view the web using whatever size, style, and layout work the best for you. Sometimes it even works out that way!
[The comment box still doesn't work right, but that's because the underlines are a nasty background-image hack. If you know any way to do it better, lemme know!]
It looks good-- and very interesting reading, thanks for the write-up. But would this apply to scanning as well? (which is how most people read on the web). I would think for that purpose things like link placement, scrollbars, highlighted text, bullet points, text size, etc. would far outweigh the need for proper line length. Or maybe I've been brainwashed my Jacob Nielsen :)
Cool comment form BTW!
Leave a comment: