THE
NEED FOR SMOOTH PIXELS
BROWSERS STILL HAVE A LOT TO ANSWER FOR
THE BUILDING BLOCKS
HOW DO I LOOK?
LOOK! THERE'S MORE
WHERE AM I?
Typography
is the art of laying out a page using type to achieve legibility and readability.
For most of us, often without a second thought, a certain typeface evokes
certain connotations, memories and even products! With the use of website
fast expanding the need for legibility and fast intake of information
has become even more important, but many of the rules are still being
made and, for that matter, being broken!
Add to this that you need to remember when laying out a web page from a typographical perspective that the rules associated with type were developed for print and not for website.
Though many of these rules are still relevant, here are some thought provoking considerations:
- There's a Pandora's box of variables that affect your types appearance including operating system, browser, window size, font, set of installed fonts and graphics hardware.
- You're now working with a landscape rather than a portrait format and therefore only about half the material that is visible at any one time on a printed page is visible on the web page;
- You have less control over the font and for that matter over the formatting;
- Fine detailed fonts dont work well because of the screen pixel resolution and so this slows the reading speed down by about 30%;
- This means that readers tend to scan the information and retention is reduced by as much as 50% of its printed counterpart.
So the number one rule still remains the same. The page must be legible, and able to be easily read. Then we can start considering the matter of appearance. For language is capable of conveying more information, more flexibly than any iconic system.
But lets dig deeper...
With the increased accessibility and pervasiveness of digital devices such as computers, PDAs, cell phones and digital projectors has come the availability of "on-screen only" applications for type. Unfortunately legibility is limited by their screen resolution capablility (measured in pixels). Then there's the issue of "anti-aliasing" to provide the illusion of smoothness for on-screen type. This works by filling in the jagged shapes around curves in letterforms with lighter pixels, tricking the eye into seeing a smoother outline. However, legibility is again compromised when dealing with such letterform elements as thick and thin strokes of serif typefaces, especially at lower screen resolutions.
The solution has been "pixel fonts" which have been specifically designed for digital display. These are legible even when displayed at a smaller size as there's no smoothing needed. This has in itself been an interesting development not dissimilar to the evolution of type by printers in the 15th Century - only faster! back to top
Browsers still have a lot to answer for
Up until recently, the myriad ways browsers handled type meant that designers were given limited control over how text appeared online. With the introduction of Cascading Style Sheets (CSS) the designer has again achieved some measure of control. While HTML allows for the specification of only font family, relative size, and basic font styles, CSS specifies exact size increments, word and letter spacing, line-height, and degrees of boldness. There are still variations between browsers and platforms, but it is now possible to create more consistently readable Web pages.
So when CSS2 positioning is fully enabled in the major browsers, it will be possible to specify your page layout. So that pages will appear with the specified font, and with the specified formatting. back to top
Going back to basics is a precedent. With the limitations of the browsers and screen resolutions, let alone what fonts the reader has on their computer, we need to focus on legibility and accept that only a small selection of fonts are going to work well at this stage to achieve higher readability.
But as we know choosing a font is simply the beginning, then there's the issue of leading to ensure we keep that legibility thing going.
Add to this the issue of optimal line length from a physiological and typographical stand point. The eyes can easily scan a width of about 6 inches from a foot and a half away, without moving the head. But if the width is greater than this the head starts to move while scanning the line and this slows down reading as lines get skipped or re-read. So long lines need to have increased leading. This factor is one of the main reasons why reading on the computer screen is about 30% slower than reading the printed page.
And finally to the matter of paragraphs. This again needs to be constructed differently on the web to its more traditional counterpart. It needs to fit on a single screen rather than a single page. Therefore its going to be 50 to 66% shorter in content than its print equivalent. back to top
For the website, colour is exciting because unlike its print counterpart, its not expensive. It can be used to introduce paragraphs, highlight words, articles of interest and even reflect mood and thats just for starters. But again, you need to consider the font chosen, leading, and word and letter spacing. And then not abuse all these choices as the result can be pretty scary. back to top
This is where scrolling comes into itself. Each screen can provide as much or as little information as can be readable, but the opportunity to scroll needs to be made easy. back to top
Because there's no numbering on a screen it's a good idea to allow the reader to orientate themselves. Some suggestions are to keep the information short and easily scrollable, provide a good table of contents, a good index and/or series of links as well as a series of numbered sub headings.
These again need to be clearly set up to indicate a fresh screen or topic or further information so that the user can confidently navigate your website and actually find the information theyre after.
See the Communication
section for some more interesting reading on the history of typography
and its development on the web.
back to top