Typography on the information highway

This article will focus on screen typography commonly seen on the Web and go over key areas that impact the overall reading experience.

The Internet is a dynamic medium in a sense that print is not. The approaches to design differ since they both need to follow and cater to different set of requirements. There is a difference between a static design; how it looks on screen or paper, and a dynamic design; level of comfort when a user actually interacts with it on a Web page. Typography alone can set the tone for content and aid the interface design far more effectively then any of the counterparts in a Web page.

There are some indicators as far as how we read Web text in comparison to print, whether they are accurate or not is only part of picking a good typeface. The important thing to keep in mind is that the materials (e.g., screen, paper) that are used to present the text and how we interact with them is certainly different. Some types are specifically designed and engineered for the screen (e.g., Verdana, Georgia) for instance. It is a futile exercise to seek the perfect font type since without context and the human imagination; no type can be considered to fit into all cases. Instead we need to look further and see which types can best relate to our content, deliver reader's needs, and the emotions in which the author wish to trigger on their readers.

Nature of content

It goes without saying that we have different font types and we pick different types to set a subconscious tone of communication for the content we present. The importance of using the right type for some text is quite important in a sense that this sort of supplemental information invokes the emotional part of the brain. It allows the reader to adjust to the right setting and encapsulates the information conceptually. The evaluation of picking the right font should start at this level and then break down into technical bits. Always keep the nature of content in mind during this process and see if and how the type reflects that content. Give it a try and read the text yourself! Do you feel it?

Viewing devices

CRT (analog) and LCD (digital) screens are generally the most common display types. Go with a typeface that looks decent in both cases since they slightly differ in their display. Anti-aliasing is a point to consider when selecting a type. Some fonts look better when they are viewed on LCD devices or when anti-aliasing is turned on by the software. On the other hand, the same type may not look aesthetically pleasing or comfortable to look at on a CRT monitor or when anti-aliasing is turned off. If possible, test read your text under these scenarios.

Type classification

Serif and sans-serif are variable-width fonts, whereas a monospace font has a fixed width for its characters.

The major difference between serif and sans-serif ("sans" meaning without in French) is simply that serif types can be easily identified by checking whether the characters have strokes (e.g., curly bits) or non-structural details on the end points. Serifs are highly readable on print since they provide jump points between characters and allow them to be easily distinguished from one another. Serif provides this sort of variance in between characters as opposed to sans-serif where the characters, symbols or glyphs are generally rounder in comparison. The same level of legibility however doesn't occur as well on digital devices like monitors at this time. The major difference has to do with the precision in which the human eyes can identify the characters. Print in comparison to screen has a far greater DPI value; approximately 72 DPI on screen as opposed to 600+ on print.

Monospace fonts are often good in console terminals, code displays (e.g., text editors, examples on a site) because there is a greater need for an overall grid-like structure for the text.

CSS-enabled UAs are able to apply a sequence of fonts one after another where the UA checks the system to see if they exists. If the UA doesn't find the specified font-family as outlined in a stylesheet, it will then default to a type that is set by the UA or the operating system.

Kerning

Kerning has to do with spacing between a pair of characters on variable-width fonts e.g., monospace fonts do not use kerning. The implications of kerning is that some character pairs (instances will depend on the language) may overlap in parts where the tail of one character may step into the space of another character. Pay close attention to letter collisions between a pair of characters in the language of the text for a given font type.

In Hypertext documents where anchors occur, there is a possibility of an underline touching the descending part (bottom tail) of a character. When selecting a font type, consider how anchors will be represented; whether they will have an underline or not since this may impact your selection.

Sizes and units

px units are relative to the resolution of the viewing device. em unit is the computed value of the font-size. Note that 1em of one type will not result in the same computed value as another type. One-em is the horizontal distance a character like "M" occupies.

Pay attention to the legibility of types at various sizes and letter spacing. As far as accessibility goes, even mild dyslexia (fairly common) can be improved if a suitable type is chosen. For instance, Verdana is designed to be readable at small sizes and is slightly larger then most common Web-safe fonts. Subjective preferences also show that Verdana is a dyslexia (but not limited to) friendly font.

