encourage on screen reading

lore's picture

I have been recently hired to create the layout for a couple of websites for a high profile university research group (don’t ask why, I really don’t have much experience in webdesign). The programmer is giving me a hard time because the only person he listens to is Mr. Jacob Nielsen. My main concern is to make the reading experience as comfortable as possible ON SCREEN so that the user doesn’t even dream about printing the page and wasting paper.

A part from considerations about the right typeface etc. do you have any information about column width? For big chunks of text, how long should the text column be? I don’t like the idea of wide chunks of text as I don’t find particularly comfortable moving my eyes (and neck) from left to right all the time when I read. The programmer wants to keep the text line very wide because he assumes people will want to print. I’m sorry if I’m not explaining it very well but I would be grateful if you could point me to interesting links on this issue, or websites that encourage people to read on screen rather than print and how to make things more comfortable for the reader.

We are designing one site with EZ Publish and another one with Moodle, anyone has an opinion on these?
I know there are tons of stuff on the web but I’m not sure which one is the most reliable and I dislike that J. Nielsen. In fact I know there’s been a discussion on him back in 2002 on Typophile but it was mainly about Flash. Thank you so much as usual.

hrant's picture

> the only person he listens to is Mr. Jacob Nielsen.

Groan. But be gentle with him, and you might just awaken a sensitivity to what Nielsen is blind to. Maybe send him to us. You might encourage him by pointing out that some of us (including yours truly) are actually programmers [too].

> The programmer wants to keep the text line very
> wide because he assumes people will want to print.

One should also assume that people will read the printout... Long line lengths are in fact more damaging in print than onscreen, because reading in print has a much better chance of getting more immersive. Try explaining that the gap between lines has to be larger the longer the lines, to ensure good "line returns", and that ends up wasting just as much space. And if you're not going to use CSS to increase leading you're sort of naturally channeled into a maximum line-length value.

Font: Georgia.
If you're ambitious, try two columns.


Gus Winterbottom's picture

"Screen vs. Print: 100 characters per line seems to be the optimal length for on-screen reading speed; however, there's a mismatch between subjective measures and objective performance. Although longer line lengths are read faster, people prefer a more moderate length. Also, a single, wide column is read faster, but users prefer multiple narrow columns. (Dyson, 2004)"
(Found at http://www.humanfactors.com/downloads/dec06.asp)

Dyson, M. C. (2004). How physical text layout affects reading from screen. Behaviour and Information Technology, 23(6), 377-393.
(Full text available for purchase at, for instance, http://www.informaworld.com/smpp/content~content=a714028354~db=all.)

For a list of other papers by Dyson related to onscreen reading, see http://www.rdg.ac.uk/typography/home.html?staff/academic/mary_d.html.

Shaikh says 95 cpl:

Some online sites:








A reference book: "Designing Usable Electronic Text," Andrew Dillon. The paperback is $57 at Amazon, but there's a ebook for $32 at http://www.mobipocket.com/en/eBooks/BookDetails.asp?BookID=7450.

aluminum's picture

First of all, the great thing about the web is you can design the page to look different on paper than it does on screen. Use a print style sheet for that.

If the text is inevitably long, just assume folks will print it. The screen is great for scanning long texts, not so great for reading long texts.

Yes, line length is important. About the only way to control that on screen is to layout your columns of text using ems as measurements. That way, if the type increases/decreases in size, so will the column, thereby preserving the line lenght. Of course, if a person happens to need large time, but still wants a narrow browser, then things get hard for them.

So...I'd set a width for your column using ems, and then set a max-width in pixels (to something like 700 pixels or so) to accomodate those that need big type but don't want to deal with horizontal scrolling.

lore's picture

Hrant: brilliant. Georgia was my first choice but it has been replaced by Verdana, because I had to be consistent with the existing logo and because of the old myth about serifs not been cool enough for websites that exists in my work environment. I haven't tried suggesting 2 columns yet but I kind of expect some resistance here too.
I have also increased leading by the programmer has encountered difficulties doing this with EZpublish. Not sure the problem is with him or with EZpublish yet.
I think I'll go through all the links and try to write something consistent to show them.
Gus, I can't thank you enough.

I'll be back with more outrage and more questions soon. Thank you so much for now. Great help.

lore's picture

Thanks Darrel, my main problem now is that I don't know much about Moodle or EZpublish yet, I'll start a course next week on EZ otherwise it'll be difficult for me to know its limitations, apparentely it's very flexible and highly customizable and...free.
And then there's the browser question. I assume horizontal scrolling is not a good idea so I kept the 700 pixels as you suggest even if I don't feel like using all available width. If it makes sense.

Norbert Florendo's picture

I'd like to quickly weigh-in on this topic.

Though I have both a strong background in print and on-screen design, I am becoming more and more in favor of letting the individual user determine their preference of reading mode.

We should no longer think of web design as static, and we should make every attempt at allowing the user to have more control on how and when the information is to be assimilated.

Roger Black discusses user selectable column layout in a recent Technology Review article. For purely onscreen reading, I, for one, would love to see user selectable screen font styles with adjustable spacing and column widths.
Food for thought...

hrant's picture

Concerning current screen widths...


lore's picture

oh yeah, and there's the screen width too. Our programmer decided 800x600. Sigh.

hrant's picture

What's your target user like? It strikes me that people using a university research site are likely not to be on cheesy machines. Even if like 10% of them are, a too-small size will be wasteful of usability. Show 'em the stats girl! They like stats.


aluminum's picture

"Concerning current screen widths…"

Do note, however, that screen width != browser viewport width. They are two different things.

As for your content management tools, the rule of thumb is that all content management systems suck, so you may or may not get to implement the CSS and HTML layout that you really want. Good luck with that as wrangling the CMS code is never fun. ;0)

lore's picture

Urgh. Thanks. I'll definitely show 'em the stats. Users are engineers, to give you an idea this department is the Brazilian equivalent of MIT and it has a very good reputation internationally but it seems that for small projects they hire students on placement and here are the results: {Link deleted} this is what I found when I arrived. I don't know, but the point is these are people that think designer=artist and think most of our choices are oriented by "taste"...especially font choice. Which is why stats and consistent theories are really important to me right now.

There's something that's not clear to me: does it mean that most CMS simply do not allow changes to leading?

Norbert: you are a visionary : )

