Readability - CD/web site
Nelson, Julie
We're in the initial stages of developing the layout for the main
navigation/home page. So far, we've developed 2 different layouts. One
has a white background, black text, navigation buttons with a red border
at the top, a few images & the very top of the page has the company &
computer system logos with a black background behind it. The other
layout has a black background, white text, the same company & computer
system logos with a black background & a few images. It might just be
my eyesight, but it's more challenging for me to read the white text on
a black background than black text on a white background (or maybe this
is just what my eyes are used to).
Do you know of any readability studies available on the web that
reference what background color/font color/font size & type is easiest
to read on a CD or web site. Our long term goal is to include a good
deal of this content on our intranet site, so it would be helpful if the
CD & web site had a similar layout. I'm researching this on Google, but
I thought I'd check here too. I'm guessing I could find something on
Jakob Nielsen's site.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
WebWorks ePublisher Pro for Word features support for every major Help
format plus PDF, HTML and more. Flexible, precise, and efficient content
delivery. Try it today!. http://www.webworks.com/techwr-l
Doc-To-Help includes a one-click RoboHelp project converter. It's that easy. Watch the demo at http://www.DocToHelp.com/TechwrlList
---
You are currently subscribed to TECHWR-L as net...@vm.sas.com.
To unsubscribe send a blank email to
techwr-l-u...@lists.techwr-l.com
or visit http://lists.techwr-l.com/mailman/options/techwr-l/netnews%40vm.sas.com
To subscribe, send a blank email to techwr...@lists.techwr-l.com
Send administrative questions to li...@techwr-l.com. Visit
http://www.techwr-l.com/techwhirl/ for more resources and info.
Janice Gelb
>
> Do you know of any readability studies available on the web that
> reference what background color/font color/font size & type is easiest
> to read on a CD or web site. Our long term goal is to include a good
> deal of this content on our intranet site, so it would be helpful if the
> CD & web site had a similar layout. I'm researching this on Google, but
> I thought I'd check here too. I'm guessing I could find something on
> Jakob Nielsen's site.
>
Here is what looks like a pretty thorough study:
http://web.umr.edu/~rhall/commentary/color_readability.htm
called "Color Combinations and Readability." It cites
other studies and claims that the effects of colors on
readability are not consistent. It provides a w3c algorithm
for differences in background brightness and text.
I found another study at http://www.aprompt.ca/WebPageColors.html
called "Testing the Readability of Web Page Colors."
My Google search terms were "color readability web site"
and I got quite a few hits.
-- Janice
Peter Neilson
difficulty reading anything at all on a dark background. It
is somehow artistic, I imagine, to use black on dark brown, or
dark red on dark blue (or vice-versa). My studies reveal that
a dark background leads me into taking a particular set of actions:
1. If the website is unimportant, I look elsewhere, or and go brush
the horses, or darn socks, or do some other pleasant activity.
2. If it has truly necessary information, I try "select all" to
see if some sort of reversal improves legibility. If that
fails I try copying the text and pasting it into Emacs or
some other editor. Perhaps instead I try opening the website
with lynx; or maybe I edit the HTML source, correcting the
colors, and save it onto my own machine so I can try reading
it as it should have appeared.
I wonder what actions others may take. Do they curse sliently, or
maybe throw shoes? Do they involve anyone who'll listen in a
rant about lousy web design? Do they go and get drunk, or at
least go raid the candy machine?
Dark red on dark blue generates a peculiarly high level of eyestrain,
because the eye must try to focus on two wavelengths that differ by
nearly half an octave. Tiny type is harder than larger. The efceft
cluod be made wsroe olny by jmulibg the lteters in all the wrdos.
The purpose of using the dark background eludes me. Perhaps the
webmaster desires power over the reader. Perhaps he has a fondness
for bathing-machines, which he constantly carries about, and
believes that the add to the beauty of scenes, a sentiment open
to doubt.
Cassandra Greer
Oh the headaches I had in the days when I had to use monitors that were
green/white text on a black background! I need light (ask my husband -'Turn
on the lights, dang it!' and have even resorted to bringing a lamp when
working on site. Give me black text (at least 12 pt for my 1024x769 px
screen) on a white (or very light) background anyday! I prefer serif fonts
(e.g., palatino is my favorite :) but am not a stickler about it.
Cass the blind (who only stays on a dark site if she absolutely has to but
runs away as soon as possible)
--
Cassandra Greer
Technical Translation and Documentation
Spilhofstr. 16
81927 München
+49 (089) 94004794
cassandra (at) greer.de
cassandragreer (at) mac.com
Kathy Bowman
Julie wrote:
"My team is developing a marketing CD for our retail computer system.
We're in the initial stages of developing the layout for the main
navigation/home page. So far, we've developed 2 different layouts. One
has a white background, black text, navigation buttons with a red border
at the top, a few images & the very top of the page has the company &
computer system logos with a black background behind it. The other
layout has a black background, white text, the same company & computer
system logos with a black background & a few images. It might just be
my eyesight, but it's more challenging for me to read the white text on
a black background than black text on a white background (or maybe this
is just what my eyes are used to).
Do you know of any readability studies available on the web that
reference what background color/font color/font size & type is easiest
to read on a CD or web site. Our long term goal is to include a good
deal of this content on our intranet site, so it would be helpful if the
CD & web site had a similar layout. I'm researching this on Google, but
I thought I'd check here too. I'm guessing I could find something on
Jakob Nielsen's site."
Hi Julie,
Where the text is very large, white on a black background is not too bad
provided it is used for headlines or labels. But as soon as I have to
read more than a few words of white text on a dark background, I find it
hard going and uncomfortable. Pages that use this can look quite good
from a distance, but are not easy to read.
Beware graphic designers who put 'artistic' considerations above
readability. National Geographic magazine went through a stage of
presenting some of their articles with callouts and headings that
wrapped over pages, and used backgrounds, font faces and colours that
made reading the articles really hard work. I nearly cancelled my
subscription, but they returned to sanity after a couple of issues.
Your first layout sounds the better option by far.
Regards,
Kath Bowman
Edgar D' Souza
> Hi Julie,
> Where the text is very large, white on a black background is not too bad
> provided it is used for headlines or labels. But as soon as I have to
> read more than a few words of white text on a dark background, I find it
> hard going and uncomfortable. Pages that use this can look quite good
> from a distance, but are not easy to read.
>
> Beware graphic designers who put 'artistic' considerations above
> readability. National Geographic magazine went through a stage of
> presenting some of their articles with callouts and headings that
> wrapped over pages, and used backgrounds, font faces and colours that
> made reading the articles really hard work. I nearly cancelled my
> subscription, but they returned to sanity after a couple of issues.
>
> Your first layout sounds the better option by far.
Hi Julie..
If this is a mutually exclusive choice, please count my vote for the
white background with black text.
There will, however, probably be around 10 or 15% of your readership
who, out of pure orneriness, will complain that they preferred the
black background scheme. (Or maybe they really do like it that way!).
Unless you're going to be doing a lot of Flash and/or images as an
integral part of the design, why not offer *both* color schemes to
readers? Two CSS files could probably take care of it all.
Regards,
Ed.
Nuckols, Kenneth M
>
> 2. If it has truly necessary information, I try "select all" to
> see if some sort of reversal improves legibility. If that
> fails I try copying the text and pasting it into Emacs or
> some other editor. Perhaps instead I try opening the website
> with lynx; or maybe I edit the HTML source, correcting the
> colors, and save it onto my own machine so I can try reading
> it as it should have appeared.
>
I take a similar approach, although I generally just highlight sections
of the text I want to read. Generally I see this behavior on
non-commercial websites when I'm browsing from home (generally browsing
individual or "artsy" web sites to get design ideas for personal
projects of my own). If there's ever a very large chunk of text I want
to read, I will select all of it, then switch over to Open Office Writer
and "paste without formatting" to drop the text in as black on white so
I can read it clearly.
CONFIDENTIALITY NOTICE: This e-mail may contain information that is privileged, confidential or otherwise protected from disclosure. If you are not the intended recipient of this e-mail, please notify the sender immediately by return e-mail, purge it and do not disseminate or copy it.
Nuckols, Kenneth M
>
> If this is a mutually exclusive choice, please count my vote for the
> white background with black text.
> There will, however, probably be around 10 or 15% of your readership
> who, out of pure orneriness, will complain that they preferred the
> black background scheme. (Or maybe they really do like it that way!).
>
I remember way back in the early 1990s (maybe 91 or 92) when I was first
asked to start using Microsoft Word instead of WordPerfect that I had
been using since 1988 or so, I was really annoyed with the different
look to the screen. When I quickly discovered you could change Word's
color scheme to be white text on a blue background like WordPerfect, I
did it. I think part of the issue was that it "looked" familiar; the
other part was that I just found the white screen too dang bright and it
would hurt my eyes to look at it for too long.
Back in those days I was writing text only documents--once I got to the
point where I was actually incorporating graphics, I came to realize the
sense and necessity of having a white screen to match the white paper
and black writing to match the black text and grayscale or color images
to match whatever the printer would produce. I've become used to that
now and I would hate to try to visualize some color scheme on my screen
that didn't match the color scheme of the final deliverable, regardless
of the format (since we're now starting to develop online
documentation).
Geoff Hart
retail computer system. We're in the initial stages of developing the
layout for the main navigation/home page. So far, we've developed 2
different layouts. One has a white background, black text, navigation
buttons with a red border at the top, a few images & the very top of
the page has the company & computer system logos with a black
background behind it. The other layout has a black background, white
text, the same company & computer system logos with a black background
& a few images. It might just be my eyesight, but it's more
challenging for me to read the white text on a black background than
black text on a white background (or maybe this is just what my eyes
are used to).>>
My experience is the same as yours: black text on a white background
works better. Indeed, reversed type is sufficiently uncommon in
materials designed to be read (as opposed to "designed to be pretty")
that unfamiliarity alone makes reversed type a poor choice. However,
note that "unfamiliarity" is the key word: in the bad old pre-Mac days
of using dumb computer terminals, I found white on black much easier
than the alternatives (amber and green text) and had no complaints
about its efficiency.
One powerful argument against white text on a black background or any
other form of reversed type in large quantities: Anyone who has to
print out the information will hate you with a fiery passion. Several
pages of black background will drain your inkjet and poison you with
ink fumes, or will clog your laser printer with dropped toner. Yes,
there are ways around this, but most users won't know them. (I say that
based on anecdotal evidence from a great many years spent sorting
through the output tray on a departmental laser printer trying to find
my own printout.)
<<Do you know of any readability studies available on the web that
reference what background color/font color/font size & type is easiest
to read on a CD or web site.>>
Nothing I can put my hands on without a fair bit of digging, but a
Google using appropriate keywords (legibility, contrast, text color,
reversed type, etc.) should turn up a range of information. Of course,
you need to filter that information; peer-reviewed articles in journals
are more reliable than speaker notes, and university Web sites are more
reliable than Usent postings.
My gestalt for what I have read is that (as noted above) familiarity is
the biggest issue so long as you preserve strong contrast between the
type and its background and choose an appropriate font (serif and sans
both work fine at an appropriate text size). Perhaps more importantly,
readers vary in their abilities and preferences.
My take on typographic design for the screen is that onscreen text
should be adjustable by the reader so they can choose their own font,
size, and foreground and background colors. Why not build this utility
into your software? It should be trivial to offer the reader a choice
of several CSS styles if you're using HTML, or several different
versions of the same file if you're using fixed-format material such as
PDF.
<<I'm guessing I could find something on Jakob Nielsen's site.>>
Wouldn't surprise me, but you'd be ill-advised to accept his
pronouncements uncritically. There's gold to be found there, but also
much pyrite and glitter paint.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --
Geoff Hart gh...@videotron.ca
(try geof...@mac.com if you don't get a reply)
www.geoff-hart.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
James Jones
background thing, I say to myself 'let's get outta here as soon as
possible'. Trying to interpret info that is in that format tends to give me
a headache.
As to why anyone would design info in such a way: I would guess that
people who do that are much enamored of computer technology (and who isn't)
and also want to emulate the reverse type and sculpted typography that you
can see on real-world products such as brand and product names. That kind of
design belongs to and works well in that world. But it's not for the PC and
Internet world. When I see a small shiny plastic object in my home I expect
to see, occasionally, a logo or a product name, etc. But when I surf the
Web, I don't like to happen upon a website that attempts to chisel and
sculpt info into my skull. Jim Jones http://www.tinyurl.com/4arjc
-----Original Message-----
> 2. If it has truly necessary information, I try "select all" to
> see if some sort of reversal improves legibility. If that
> fails I try copying the text and pasting it into Emacs or
> some other editor. Perhaps instead I try opening the website
> with lynx; or maybe I edit the HTML source, correcting the
> colors, and save it onto my own machine so I can try reading
> it as it should have appeared.
>
I take a similar approach, although I generally just highlight sections
of the text I want to read. Generally I see this behavior on
non-commercial websites when I'm browsing from home (generally browsing
individual or "artsy" web sites to get design ideas for personal
projects of my own). If there's ever a very large chunk of text I want
to read, I will select all of it, then switch over to Open Office Writer
and "paste without formatting" to drop the text in as black on white so
I can read it clearly.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
David Loveless
thin portions of the letter strokes are "absorbed" by the dark
backgrounds. There are numerous sources dealing with this topic, but I
would suggest reviewing the Review section of Robin Williams' (not the
actor) The Non-Designer's Type Book. Editing by Design by Jan White is
also very good on this topic.
If you want to avoid it in your own designs, make sure you use a font
with equal stroke widths. Your best bets are going to be Sans Serif
fonts, but even some of those have a big variation in stroke widths.
And I agree with Peter Neilson. If the website is unimportant, I look
elsewhere. White (or any color) on black is just not intelligent
design. The only site I consistently visit that is dark with white is
Mugglenet.com, but I'll admit my raving lunacy fanaticism craziness
when it comes to Harry Potter.
Dave
cup...@syclone.net
I just encountered the most annoying ad yet - a touch screen panel on the
gas pump that sells additives. For only $8.95 you can add gas additive
while the gas is going into your car and it's added to your bill. The
panel swings out in front of the pump, and the audio is very loud to be
able to be heard over the traffic noise. Once the sales spiel is done, you
can turn off the audio to keep from hearing it again (and again and
again). I wonder how long it will take someone to "select all" of the
panel and destroy it. I'm very glad not to have been a part of that
project.
Carolyn
> You are currently subscribed to TECHWR-L as cup...@syclone.net.
>
> To unsubscribe send a blank email to
> techwr-l-u...@lists.techwr-l.com
> or visit
> http://lists.techwr-l.com/mailman/options/techwr-l/cupton%40syclone.net
Katie Kearns
>
>
> Do you know of any readability studies available on the web that
> reference what background color/font color/font size & type is easiest
> to read on a CD or web site. Our long term goal is to include a good
> deal of this content on our intranet site, so it would be helpful if the
> CD & web site had a similar layout. I'm researching this on Google, but
> I thought I'd check here too. I'm guessing I could find something on
> Jakob Nielsen's site.
I'd say one of the reasons not to choose white on black is that is makes
printing the pages (if that's a concern) absolutely horriffic. Depending on
the browser and settings, you either end up with nothing, or (worst case)
you waste an awful lot of ink....
-Katie
Laurel Hickey
for printing. Depending on how the pages are set up, you can NOT print
certain defined areas (like the graphics at the top) and the menu (need
their own unique ids) and you can specify background and text styles and
colours that are different than for the screen style sheet.
For example, the print css file could have this in it which restricts
printing of some areas, leaves the background plain and lets the page reflow
to the paper size:
body {
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
}
#maincontent {
font-size: 0.7em;
line-height: 1.5em;
}
#maincontentwide {
font-size: 0.7em;
line-height: 1.5em;
}
#sidebar, #introControls, .navbar, .navheading {display: none;}
While the regular css file could have this:
body {
background-image: url("../images_layout/xxx_pbg.jpg");
background-color: #B6A29B;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 101%;
margin: 24px 0;
min-width: 748px;
padding: 0;
}
#maincontentwide {
background-color: #F8F9F1;
float: left;
font-size: 0.8em;
line-height: 1.5em;
padding: 0 24px;
width: 670px; /*528*/
text-align: left;
}
For a more detailed explaination and how to tell the browser which css to
use for when, see http://www.alistapart.com/stories/goingtoprint/
-------------------------------------
Laurel Hickey
2morrow writing & document design
lhi...@2morrow.bc.ca
http://www.2morrow.bc.ca
>
> Do you know of any readability studies available on the web that
> reference what background color/font color/font size & type is easiest
> to read on a CD or web site. Our long term goal is to include a good
> deal of this content on our intranet site, so it would be helpful if
> the CD & web site had a similar layout. I'm researching this on
> Google, but I thought I'd check here too. I'm guessing I could find
> something on Jakob Nielsen's site.
I'd say one of the reasons not to choose white on black is that is makes
printing the pages (if that's a concern) absolutely horriffic. Depending on
the browser and settings, you either end up with nothing, or (worst case)
you waste an awful lot of ink....
anadem
which eliminates all the horrid dark backgrounds and funky text colors
on the current page, leaving the page nicely black on white. Easy to
find, by googling for "bookmarklet zap", and simple to add to any
browser.
Actually there are a number of different flavors of the bookmarklet, to
suit different tastes.
Blount, Patricia A
I couldn't help but laugh when I read this... many, many years ago when
I was working for Entenmann's, the company had replaced all the loud,
clacking typewriters with IBM PCs and a word processing program called
MultiMate. This was well before the days of WYSIWYG, the mouse, Windows,
and even the internet.
MultiMate was a decent word processor, once you memorized all your
keyboard combinations. I had to stick labels on every key on my keyboard
to keep 'em all straight. If you wanted to underline something, you had
to mark the start and end points of the section with codes.
Anyhow, the one thing that made me absolutely insane was that MultiMate
displayed light text on a dark background. I don't remember if it was
black and white or green and white, all I remember is the pain.
I went through every paragraph in the user manual. There was no website
back then, so I called the 800 line and badgered those poor folks until
finally, someone, somewhere could recall the command for flipping the
display to a light background with dark text. It was actually fairly
simple, but since this was my first experience with a computer, I hadn't
a clue where to even find such a command.
Finally, I figured out how to do it and within days, word had spread to
all the MultiMate users on my floor that I'd found a way to stop
eyestrain. I became so busy trying to explain to everyone how to change
their displays that I ultimately had to type up the directions and
distribute them.
This single event was my foray into technical writing. It happened in
1986 or maybe '87...
Thanks for bringing back memories!
Patty
Julie wrote:
"My team is developing a marketing CD for our retail computer system.
We're in the initial stages of developing the layout for the main
navigation/home page. So far, we've developed 2 different layouts. One
has a white background, black text, navigation buttons with a red border
at the top, a few images & the very top of the page has the company &
computer system logos with a black background behind it. The other
layout has a black background, white text, the same company & computer
system logos with a black background & a few images. It might just be
my eyesight, but it's more challenging for me to read the white text on
a black background than black text on a white background (or maybe this
is just what my eyes are used to).
Do you know of any readability studies available on the web that
reference what background color/font color/font size & type is easiest
to read on a CD or web site. Our long term goal is to include a good
deal of this content on our intranet site, so it would be helpful if the
CD & web site had a similar layout. I'm researching this on Google, but
I thought I'd check here too. I'm guessing I could find something on
Jakob Nielsen's site."
Prashanth Menon
Until now my knowledge on light vis-a-vis readability was limited to books
and websites. The recording activity taught me how surrounding light
influences the selection of font color and background color.
On the first day of my visit to the media research center, I was shown to
the production room. The setting was dark and the production room had two
men (a cameraman and a production engineer), a monitor facing upwards, a
plain glass resting on a tripod stand behind the monitor and slanting at 60
degrees to the monitor, and a camera behind the plain glass wrapped in black
cloth. About five feet in front of this setup was a table and chair. Cold
sweat formed on my forehead as I was ushered in. Dust filled the air as I
placed my book on the table.
From where I was seated I could see the icons on the 15-inch monitor;
however, I could not tell one icon from the other though they were unique
and differently colored. I loaded my presentation slide and opened it. Now
instead of a pale green desktop screen I could see the power point slide
reflected off the plain glass hiding the camera from my view. The 42-inch
font was loud and clear on the white background but each line had only three
or four words. Even as I was wondering how many times I'll have to scroll
the pages to get to the end of the presentation, the production team decided
to test their lighting system. Four flash lights illuminated bright light on
my face from all directions. I could barely see anything in front of me.
When my eyes finally adjusted to the surrounding bright light, I understood
why the production manager had been insisting that I should prepare my
presentation using the template he had sent.
The template used a bluish-black background with Arial - 36 point size. On
an average, six words fit comfortably per line and more lines per screen.
This allowed me to chunk more words to form logical, though fragmented,
sentences and pace my speech more comfortably. I sat there porting all my
presentation content on to this template. In the end the rework was worth
the effort and the first recording was done without hurdles.
Aside from this quirky compulsion, I don't like using light text on a dark
background. Initially, this was an annoyance and matter of choice. Over
time, this has developed into a habit.
Prashanth