homepage Welcome to WebmasterWorld Guest from 50.19.33.5
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / WebmasterWorld / Content, Writing and Copyright
Forum Library, Charter, Moderators: not2easy

Content, Writing and Copyright Forum

This 33 message thread spans 2 pages: 33 ( [1] 2 > >     
Web Readibility for Long Pages
most readable font?
old_expat




msg:919727
 1:23 pm on Jan 17, 2006 (gmt 0)

A published writer just me the first chapter of a yet-to-be-published book for a preview on my topical website.

The read is several screens high and I was wondering if I should set the font for that page to serif style fonts.

I heard somewhere that they are more readable.

Opinions?

 

jamesa




msg:919728
 1:43 pm on Jan 17, 2006 (gmt 0)

Serif fonts are more readable in print. The serifs add definition to the characters which makes them more easily distinguishable to the eye, especially at smaller point sizes.

The problem on the web is that the quality of the image on the screen is much worse than the printed page. That lack of clarity on your average screen actually makes serif fonts less distinguisable, especially at smaller font sizes. On the web I'd definitely lean heavily toward sans-serif. Serif is fine for larger headings and such if you like.

Aside from fonts, look at column width and line-height. With big blocks of dense text the reader can lose track of where the beginning of the next line is. Even if they don't actually lose track it'll nevertheless be a harder read for that reason. Thing to do is increase the line height on wider columns, or use narrower columns.

With wider columns the eye has a longer distance to travel from the end of a line to the beginning of the next one. Increased line-height makes finding the first word of the next line easier.

If you need dense text (like newspapers do, to fit more text on the page) use narrow columns. The eye doesn't have to travel as far so you can get away with more compressed text (closer spacing between lines).

HTH

Beagle




msg:919729
 2:24 pm on Jan 17, 2006 (gmt 0)

The only thing I'd add to jamesa's suggestions is to stick with a proportional font, where narrower characters are given less space (e.g. Arial as opposed to Courier). Non-proportional fonts are great for things that need to be in straight columns, such as rows of numbers, but I think everyone's becoming so used to reading proportional fonts (don't read much text done on typewriters anymore) that non-proportional ones are actually getting harder for people to read.

old_expat




msg:919730
 3:50 pm on Jan 18, 2006 (gmt 0)

Thanks, Guys.

I'm using line height of 130% and a 440 pixel wide column, sans-serif fonts and ems so the reader can change the text size.

Winters




msg:919731
 3:56 pm on Jan 24, 2006 (gmt 0)

I agree with the comments about line spacing. I might also suggest spacing the words out a little bit and increasing the font size, it just seems to make it easier to read, but it will make the article longer. Same with line spacing.

I would also justify it, if you don't already and I would try to avoid using narrow columns. Wider blocks with well spaced lines is MUCH better than using narrow columns if your users are going to be reading huge amounts of text (just imagine how irritating it would be to read a 3000 word article that is merely 2 or 3 inches wide), but I agree it's better to make them narrow if you are not going to space the lines out.

On a side note, I wanted to add that I like to read long text on a dark background with lighter text. It's easier on the eyes. Alot of people think it's not very professional looking, and I understand that, but as a user, I much prefer it when reading long texts.

Good luck :)

europeforvisitors




msg:919732
 4:45 pm on Jan 24, 2006 (gmt 0)

