Camen Design Forum

Reading text online: sans-/serif, BW/WB?

append delete Martijn

Very simple question: how do you prefer your text on screen?

I’m currently working on a very simple single-column website to publish some writing and got me thinking about the layout.

Do you prefer small or large typesetting?
Do you prefer serif or sans-serif fonts for reading prose?
Do you prefer a black on white or white on black colour setting?

Any other tips you can think of around reading text off of a screen are welcome. Maybe you know of some research, or had a very peculiar client once, I’d love to hear.

I myself prefer dark on light big serif fonts (say, 16px Georgia) with a just under average line length.

Reply RSS

Replies

append delete #1. Jose Pedro Arvela

Dark on light (usually I use #333 on #fff) 14px with 18px line height sans-serif (Arial on my PC). That's what I developed for my website design (still under construction) a year ago and still my favorite.

append delete #2. Kroc

A post I linked to some time ago on using a good text size on a website: tang.waik.it/…

I don't mind what an author uses as long as they've thought about it and the content is the focus instead of ads and crap. If they've coded it well, then it won't be too hard for me to change the colour and size using CSS if I disagree with it.

append delete #3. Zifre

Usually I prefer large sans-serif typesetting.

For colors, it really depends on what I'm feeling like at the time, the type of site, and many other things. For long reading sessions, dark on light is probably best though.

append delete #4. TorbjornLunde

Some typography “best practices”
- Have a comfortable measure (66 characters is by many regarded as ideal)
- Whitespace is good. Especially the margins are important.
- More important than whether you have black on white or white on black is that the contrast shouldn’t be too high. In fact, black on white is IMHO too sharp, dark dark gray on white is better. (Only applies to screen, black on white is good on paper.)
- Whether a font is easy to read has a lot more do with whether if it has serifs or not.
- The size of the font should be appropriate, not too large and not too little. (My opinion: anything bellow 14px is way too small, and 16px seems to work well very often.)

Stuff I personally prefer:
- I prefer a larger line-height to a smaller one
- Narrower measure than what most sites have. (I despise websites that have text as wide as the browser viewport.)

<a href="webtypography.net">The Elements of Typographic Style Applied to the Web</a> has some useful resources. If you want to learn about typography I highly recommend the book Thinking With Type by Ellen Lupton. (Once that books converts you to a typography geek, get The Complete Manual of Typography by James Felici.)

append delete #5. Martijn

I shouldn’t have written black-on-white or white-on-black but have gone with dark-on-light and light-on-dark respectively. Sorry for the oversight. I was never planning to use a pure B/W colour scheme. It would probably even hard to find anyone recommending such a high contrast for reading long text on a screen. (Benchmark: #333 on #FFF. ¶ informationarchitects.jp/…)

Thanks for reminding me of that article again Kroc. I’ve read it before but I’ll bookmark it this time. It makes much the same point as Information Architects did above: the default size is 16px for a reason.

However I think you (Torbjörn) are still wrong with your assumption that the overall contrast is “[m]ore important than whether you have black on white or white on black”. Wikipedia for one will tell you that “vision and perception researchers [dispute] about whether it is actually easier or healthier to read text on dark or light background”. (secure.wikimedia.org/…) Renowned designer Mark Boulton went out of his way to mention the changes between typesetting DoL vs LoD in his series to better typography. (markboulton.co.uk/…)

I agree with the fact that the legibility of fonts is not decided by serifs, but when we’re talking about the web, you really just split it up into serif and sans-serif fonts. Either you go with a Lucida/Arial/Helvetica inspired stack, or you’re stuck to a Georgia/Times inspired stack. Since I’m only trying to collect some kind of statistic on what people prefer to read on their screen it really is a question of serifs. I’m not going to say either of them is actually proven to be better (they aren’t ¶ alexpoole.info/… I’m just looking for the one that is most preferred.

Good thing you brought up line measure, the reason I didn’t ask about it is because I wanted to ask quick and simple questions to get a base. Another way of checking your measure is the 2–3 alphabet lengths trick. You put the alphabet (meaning A-Z!) 2 or 3 times on a single line and take that as your measure. This is a good way of taking measure because it takes into account the variable letter width of the font you will be using.

Recap (TL;DR as the in-crowd calls it): thanks for the pointers Torbjörn, but I’m really just trying to collect personal preferences on the asked questions here ;-) I’m fairly up-to-date when it comes to typography.

I take a lot of inspiration from W. W. Norton & Company’s Hunting of the Snark (my all time favourite book). They use a big text size with a small measure. I uploaded some quick pictures of their typesetting here: flickr.com/…

Thanks everyone for the great input so far!

append delete #6. Martijn

Watch out, the fourth link was parsed including the ), that should go behind it, here is a clickable one: alexpoole.info/…

append delete #7. Kroc

The URL parser does ignore brackets, commas and dots at the end of URLs, but but combinations thereof :P

append delete #8. Grimmeh

Black-on-white is my usual preference, but white-on-black works decently with a sans-serif. With sans-serifs, a greater leading is more comfortable (1½–2). With serifs, the same goes, but also a normal “book” leading is fine (1–1¼), too. Size doesn’t bother me usually. Anything from 10–16 pixels is perfectly fine. What does bother me, however, is how wide the text spans. A span of 30–40 characters (or multiples of the size) across is most ideal. Anything less or more will bother me more than anything else (which is why I’m bothered by this forum’s new fluid-width design).

The link Kroc posted uses a large serif font, which is fine, but the accursed shadowing bothers me. I like the appearance of inset text effects when in short bursts but long-running text, however, doesn’t benefit IMO.

append delete #9. Martijn

Thanks for your input Grimmeh, much appreciated.

As far as this forum is concerned, Kroc’s statement from earlier (“If they’ve coded it well, then it won’t be too hard for me to change the colour and size using CSS if I disagree with it.”) obviously stands for this forum as well. If you feel the line-length is bothering you just apply something like the following to make the central column smaller again:

~~~ CSS ~~~>
body > section,
body > header > nav {
max-width: 760px;
}
<~~~

append delete #10. Grimmeh

O of course. It’s even easier than that. With Safari, I can just use the Reader feature. But you’re (I’m assuming) looking for default styling ideas—ideas that don’t need to be modified by the user, or better yet, users that won’t bother doing so.

I can write myself custom styles for any site no matter how horrendous, but it doesn’t mean they should be left to crap (not that Im calling anyone here crap :p). But do I really care enough to do that each time? Even for ones I read frequently (e.g. here). Now, of course, this forum is well designed which leaves me to be Nicky-picky; it’s left to my discretion.

But yes, I understand you were probably just trying to be helpful. :)

