DIY Centre:

Web Typography

Ever wondered why it's easy to read chapter after chapter of a novel while a long internet article loses its interest after a few paragraphs. Apart from subject and writing styles, the simple answer is print typography has had over a hundred years of trial and error to work out how to combine paper and ink to create the most readable composition, while designing text for computer screens and the internet is, relatively speaking, in its infancy.

There has been some progress thought. With the advent of Cascading Style Sheets, it is possible to achieve many of the typographical conventions that assist readability in books, such as font choice, character spacing and line height. And by adjusting these conventions to the peculiarities of projected light used by computer screens, text is slowly becoming more and more readable as web designers learn and adapt from what typesetters have been doing for years. Although nothing is set in stone at the moment, the first broad standard for general body text appears to be the use of 10/12 point Verdana family sans serif fonts set at 140% line height.

However, a big hurdle for long textual pieces on the Internet is our eye's familiarity with the physical properties of paper and its many varying attributes. Have you noticed how magazines use whiter paper than novels. This is partly a psychological ploy, because doing so shortens the readers attention, leading them away from the article and drawing their eyes to the short and sharp advertisements*. The high contrast between pure white paper and jet black ink is subliminally uncomfortable for our eyes, encouraging a reflex action to search for something more soothing or readily absorbed. And this is the heart of why reading long texts on computer monitors is less compelling than novels. Novels, traditionally, use a softer yellowy paper than magazines or text books. The off white colour being less bright on the eyes and the porosity of the paper softens the edges of the printed type, allowing the reader's eyes to naturally find their own focus on the words and encourage longer periods of concentration without discomfort.

The problems that pure white and black, displayed by computer monitors, cause to internet readability is not a new discovery and two simple methods are in common use to reduce the physiological distractions. The principle for both methods is to reduce the contrast between text and page colour. One method is to change black text to a dark grey and the other is to apply an alternative background colour. Both work to a degree, but neither have proved sufficient for long articles or stories. Greying the text benefits short articles (those that don't require scrolling down), because it actually encourages quick comprehension. And colouring the background aids immediate recognition of short one or two line emphasised information, such as headlines or adverts.

However, long streams of grey text on a white background may make an article more readable than one set in black and white, but it is still subliminally tiring on the eyes and before long it becomes a chore to continue reading. And, possibly worse, whole pages of text set on even the lightest shade of colour distract the eyes more the pure white, because, psychologically our eyes may be accustomed to perceiving yellowed paper as white, but the actual paper in a book isn't the solid yellow or off white displayed by computer monitors. Paper is actually full of subtle imperfections, little patterns of light and dark left by the wood pulp, that our eyes conveniently ignore. So when we view a whole page of text set on a perfectly solid colour, that theoretically looks like paper, our eyes reject it as abnormal and subliminally urge the reader to look elsewhere.

In an effort to solve this problem Lokivore is experimenting with minute algorithmic patterns to imitate the imperfections of paper and increase the readability of long articles on the internet. If your computer is capable of screen zooming (control+scrollwheel on Mac) you will see that the background of articles on this web site have an extremely slight pattern in their colouration. It maybe hard to see with the naked eye, but it is there. This may not solve the problem completely, but our research is continuing and at the very least we hope it improves on what has already been accomplished. Also, while we hold copyright over our designs, we encourage others to experiment in this field of typography so that important topics of information can overcome the readability issues present in current internet technology. For those who are interested, along with our background pattern experiments we are currently trialling different text colours. At the time of writing, the darkest HTML blue (#003) has proved the most readable with the current colour levels of the background pattern. Obviously, this may change in the future depending on further experiments and trial analysis.

For those who would like to create there own readability settings right now, and not wait for typographic internet standards to emerge, readers are reminded that most browsers can be set to user defined colour schemes and even use their own style sheets. Offering everyone, in theory at least, the ability to format text on any website they view regardless of its original design.

But regardless of technological trickery, if your are designing words for page or screen remember, the key to readability is the removal of distractions. Even a page this long should ideally be cut in two, because after about five hundred words readers expect to do something, be it turning a page or clicking a button, and not doing so is a distraction. However, doing so would eliminate a worthy example of the psychology of reading and how our subconscious directs our attention. So if you made it this far, thankyou and congratulations, you made it to the end.