I'd go with the serif font. The "sans serif is more readable" argument" made sense in the days of CGA displays, but that's no longer true. Today, a bigger issue is font size. Since the advent of CSS, many sites have been using fixed fonts that are simply too small to read (unless you're young and have perfect eyes) at high resolution or on a small laptop screen.

IMHO, you can learn a lot about laying out text pages by viewing articles at NYTimes.com, which obviously has the resources to conduct research on the readability of body text.

tedster




msg:919733
 6:41 pm on Jan 24, 2006 (gmt 0)

Here's a good resource for fonts and typesetting on the web -- honest to goodness test data:

[psychology.wichita.edu...]

I do not use justified type, except for newpaper-style narrow columns. "Ragged right" is almost always more readable because the characters don't get spaced oddly by various browsers.

My experience has been that justified text blocks promote skimming over reading -- and ragged right encourages more actual reading. I ran a test on this a little while back on articles that extended over several pages. Ragged right always showed more users clicking through to the end.

justawriter




msg:919734
 10:52 pm on Jan 24, 2006 (gmt 0)

Short paragraphs of just two or three sentences are also more readabl as is very simple sentence structure.

Unfortunately that's not what you get in most books.

liam_bleu




msg:919735
 3:00 am on Jan 25, 2006 (gmt 0)

divide text into pages
paragraph width should just be around 5-7 inches
use verdana or tahoma for fonts (they have good character spacing)
have 1.5 font space for each line not single space

old_expat




msg:919736
 5:42 am on Jan 26, 2006 (gmt 0)

"Short paragraphs of just two or three sentences are also more readabl as is very simple sentence structure.

Unfortunately that's not what you get in most books."

Because there are a limited number of pages, I actually reformat them for the web. I'm using short paragraphs and double spacing between paragraphs

old_expat




msg:919737
 5:45 am on Jan 26, 2006 (gmt 0)

"divide text into pages"

did that

"paragraph width should just be around 5-7 inches"

using tables .. column width is set at 450px

"use verdana or tahoma for fonts (they have good character spacing)"

doing that

"have 1.5 font space for each line not single space"

I have the entire site set at 1.3 line height. Is that still too close?

old_expat




msg:919738
 5:49 am on Jan 26, 2006 (gmt 0)

"Here's a good resource for fonts and typesetting on the web -- honest to goodness test data:"

I've been a big fan of that site for a long time. I found it when looking for the best approach for my FAQ (keyword anchored)

The text I'm using is not justified. And I'm using proportional fonts.

old_expat




msg:919739
 5:53 am on Jan 26, 2006 (gmt 0)

"The problem on the web is that the quality of the image on the screen is much worse than the printed page. That lack of clarity on your average screen actually makes serif fonts less distinguisable, especially at smaller font sizes. On the web I'd definitely lean heavily toward sans-serif. Serif is fine for larger headings and such if you like."

Ah, okay .. that makes sense. I came across the font clarity/definition issue when trying to make a web page as dense as a telephone directory .. it just don't work.

Maybe when screen resolution is 100 X current technology .. which I have heard could happen with some looming technologies.

jimh009




msg:919740
 4:08 am on Feb 2, 2006 (gmt 0)

I have a text heavy site and played around a lot with the text used and the spacing as I've updated my site. I've found the line spacing is CRUCIAL. After playing around with various settings, I found setting the line spacing to 1.5em worked very well - it made reading the text very easy.

For the font, I ended up going with Verdana 12. It looks nice, is larger than your typical Times 12 point font and is more legible to read I think than either Times of Arial. For me, a larger font is important. Yes, it takes up more screen real estate, but my site draws a bit of an older crowd that doesn't like looking at tiny text. I've gotten emails thanking me for using larger text, actually - which is rather surprising. I'm still amazed that web sites that cater to the older crowd use such small fonts. Not that many people over 65 have 20-20 vision anymore - and reading small text IS a pain in the you know what. And many seniors don't know how to adjust the screen text size on their computer.

Also, no one likes to look at long, multiple paragraphs that aren't broken up - nice text and line spacing or not. At a minimum, find some areas where you can break the text up with some HR's, Photos, H2's, UL's or anything else. It's not always or possible, but always worth doing if you can find a logical way/place to do it.

Lastly, few people like REAL long lines of text - those that scroll onward from left to right seemingly forever. Lots of studies have shown that 12-15 words should be max in an article posted on the web for line length. And I've read some studies that suggest that 8 words is "ideal", being similar to newspaper columns. Still, those aren't hard-fast rules. Use what works best for your site layout and look.

Jim

old_expat




msg:919741
 6:32 am on Feb 2, 2006 (gmt 0)

Hello Jim,

"I found setting the line spacing to 1.5em worked very well - it made reading the text very easy."

I'm currently using line-height: 130%; but I'm going to try 150%. I assume I will get a similar result to 1.5em;?

"I'm still amazed that web sites that cater to the older crowd use such small fonts. Not that many people over 65 have 20-20 vision anymore - and reading small text IS a pain in the you know what. And many seniors don't know how to adjust the screen text size on their computer."

My site is a senior oriented site (expat retirement) which is one reason I'm dwelling on this.

"Also, no one likes to look at long, multiple paragraphs that aren't broken up - nice text and line spacing or not. At a minimum, find some areas where you can break the text up with some HR's, Photos, H2's, UL's or anything else. It's not always or possible, but always worth doing if you can find a logical way/place to do it."

I use a lot of "white space"

"Lastly, few people like REAL long lines of text - those that scroll onward from left to right seemingly forever. Lots of studies have shown that 12-15 words should be max in an article posted on the web for line length. And I've read some studies that suggest that 8 words is "ideal", being similar to newspaper columns. Still, those aren't hard-fast rules. Use what works best for your site layout and look."

The long reads are the book chapters and an author isn't going to appreciate my playing around with his prose.;>)

For all the other content, I like short sentences.

Thanks for the help.

dave

tedster




msg:919742
 7:22 am on Feb 2, 2006 (gmt 0)

The long reads are the book chapters and an author isn't going to appreciate my playing around with his prose.

I've found the opposite in conversation with several authors -- once they understand that typesetting conventions evolved for print, and that what I'm proposing is aimed at getting people to read their words more throughly, they often appreciate the idea. Backed up with research and concrete examples, a very persuasive argument can be made.

Of course YMMV, but it's worth a try.

peewhy




msg:919743
 8:30 am on Feb 2, 2006 (gmt 0)

There's too much confusion with ink on paper and digital 'print'.

Keep it neat and tidy with equal and even white space, make it kind to the eye.

angelos




msg:919744
 3:42 pm on Feb 2, 2006 (gmt 0)

I'd say such fonts as Georgia, Verdana and Tahoma may be considered. And of course letters' and lines' spacing are an important aspect of giving to a text a good readability effect.
Finally, what's going to be unbeatable is the content :) As I read an interesting text I don't care what the font, spacing, backgrounds or anything like this wre used for it :)

