From time to time I get people
writing to me and saying something along
the lines of, "Don't you know that you
shouldn't have reversed-out type on your
site" or "I've always been taught that
reversed-out type is more difficult to
read".
I want to debunk this old wives' tale
once and for ever. Where there may be an
element of truth about it on a page
printed on paper, it is not true of a
cinema, television or computer screen
and here's why.
The majority of reading material we
encounter from day to day in books,
magazines and newspapers is simple black
on white text. We become used to seeing
text like that and react negatively when
confronted with something different.
The same goes for typefaces. Readability
studies show that people can read 'what
they are most used to' more easily than
something new. People from a technical
background read more material printed in
sans-serif typeface than those from a
literary or classical one and become
more accustomed to it. In research, they
naturally gravitate to that with which
they are most familiar.
A good background image or pattern is an
economical way to give a Web page visual
interest. When I say economical, I mean
it in two ways - it is quick and easy to
produce, and it requires very little
bandwidth to deliver the page. Take an
interesting background, add a little
text tastefully and you are probably
ninety percent of the way there. But
before I start discussing background
images, a little 'background on
backgrounds' is in order!
The vast majority of printed material
you see has no background image at all,
just plain black text on white paper.
But, because there is no cost penalty
for having colour on a Web page, they
can be as colourful as you like - within
reason.
However, there are two big differences
between text on a piece of paper and
text displayed on a computer screen...
The first one is resolution.
The text on a computer screen is low
resolution, each character being
described by a grid of pixels and with
smaller sized fonts, this shortage of
information makes it more difficult to
form recognisable and identifiable
character shapes. Because the
letterforms are constrained to this grid,
the dots that form the letters are often
not where they should be, only
approximately so. This creates what can
only be described as ‘visual noise’ -
unhelpful information that isn’t
contributing to the identification of
the letterform but has to be there
because there is no such thing as
‘partial pixels’. Partial pixels can be
simulated using tones of the type colour,
that’s what anti-aliased type is all
about <link>, but that adds noise too
and causes small type to appear blurred.
The design of good, readable letterforms
takes a lot of skill on the part of the
type designer and many typfaces
originally intended for high resolution
print do not work particularly well when
translated into low resolution screen
fonts. Originally intended as a rough
guide to what a printed page would look
like, screen fonts were ‘excusable’ at
best. But, when the concept of online
information came along, there were very
few fonts available that were designed
specifically for reading large amounts
of text on computer displays.
Fonts that work well on a computer
screen are ones that are optimised to
fit on the natural pixel grid. The more
pixels you have to play with the better,
but with current systems, it is always a
compromise between resolution and cost.
Going from 72 pixels per inch to 144
pixels per inch, for instance,
quadruples the number of pixels and the
memory required to display them, which
then requires a faster processor to move
the extra data in a reasonable period of
time. We are always on the threshold
between cost and acceptability.
For the minute, we have to accept that
on-screen text is not as easy to read as
regular printed text because of the
amount of ‘visual noise’ that
accompanies it, but there’s another
factor at work...
The second difference between printed
and screen-based text is in the fact
that computer displays are luminous.
Printed material is viewed by reflected
light and the contrast ratio - the
difference in brightness between the
darkest and lightest parts of an image -
is restricted. On a computer display,
the contrast is much greater. Black type
on a white screen is actually very
difficult to read because of the
contrast and ‘glare’. Glare is caused by
an optical illusion where the edges of
black type are ‘burned’ by the adjacent
brilliant white and make the type appear
even thinner than it is.
In conventional print, ‘ink spread’
thickens black type on white paper and
thins-down reversed-out type. Printed
text always looks bolder than it does on
a bromide partly because the ink is
squeezed sideways when it is pressed
into contact with paper and also because
of the absorbency of the paper causes a
blotting-paper effect. Consequently,
designers usually specify a bolder face
for reversed-out type to compensate for
the filling-in effect.
When you reverse type out on a screen,
the very opposite happens, the type
appears bolder than it actually is. This
is why most film and television titles
are reversed out. Older computer systems
used reversed-out type for word
processing, white out of blue, green or
amber out of black. This was actually
easier to read that the current trend
towards WYSIWYG black on white. Okay,
people like to see what their printed
page is going to look like but, lurking
in the preferences in Microsoft Word, is
the ability to display word processed
pages white out of blue, which is a lot
more readable and easier on the eyes for
protracted screen reading sessions. Try
it!
There is a lot to be said for reducing
the contrast of text on a Web page. The
‘default’ - black on light grey is
actually quite good in readability terms
if somewhat boring and academic-looking.
Dark text on any muted background colour
is preferable to white.
You also have to consider the
physiological effects of advancing and
recessive colours. Warm colours appear
to come forward and cool colour to go
away from the plane they are on. A
living room painted in cool blues or
greens, for example, will appear to be
more spacious and airy than one painted
in warm reds or yellows. The walls seem
to be further away. It doesn’t take any
great stretch of imagination to see why
this situation is ingrained into the
human instinct as it is evocative of the
sky and the great outdoors. Warm colours
are 'cosy' and reminiscent of sitting
round a fire.
A overly bright, warm background on a
Web page makes for uncomfortable reading
as the background seems to be in front
of the text.
Web designers should be aware of this
‘palette’ of optical illusion tricks.
Where print designers have a wealth of
type weights to play with, screen fonts
allow very few. But, juxtaposition of
hue and tone can simulate the effect of
type weight to some extent. In
environments of high tonal contrast,
dark on light visually thins the type,
whereas light on dark thickens it. As
contrast reduces, this effect becomes
less pronounced and the type weight
appears to be closer to its actuality.
Where colour is concerned, cool
backgrounds recede and let neutral
coloured type come forward. Hot
backgrounds encroach on neutral or cool
type and diminish its presence.