append delete #11. Grimmeh

Which led me to notice something: the Reader in Safari doesn’t render all the posts! Only two posts show: #3 by Kroc and #5 by TorbjornLunde. A strange bug, isn’t it?

append delete #12. Martijn

It’s not a bug, it’s a feature.

Readability (or Safari Reader) give points to wrapping elements depending on the content and then takes the wrapping element with the best score. A problem it would be having on this forum is that there is no real wrapper element that contains all content. (It ignores the BODY element because for most sites there is just too much in it.)

For the HTML of this forum it means every single reply is fighting to be the content displayed by Readability.

And yes, the idea with this topic was to get to some kind of baseline for displaying running text. Most readers will not know anything about setting their own style

append delete #13. Kroc

Not going to fix that. Everybody else's crappy site is not my problem :P If Readability relies on crappy sites, that's their problem.

append delete #14. Grimmeh

Damn, I didn’t even figure that out. I’m embarrassed. Is it okay if I make the excuse that I was half asleep? :S But that explanation certainly makes sense, Martijn. As does Kroc’s. :p

append delete #15. JJ

"Readability (or Safari Reader) give points to wrapping elements depending on the content and then takes the wrapping element with the best score"

Fail.

Reply

(Leave this as-is, it’s a trap!)

There is no need to “register”, just enter the same name + password of your choice every time.

Pro tip: Use markup to add links, quotes and more.

Your friendly neighbourhood moderators: Kroc, Impressed, Martijn