Smart site uses dumb line length; help needed

joeclark's picture

Devout readers will recall my numerous bug reports about Typophile. Quite a few of them argued that Typophile should do what is known to work and not do what is known not to work. A great deal of knowledge about what works comes from MetaFilter, the community Weblog that is the model for such things. It’s more of a success than any remotely comparable site – 11 years old, 70,000 active users, a million pageviews a day; profitable; employs four people in tech development and moderation; moderated 24/7; includes the most important feature of all, MetaTalk, a forum to discuss MetaFilter itself.

Now let’s talk about typography. Logged-in users can choose the “classic” white-on-blue configuration for MetaFilter proper or white-on-black. My query is not about page design or colour choice, so don’t derail onto those topics, please. What I take issue with is MetaFilter’s uncontrolled line length.

It’s very simple: Lines are as wide as your window. Attached is what MeFi looks like on a 24″ monitor (Flickr version).

Everyone here knows this is insane. You cannot read text that wide. In the past, it has been impossible to get the ordinarily quite intelligent owner and developer of MetaFilter – mathowie and pb, respectively – to understand that measure is actually a problem, let alone do something about it. All it needs is one declaration in CSS (max-width on the appropriate div).

pb will not even add a unique id to the div in question so that, in a last-ditch effort, one could set up user CSS in one’s own browser to do the job. (Nobody should have to do that, but they refuse to make it possible.)

mathowie and pb seem to believe that every aspect of the appearance of MetaFilter is a component of its success. Changing anything amounts to tinkering with what works. That belief comes from a misadventure in which mathowie paid for a redesign that tanked in user testing. People don’t want the overall design to change, it seems; that’s fine, but it isn’t my issue. When you try to talk to these people about typography, they hear something else and they get defensive.

So: What I would like Typophiles to do in this thread is to explain, ideally with references, why unlimited measure like this is reader-hostile and why it needs to be fixed.

Nick Shinn's picture

Lines are as wide as your window.

Why not change the size of your window?

JamesM's picture

> You cannot read text that wide.

I agree it's hard to read in the example you posted, but it depends on the text's point size, and users can usually vary the point size of web text, if they wish.

I wear bifocals and have trouble reading tiny type, so I often have my browser bump up the point size of web text.

oldnick's picture

mathowie and pb seem to believe that every aspect of the appearance of MetaFilter is a component of its success

If this were true, we would all be driving Model Ts, cranking our landline phones to reach the operator, and grooving to wax cylinder recordings...

joeclark's picture

Changing font size is a trivial adjustment on the part of the user. Narrowing a window is a desperate measure. Seriously, Shinn: Do you spend all your browsing day narrowing and widening your browser window (there’s only one at any given moment, is there not?) to accommodate Web designers’ failures? (I assume you don’t mind when a Flash site, as from a photographer, takes over your window and resizes it for you?)

We both know you’re just being obstreperous. You don’t actually believe MeFi should not solve the problem. And in fact, were this on MeFi, I’d flag your comment as noise.

blank's picture

The human mind does not read one letter at a time. We take in groups of letters or even entire words at once, while simultaneously examining the shapes in our parafoveal vision to both consider what is coming up and to reconsider what was just in focus. As we do this our eye jumps across the page in movements called saccades. After around six or eight saccades the head starts to move instead of just the eyes. Little head movements are tiring and annoying and as lines lengthen the eye tends to jump up and down to other lines. This is why a good line length tends to fall in the range of 55–75 characters per line, depending on the font and size it is set at.

I’m pretty sure that Unger covered some of this in While You Are Reading. Bill Hill also brought it up at Typecon 2007, I’m not sure if he has written about that somewhere.

apetickler's picture

Lots of web people seem to be oblivious to the concept of an ideal line length. It's really common to see people complaining that some site doesn't fill the entire width of their browser.

Anyway, are you sure this can't be solved on the client side? A Greasemonkey script could probably add a wrapper div, and even failing that, you could style the body tag, right?

riccard0's picture

Yes, using Safari one could also use the built-in reader. But this isn’t a problem of workarounds. It’s a problem of educating people that should know better.

BlueStreak's picture

I feel a little odd being in agreement with Joe Clark, but noticed the same issue that made for a very difficult read on http://www.rastertragedy.com.

Nick Shinn's picture

We both know you’re just being obstreperous.

I know nothing of the sort. I went to the site, and, noting the long lines as instructed, immediately dragged the window smaller to see if that would make them narrower. I usually do that if I have trouble reading overly wide columns.

I have a big Mac monitor and resize windows all the time.
I haven't figured out how to do it yet on Windows.

I also resize text if I don't like the size, Command-Plus and Command-Minus do that.

However, I don't know what the statistics are for this kind of "user controlled" behaviour.

joeclark's picture

Who or what is a Blue Streak, and why does he, she, or it need to shit in this thread? Answer the question or don’t answer the question. We’ve got a Hrant manqué already.

BlueStreak's picture

>We’ve got a Hrant manqué already.

The troll role is obviously occupied already as well.

bowerbird's picture

joe said:
> So: What I would like Typophiles to do
> in this thread is to explain, ideally with references,
> why unlimited measure like this is reader-hostile
> and why it needs to be fixed.

well, first of all, the measure here on typophile.com
is too wide as well, so i don't hold out much hope for
what you're looking for, joe.

but even aside from that, i've found that "explanations"
-- even "ideally with references" -- often fail to convince.

but perhaps if you set up a scraper and then re-did their
exact same content with a more-enlightened line-length,
people could actually _see_ the difference, and thus grasp
the advantage, and then would do your agitation for you...

this would also have the side-benefit of showing people
-- like me -- how we can best solve this vexing problem.
i'm trying to get something that looks good on an iphone,
an ipad, and a 23-inch monitor, but... well, it ain't easy...

