Whether your web design skills were acquired through formal education or self-taught learning, there is one aspect of design that commonly gets overlooked — typography. In the following, we’ll take a look at what typography really is, why it affects the usability of your website, and how you can use typography to rise your design to the next level.
According to Wikipedia, typography is the art and technique of arranging type in order to make language visible. Typography involves the selection of:
- Typefaces: set of characters that share common design features
- Point size: usual unit for measuring font size
- Line length: width occupied by a block of text
- Leading: distance between a line of text and the baseline of the successive line
- Tracking: space between groups of letters
- Kerning: space between pairs of letters
I hate to be the bearer of bad news, but most people who visit your site don’t care about the overall design. They have very little interest in the colors and images you so painstakingly chose. While they may appreciate the overall feel you have created, they are really interested in the site’s content.
That means the majority of their focus is on the typography. Your visitors are giving it a lot of attention. Have you?
Legibility vs. Readability
First, let’s take a look at two topics that often get confused when it comes to typography.
If a block of text is legible, each individual character is distinguishable from all the other characters. A good designer will select a typeface with appropriate clarity based on its intended use and size. If you want to make sure your text is legible, consider the following:
- A normal mixture of upper and lower case letter is more legible than all upper case letters.
- Regular font is more legible than italicized font.
The readability of text is determined by the ability to communicate meaning as clearly as possible. A reader should be able to navigate through the information with ease. If you want to make sure your text is readable, consider the following:
- Readability is decreased when letter spacing, word spacing and leading is too tight or too loose.
- Readability is enhanced when there is a generous amount of space between lines of text so a reader can easily distinguish the current line from the preceding one.
Instead of thinking of it as legibility vs. readability, we could think of it as perception vs. comprehension. Either way, the most important thing to know is a quality designer will aim to achieve excellence in both!
Making wise color decisions
Another major factor of legibility is color contrast. All too often, we arrive at a site with optimal eye health and leave with a severe case of eye strain. Why does this happen? Usually the source is inadequate contrast between font color and background color.
For optimum viewing pleasure, the color of text should be drastically different from its background. And interestingly, not just any contrasting combination will work. Positive images (or black/dark on white/light) are easier to read than negative images (white/light on black/dark).
Typography can create hierarchy
Use typography to draw viewers’ attention. Let them know exactly where they should begin reading. Then, with the assistance of various typefaces and sizes, let the viewers know how they should proceed.
CSS and typography go hand in hand
While it might be tempting to do otherwise, designers need to set a limit to their creative expressions. You might be capable of creating a totally unique design for each page of a website, but that doesn’t mean you should do it.
Likewise, your typography style should be consistent from one page to another. Visitors should be able to flow seamlessly through your site. To eliminate amateur typography issues, make sure your CSS is solid.
Using centered text is synonymous with using Comic Sans
Some design fads come and go. Others stick around longer than they should – especially with the amateur design set. Centered text is one of those fads that need to pass.
When possible, avoid centered text and opt for an easier-to-read alternative. For example, since most of us read left to right, we feel more comfortable when text is left justified.
The jagged edge of centered text is difficult to read. Plus, when used on different displays, centered text tends to distort the rest of your design.
Be symbol savvy
Most writers copy and paste text from Microsoft Word or other word processing software. Unfortunately, web design and word processor symbols don’t play well together; lots of little changes can occur when you aren’t paying attention.
For example, Word automatically substitutes smart (semi-circle) quotes for straight quotation marks. Other problems arise with accents and umlauts (most commonly used with other languages).
Chances are you’ll have to go back and fix these little problems after they occur. Instead, address these issues before they happen by whipping out your HTML entities.
Most of our text design centers around 10-point font. This is a pretty common website standard. However, this somewhat small size isn’t enjoyed by all. Baby boomers, for example, usually prefer a larger font size.
When a viewer makes the font larger, the text and design need to adapt. If cranking up the font size a few notches creates problems, impatient viewers are bound to click away. Even the most patient person will grow frustrated with endless scrolling.
While a larger font size might not be as pretty as your original design, you need to make sure viewers can still read everything and locate links.
Serif vs. sans-serif fonts
Courtesy of the little marks at the end of the stroke, serif fonts subconsciously lead the eye onto the next letter. This makes reading smoother and easier. However, this phenomenon only works with high resolution (print) materials. When using serif fonts at low resolutions, the extra complexity decreases clarity. Additionally, serif fonts can become blurry or even pixilated. The lack of whitespace between letters makes recognition much slower too.
Sans-serif fonts are more readable on pixel-based displays (websites) because they are simpler. The extra space between letters and broad font enhances readability of website content. If you can’t decide which sans-serif font is best, stick with Verdana — it was specifically designed with computer screens in mind.
If you can’t avoid serif fonts entirely, use them only in headlines or other small chunks of text. This will allow for a bit of balance and creativity.
Take your typography for a test drive
As a designer, you probably aren’t responsible for writing the site’s content, too. However, that doesn’t mean you can’t read what the writers are posting.
Check out your typography; make sure it is legible and readable. Remember, if you can’t read it, no one else will be able to either! Take special note of line length. Are there any lines that are too difficult to read without scrolling? Did you notice any unnatural line breaks?
After you’ve check the length of the text lines, check the spacing. Start with leading. Is there enough whitespace between lines of text? Then, move on to tracking and kerning. Are there unusually large spaces that look strange?
Lastly, check the alignment of the text. Left-aligned text is easier to read than right-aligned, but either is probably preferable to centered! Full-justification works well with long lines of text. However, it appears choppy and distracting in narrow columns.
As the site’s creator, you lose some objectivity during the design process. Ask other people to evaluate your site, paying special attention to the typography. The average Joe probably won’t be able to vocalize what they find distracting, so offer up specific things they should comment on. Take their feedback into consideration and make changes accordingly.
In the grand scheme of things, typography is easy to overlook. Many designers write it off as a time-intensive activity. While that may be true, that doesn’t mean it isn’t important. Before embarking on your next design project, take a few minutes to brush up on your typography skills.