aluminum's picture

lore...yes, stats are important, and something that is very much what design is about. That said, keep in mind that a lot of web stats are very much red herrings. Again, screen resolution is not the key issue. The size of the browser viewport is the key stat, and one that is very often not tracked at all. Yes, a lot of people will have their browser maximized, but there are a number of exceptions: those with side panels open, those with huge monitors that browser with multiple windows side-by-side, mac users, and power users who actually take advantage of modern multi-windowed OSes by having multiple windows open.

As for CMS, it depends entirely on the template engine they decide to implement. Most are really crappy. Few support true CSS layout and few support basic concepts like valid HTML. The best bet is to find a CMS that does not even try to implement a template engine allowing you and your developers to make your own templates from scratch.

lore's picture

Got it :)

hrant's picture

Darrel, the screen vs viewport distinction is valid, BUT: I think one of the few
things we can count on the user doing is expanding the viewport if the site on
hand isn't fitting.


aluminum's picture

I'd say that's true for a majority of users. It's the exceptions that one needs to consider, though.

In the end, there is no 'right' answer, of course. Personally, if the content justifies the size, let THAT be the argument. ;o)

hrant's picture

> It’s the exceptions that one needs to consider

But I'm sure you agree that you can't please everybody. In web design, I think
saying "bye bye" to the bottom 10% or so is not so bad. I tend to consider the way
left-handers, who are about 15% of the population, need "special attention" in
some things (and they know they need it). Although in other ways (like tennis)
they actually have an advantage.


hrant's picture

> most of our choices are oriented by “taste”…

That's not too unfair, but try to make this critical
distinction: the taste of users, not just yours/ours.

Also: http://typophile.com/node/34366


aluminum's picture

"But I’m sure you agree that you can’t please everybody."

True, though the web allows you to accomodate most everyone if you're willing. Granted, accomodate and please aren't necessarily the same thing.

For instance, you could easily (try to) please a majority by assuming that a majority of users with the most common screen resolution maximize their browser and optimize your layout for that specific situation, but then let your site shrink or expand to fit those browsers outside the norm.

Syndicate content Syndicate content