-bowerbird

tmac's picture

I haven't done a whole lot of web work. However, I recently did convince a client that the "skinniness" of the text was appropriate because the Canadian government said so:

"The number of characters on a line of text influences the speed of reading and the ease of comprehension: a line of text that is too short can slow reading and cause eye fatigue as the eye must move more often from one line to the next, whereas a line that is too long may cause the eye to skip to the next line. With respect to long texts, the ideal length of a line is between 50 and 70 characters."

See: http://lois-laws.justice.gc.ca/eng/PDF_full.html

I first read this in a thread on Typophile. (link needed!)

Rhetorically (in the ethos/pathos/logos sense), I'm sure this would carry no weight for a non-Canadian client, and even less weight in a randomly sent email to a stranger from abroad.

For typographically sensitive designers doing small websites without a lot of sidebars this will be an ongoing problem, especially with many clients using big wide monitors.

I hope this is not too pedestrian for your tastes.

bowerbird's picture

joe-

got an update on this?

-bowerbird

CreeDo's picture

I get that the original rant is a call for the website to change itself. But it probably won't happen. There is an easy fix though in the meantime.

Stylish is a nice addon for firefox and chrome users. I believe there's a mac version.
It lets you write your own CSS change to a site, and every time you visit the site thereafter, your custom CSS sticks. You can wrap those lines. Can't solve the problem for the whole world, but at least for yourself.

Firebug is another great add-on and almost goes hand-in-hand with Stylish, it makes it easier to identify the CSS class or ID or tag that needs to be changed.

With stylish installed, visit metafilter --> right click the S icon --> write new style --> for this site. Give it a name at the top. Paste this line just before the final }.

.copy { width: 500px !important; }

Change the 500px to whatever you prefer. Save and close. One could also resize the text, change to a preferred font, etc. I've tweaked a lot of the pages I visit this way and it makes your general web experience a lot nicer.

joeclark's picture

Measure is clearly not the width of the screen here on Typophile, Bowerbird.

BlueStreak, have you considered the concept embodied by the phrase “go **** yourself”? If this were on MetaTalk, your comments would simply have been deleted.

Bert Vanderveen's picture

Change the prefs in your browser… Upping the standard font size makes it easy to downwsize in the scarce cases of too tight columns.

IMHO the column width of Typophile is about 15% to wide in relation to the css-defined text size, but as a poster I try to circumvent readability problems by keeping my posts concise and using

a lot of inter-paragraph space.

bowerbird's picture

joeclark said:
> Measure is clearly not the width of the screen here on Typophile, Bowerbird.

yeah. so what? the measure here is still too wide, according to all recommendations.
(there are 84 characters in the first line of this paragraph, and that's far too many.)

moreover, metafilter.com allows the user to resize the measure at will, simply by
resizing the browser-window. this column, however, remains impervious to resize.
plus, if you zoom the text, you can actually zoom it _outside_ of the whole window,
bringing a horizontal scrollbar into play! wow! talk about the dark ages! my word!

but hey, i made a prediction that you would get no valuable insight or support from
the people here on typophile in your quest to get metafilter to change its ways, so
why don't you tell me (and everyone else here) whether my prediction was correct?

so, joe, did you get any insight or support? or not?

because i sure didn't see or hear any. none at all.

-bowerbird

Nick Cooke's picture

That's a better measure Bowerbird - not at all as irritating as your usual posts. Now all you have to do is learn how to hit the shift key at the beginning of a sentence.

bowerbird's picture

nick said:
> That's a better measure Bowerbird

no. 84+ characters is too long. consult with a reputable source.

or poll users. (in this vein, it would be interesting to see data from
metafilter.com on the browser window-width of users on their site.)

as for my "usual" style, i allow the content to dictate the breaks...

and it's a shame the tools we have today are so stupid that they
fail to respect the decision that i have made in that regard, and
insist upon enforcing a measure totally unrelated to the content.

discuss amongst yourselves... if you believe you have the chops...

-bowerbird

p.s. average line-length in this post was right at 67 characters...
which is right in line with the usual suggestion of 2.5 alphabets.

quadibloc's picture

@Joe Clark:
Narrowing a window is a desperate measure.

I can't speak for Nick Shinn, but if I'm uncomfortable with the line length on a classic HTML web site, I'm much more likely to just narrow the window than attempt to change my browser's default font settings.

I do mind the fact that I can't adjust the proportions of the page used by this forum because of how the HTML is set up. Not much, as the line width is passable, and the page fits my current browser window size on my current screen resolution without scrolling side to side, but I would prefer it if the page design could flow with the size of the browser window and accommodate smaller window sizes.

your browser window (there’s only one at any given moment, is there not?)

Huh? Why would there only be one browser window? This is another annoyance I have with the Typophile site; because the front page uses Flash, I can't just right-click on FORUMS to open it in a new window; I have to lose the front page, and the opportunity to check out the items indicated there as new or hot, in order to get to the main Forums menu. (Of course, there's the browser's back button, but then I lose the main menu, and the page has to be rendered again.) I even find tabs cumbersome - it's much better to have the actual page present on a window, so one knows right away which one it is.

Sindre's picture

Huh? Why would there only be one browser window?

Er ... because of tabbed browsing?

bowerbird's picture

so... if anyone has any examples of website design with c.s.s.
that works well from a smart-phone up to a 30-inch monitor,
i would love to see it.

-bowerbird

dirtcastle's picture

Holy crap... the Hicksdesign site is a monster of liquid layout! So many good combinations as it shuffles.

And I'm +1 for correct line length and not user resizing to get it right.

Syndicate content Syndicate content