THE IMPORTANCE OF TYPOGRAPHY

by Perry Abramowitz • February 6, 2013

On Typography

Typography is the style, arrangement, or appearance of typeset matter. I digress: What is typeset matter? Anything set in type. And type? Printed letters or typeface. Typeface is the face of printing type. I need to remind myself of all these things considering it has been a long time since I've read The Autobiography of Benjamin Franklin.

Obviously the lingua franca of web developers relies heavily on its print predecessors. The concept of typeface is often referred to as font, but font is just one parcel in the stack of options for a developer. Other typographic concepts are leading (the space in between the lines of text), kerning (altering the space between selected pairs of letters), coloring, and alignment.

Why is Typography Important You Ask?

Ultimately, for readability. It is very important to be sure that the site design does not obscure legibility. Typography is a large component to readability, in that, certain typographical design choices can either assist or hinder the user's experience. More than ninety percent of the information online is in the form of text, so text matters.

Web designers also need to be aware of how people read. Reading online is a bit skittish. An English-language novel is expected to be read from left to right, from top to bottom, and the process repeated on the recto page, followed by the reader's flipping the page, and the process repeated. Aside from ebooks, the majority of online readers' bounce, browse, or scan—rarely reading line by line. We need typography to draw attention to more important information and deemphasize the less important. With access to so much information online, it makes a difference if you can hold a reader's attention with your smacking awesome typography. Great typography also carries an air of credibility, professionalism.

Web versus Print

Typography is important whether you are setting type for print or online resources. The issues are somewhat different with online resources. The options for web developers are certainly fewer. Think: “web safe fonts”. The restrictions are partly due to operating systems and their preferences; along with browsers and their preferences. Because webpages need to be interpreted by OS and browser, the page being rendered will depend on the user's system. In short, browsers can use only the fonts installed on each computer.

On hardcopy, serif typeface is easier to read than sans-serif. Serif script refers to the angular short lines stemming from the upper and lower ends of the strokes of a letter:

Sans-serif—literally: without serif—script does not have these angular end strokes off the letter. For blocks of text on paper, the serif script aids readability. Online, any advantage of serif over sans-serif for blocks of text is marginal. Due to the low resolution of the computer screen, the distinction between serif and sans-serif is less pronounced.

This leads to another online typography issue that does not apply to print. If a user's system is unable to render a font as specified by a designer, the system must render the page in another font. The CSS font stack is the method used to designate secondary, tertiary, or more, backup fonts. A font stack looks like so:

Above, we have a stack of five. Our first choice is Gill Sans, second, Calibri, and last is a cue for the user's browser to default to any typeface available in the sans-serif font family.

Another issue that impacts Web media and not print is the power a reader has to change the page. Print is fixed, immutable, static. Online pages, on the other hand, can be modified by the reader, especially in regards to text and page size. The page layout or format needs to be elastic enough to accommodate a reader's preferences—within reason, of course.

Trends in Typography

The trend is to use sans-serif typeface for blocks of text due to the degradation of serif fonts at small sizes. Because limitations exist in rendering fonts, one trend to ensure contrast is to style block text as serif and headings as sans-serif, or vice versa. To avoid a contradiction involving the previous two sentences, I'm going to go on the line and say using serif for headings and sans-serif for body text is superior—that is, if you need to work in the contrast with typeface.

Top 10 Rules

In conclusion, my top-ten list of rules that an author should follow in using typography in web design, are:

1. Be cognizant of the compatibility of fonts on different OS platforms. Some fonts are platform-specific e.g., Helvetica with Mac, and some are compatible with both, e.g., Arial.
2. Use a font stack and test each font.
3. In addition to the standard cases of emboldening, font size, and color to create contrast and emphasis, be aware of the effect of interchanging serif and sans-serif fonts as well.
4. Be consistent in scale with margins, line-heights, and font sizes.
5. Use an elastic layout and relative font sizes, measured in ems, when possible.
6. Tweak text meaningfully. Experimenting is fine, but seldom an end in itself. If letter spacing adds clarity, then by all means; if it's because you always wanted to try it, then maybe think again.
7. Don't drink and code.
8. The typography should be traditional enough to not bewilder. Keeping the site simple so a user does not have to think is a goal of usability. We all have certain expectations and a healthy break from tradition is a skill, but don't get carried away.
9. Say no to moving or blinking text.
10. There is an aesthetic ideal. I don't know what it is or how to define it (I know the Greeks tried really hard to figure it out), but when something is aesthetically pleasing, I know it. It would be good to design websites with typography that encroach on this mysterious ideal, whatever or wherever it may be.

Feel free to send comments to pcwitz@gmail.com.