x-height in typography refers to the distance between the base and the mean line in a typeface. Although not always the case, generally the height of x is the x-height of a font. Hence, the ascending part of a character is above the top of this line and descending is below the lower part of the baseline.

As far as font sizes go, it is important to keep usability and accessibility in mind; at the end of the day, we want the content to be read, therefore, try to avoid small text sizes when possible and keep the reading level comfortable for the reader e.g., Not everyone can read below 10pt Arial comfortably. Good visibility practices is intended for everyone and not just for the visually impaired.

Scaling

When the user changes the text size, this impacts the overall design of the page for a number of reasons. Proper font scaling can become complex if some text contains various fonts and sizes. In this case, the increase or decrease of its values may not necessarily go in proportion. Consider when not only different units are used for the types but also if the fonts differ in their default sizes.

Keep in mind that some UAs are capable of zooming-in the view as opposed to rescaling the text components individually in relation to one another.

Density

To name a few: line-height, kerning, font-size, colour, letter-spacing and even line length impact the overall density of a given content area. When there is a balanced breathing room for the characters and the content, the human eye is able to maintain a comfortable view over the information. Multiple information on the same page presented in different densities not only distinguishes one content area from another but also its importance.

Colours

Although colour theory is a whole can of warms on its own, it is an integral part of typography. The colours that are used will impact on contrast and legibility of the information. It can also set forth an unspoken mood for the reader. Text and background contrast is another aspect of Web design that impacts readability and legibility on screen since it is more difficult then reading on paper.

Platform and availability of technologies

Web-safe fonts are a list of font types that are considered to be commonly found in most Windows, Mac and Unix operating systems. At this time, alternative to Web-safe fonts is to use images (e.g., IR) or Flash (e.g., sIFR) in order to use practically any font type. The trade off is that, non-Web-safe fonts set a higher level of requirements; file weight (load time) and technological requirements (e.g., Javascript, Flash enabled browser) and be subject to overall user experience. For instance, graphical text can't be selected and the text can't be resized easily (except by browser aid). In the case of logos for instance, it would be appropriate to use HTML images in order to preserve and control part of the identity of the subject.

Layout

Placement of objects with respect to one another and their relationships can signify a suggested order in which the information should be read. Grid systems can be used to logically separate sections or create general alignments where the human eye can jump from one location onto another. Whitepsace, borders, background colours, imagery or even the types in use can create a layout for the content. On the Web, layouts generally fall into two methods; fixed or fluid. Fixed containers for text retains a number of allotted characters based on the type. Fluid (or variable) widths on the other hand does not enforce this rule and is dependant on the width of the browser viewport such that the number of characters vary as the window gets resized.

Line length

Although a general rule of thumb is to have 70 characters (give or take depending on the nature of content) per line, this is based on the layout method as outlined earlier. Document scrolling is a factor as short line lengths although will have our eyes move in short distances, it will require us to scroll more often.

Clarity

Keep type styling hierarchy consistent for reading. Too many font types can make text blocks distinguishable from one another, however, it will force the user to readjust to the new text flow; which will impact overall readability and legibility.

Mixed case letters help the reader identify letters into recognizable shapes as opposed to all uppercase which not only makes it difficult to read for extended texts, but can also send a different message (e.g., aggressiveness). All-caps text on headings however can help create contrast from regular run-on text.

Using random or irrelevant sample text

A sample text of "Lorem Ipsum" although is a fair guideline to determine how information will be displayed, it is subject to mislead us in thinking the real text is as well legible and will set forth the right mood for our reader. It is far more accurate to use real sample text during the design phase to minimise mistakes. One fair test is also to read the text ourselves and question whether we are comfortable with it to begin with.

Final words

Typography is an art form that has been around from the early on. Master it by studying and testing under different cases. Typeface selection decisions in Web design shouldn't be done randomly or resort to browser defaults; there is a lot room for improvement considering that readable and legible content is perhaps one of the most important factors on any Web page. Give it a meaningful purpose and factor in the emotions you want to trigger on your readers.