What is Typography Tuesday?

It is no secret that I love Typography. Typography is the cornerstone of design. In situations that don’t afforded the luxury of other graphical elements such as photography or illustration, typography can carry the design. Strip away all the bells and whistles of the web and you are left with type; make that type look fantastic under aggressive circumstances and THAT is bad-ass.

Back in February, I had the pleasure of speaking about web typography at DC Design Talks. I learned a lot of great things while developing the presentation, and I’ve tried to simplify some of those ideas to share with you each Tuesday until I run out.  (Which could, theoretically, be never.)

This Week’s Topic: Legibility

Ever meet people who think Papyrus is the greatest font ever and must jam their websites with it? Hopefully, those clients are few and far between, but what they don’t realize is that while they are totally entitled to their opinion of the awesomeness of papyrus, it is very difficult typeface to read due to its sharply contrasting stroke widths, ascenders, and descenders.  Legibility is a major factor that determines the clarity of a typeface to a user since it’s how clearly content can be read. Readability can be scientifically determined by how quickly and comprehensibly a block of text is read by a user.  In print design, serif fonts have been determined as the types of fonts easiest to read in body copy because the serifs reinforce the horizontal flow as the eye moves from left to right; however, there is no conclusive evidence that I can find that states this is true for screen. Rather than comparing serif typefaces to san-serif typefaces, it seems that those designed specifically for display prove to be more readable online. Both Verdana and Georgia come out as being the most legible, web-safe fonts. 



A great site that allows you to compare typefaces for the screen is http://typetester.maratz.com/

Other Factors That Determine Legibility

What font you choose is not necessarily as important as how you typeset it.

• All Caps: Slows the readability of that text above all other factors because it lacks the visual cues that tell the reader where and when each word stops.


• Letter Spacing: Too much or two little space between letters can interrupt the natural texture of the type.


• Measure: The number of characters that make up the length of a line of text is called measure. Optimal measure for a column of text is 45-75 characters.


• Size: Type set from 9 to 12 points in the most effectively read.


• Line-Height: The space between lines of text can determine legibility; too little or too much can cause crowding.


• Font Style: While italics provide an effective way to determine emphasis, overuse can make reading very difficult because of the slanting of the letters.


• Stroke Variation: Some typefaces such as Bodoni have sharp variations in stroke widths within individual letters; this contrast makes those typefaces more difficult to read when used in large blocks.


• Color: Stark contrast—or white text on black—can be hard on the eyes, making text more difficult to comprehend.

When typesetting on the web, it is very important to keep the user in mind. The web is not a canvas—it is an interface that users interact with to achieve goals and obtain information. While expression is a priority, legibility should come first for information that guides and informs as a part of an interface. I hope these tips help! 

Resources and additional reading on legibility:

• Typographic Design: Form and Communication
• Thinking with Type
• The Elements of Typographic Style