Typography… Rarely noticed when used well, and yet sometimes difficult to pinpoint when used poorly; it’s one of those ‘details’ that’s often overlooked to the peril of the layout or design. Have you ever seen a web site you liked, yet couldn’t discern why? Or perhaps a site having all the right elements, colors, etc – yet still seeming a little undone? Yep, that’s the effect of typography in most cases; and while typography has been a known art in print for hundreds of years, it’s use in screen media is still relatively new. We’re going to look at a few basic typographic principals, and then take a deeper look into how we can apply these to improve any sites design.
How Users Consume Text on the Web
Before we get too far into this, let’s assess how we consume information on the screen. Numerous studies have all come to the same conclusion, we process information from the screen differently than from printed material. For instance, the vast majority of those tested use various scanning techniques to to quickly process and consume information on the internet, and most find it easiest to read dark text in a light background when reading more than a few words at a time. Likewise they found that smaller font sizes contributed to more focused reading, and less scanning.
The last thing I want to bring up before moving on, is that your copy makes a large difference as well. Users can’t stand ‘marketese’, it instantly undermines credibility and sends them scurrying to the next item in their search results. Users are busy, they want to get their information and get back to what they were doing.
Some Typographic Principals
1. Contrast: Since colors on a monitor screen are created by light, it’s important to keep an acceptable contrast between background and text – with black text on a white background offering the highest contrast (sometimes too high). Having a contrast that’s too low results in muddy-looking text that can be difficult to read.
2. Hierarchy: The proper use of headers, focus points, and the organization of information all lead to scannable text – and scannable text is what we’re after. Nick La has a great article on Typographic Contrast and Flow using his own site as an example . His explanation of flow is superb:
“Space plays the most important part in maintaining flow of your design. Good use of space will tell the reader where to start, when to pause, where it ends, and what to do next.”
3. White Space: In content-heavy layouts, the spacing contributes to the general readability of the content. White space offsets large amounts of text in such a way as to facilitate the smooth flow of information – the user’s eye flows easily through long blocks of text when white space is used properly.
4. Consistency: When you start thinking of text as a UI element, the importance of consistency becomes clear. The user needs to be able to anticipate what to do based on what they have done, and process information based on how it was received. Keeping well placed headers and having emphasis on important elements goes a log way to breaking up sometimes monotonous text.
Putting These Principals Into Effect
Now that we know the components of good typography, how do we put them into good effect?
Perhaps the most important thing you can do in the beginning, is to develop typographical standards within the site specification. While there’s a bit of an art to it, it’s not rocket science. The most important factor being consistency - and using common sense. Don’t try and reinvent the way folks read on the web, simply make it more intuitive and easy on them.
Consider the following:
Poor Typography
While technically there’s nothing wrong with the content, it’s difficult to read, and the hierarchy is muddy. By applying the concepts above we can present the same content in a much more readable format:
Better Typography
By using the above principals, we transform the generic blob into an easier to read, modern block of copy. We use a proper font pairing and slight brightness adjustment for contrast and hierarchy. The image gives use the perfect mechanism to create dramatic white space and adjust the column and line height for easier tracking. The result is easy to read, modern in appearance, and polished.