old_expat




msg:919745
 5:16 am on Feb 3, 2006 (gmt 0)

"Finally, what's going to be unbeatable is the content :) As I read an interesting text I don't care what the font, spacing, backgrounds or anything like this wre used for it :)"

It *is* good stuff. All these guys are published novelists .. one has over 17 books in print. Their stories fit into the theme of the site as well.

And the fact that the readers are sometimes getting previews of a soon-to-be-published work makes it even more appealing .. and another reason for them to visit my site more often.

jimh009




msg:919746
 8:35 pm on Feb 3, 2006 (gmt 0)

>> I'm currently using line-height: 130%; but I'm going to try 150%. I assume I will get a similar result to 1.5em;?

Yes, 150% should give you more or less the same line spacing.

isorg




msg:919747
 8:47 am on Feb 4, 2006 (gmt 0)

book chapters and an author isn't going to appreciate my playing around with his prose

Make it available for download as a PDF file.

sunnylyon




msg:919748
 9:29 am on Feb 4, 2006 (gmt 0)

Curiously, where I work (with a cheapo HP printer)HTML text prints crystal clear, but very blurred when printing PDFs. I'm sure this is abnormal, but as my printer is an extremely popular model, it might be worth bearing in mind before going down the PDF route.

Receptional




msg:919749
 12:27 pm on Feb 4, 2006 (gmt 0)

