Wordplay: Typography Tests for Designers
Let’s face it, thanks to the digital age there are fewer and fewer people who like to read. That puts pressure on web designers to make content readable and yet still eye-catching for the casual site viewer. Here are some tips you can use to wow clients and get the attention of the site’s guests, while making the text readable.
The main technical terms we will use throughout this article refer to the spacing between your letters (kerning) and spacing within paragraphs or across the page in general (tracking).
One popular kerning trick amongst designers is to turn the text upside down. You may find this counterintuitive when it comes to discerning readability, but it is actually a standard method. It allows you to see the letter spacing without being distracted by what the words actually say.
The next technique on our list is to blur the words. You can use Photoshop for the blurring, or you can save yourself some time and just squint while you look at the screen. How does blur help? It allows for a better gauge of contrast. You just concentrate on how the color of the letters stands out from the background color instead of, again, focusing on what the words say. Plus, if the letters stand out when blurry, they will definitely stand out with solid edges.
What about spacing in between your words? One technique that many designers use is to imagine the letter o in between each word. If it looks like it would fit there comfortably but without a lot of extra space, then you are in good shape.
One of the places that kerning and tracking are the most noticeable is in the page title and headings. If you find that you have to add a -5 kerning over and over throughout the heading, then you probably just need to set tracking to -5. That will save you a lot of time in between characters. A good example is what occurs when you have a really thin character in between two larger ones. The number 419 may call for tighter kerning since the number 1 will not use up all of the space it is generally given, but you cannot adjust the tracking to account for a three digit number, or everything else on the page will look too tight.
Finally, try to stick to just a few fonts per site, or even just one if possible. Having too many fonts on a website starts to play tricks on the eyes of the reader. Instead of using a different font for everything, try to play around with the font by using various weights.