HTML text prints crystal clear, but very blurred when printing PDFs

Have a look to see if this is the way in which the PDF was designed - be it designed for the screen or the printer. This is usually in the hands of the person that makes the pdf file, but when people simply have a PDF "printer" I have found that this can often make all sorts of assumptions about the PDF format it should use. The result can be files that are very small in size, but potentially only print at 72 dpi.

Dixon.

DrDoc




msg:919750
 6:16 pm on Feb 4, 2006 (gmt 0)

For everyone's information, the default line-height (in the vast majority of all browsers) is 120% (1.2em); so, yes, it is probably better to go with at least 150% (1.5em).

If you want to acheive the "1.5 line spacing" available in many word processors, 180% (1.8em). Double line spacing is, of course, 240% (2.4em).

Remember, if you choose to use em as the unit, to always set the default (e.g. for body) font-size/line-height using a percent value in your stylesheet. Failing to do so will result in incorrect scaling in IE when changing the browser's text size settings.

treeline




msg:919751
 10:38 pm on Feb 4, 2006 (gmt 0)

you can learn a lot about laying out text pages by viewing articles at NYTimes.com

But how can you be sure they chose their fonts from research, when they seem to be named after them. Kind of hard to switch?

Times New Roman, Times, serif

docbird




msg:919752
 2:09 am on Feb 5, 2006 (gmt 0)

But surely Times originated at The Times, not some upstart rag across the big pond.

Yes, said to be good for printed pages. But I've also read that maybe not best online (NYT using; and I find their articles easy to read), where maybe for-the-web fonts like Verdana better.

I've read David Ogilvy (on Advertising: good book even if just want guff re communicating) arguing for black text on white for readability; helped put me off going for coloured backgrounds, even with strong contrast. Maybe some folk don't have monitors looking good - eg not turning up brightness when it's a sunny day.

Gotta say yes to short paras for web pages; and for contributed pieces, either editing them or advising contributors that's what you want.

Seen Nielsen advising use of bold for people who skim articles online - but I prefer to aim for readers, and try for decent writing to encourage this, with those short paras, plus headings, occasional photos, to help make text look "friendly".
Depends, though, on style of articles, and intended readership. Sometimes, if just giving info, best to use bullet points - and bold - etc.

Also, not too many links within text - I find 'em distracting when super-abundant.

tedster




msg:919753
 3:38 am on Feb 5, 2006 (gmt 0)

With regards to text color and background, note that in the offlione world (books and so on) we don't ever see pure white or pure black. When a computer monitor produces those two extremes electronically, the resulting high contrast can be a bit much. I've found that multi-page articles get a higher number of read-throughs when the background is slightly off-white and the font is only near-black.

treeline




msg:919754
 7:02 pm on Feb 5, 2006 (gmt 0)

Can you suggest some color codes for off-white, near-black that work well?

DrDoc




msg:919755
 9:44 am on Feb 6, 2006 (gmt 0)

Cold: #f0f7ff, #002
Warm: #fff7f0, #210

victor




msg:919756
 9:58 am on Feb 6, 2006 (gmt 0)

The long reads are the book chapters and an author isn't going to appreciate my playing around with his prose.

I though the issue was to do with the layout of the prose, not the content of it.

Unless the original book is printed on a continuous scroll (not a common practice these days) the author already accepts that their prose is broken into separate pages, and that the point at which the prose is broken is not under their control -- it is usually in the middle of a sentence.

Similar layout issues apply with webpages.....And you can make things better for the author. Most multi-page web articles split at the end of a paragraph, rather than mid-sentence like a book does.

All you want in exchange for fixing that bug in print layout is for the freedom to layout their text in a way that makes sense on a webpage -- ie more paargraphs than the original, but in exchange for less pages and more logical page breaks.

This 33 message thread spans 2 pages: 33 ( [1] 2 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / Content, Writing and Copyright
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved