Article
4 Typography Tips
Good design, as they say, shows in the details. Details include typography, too. Yet it is not uncommon to see websites that focus on the graphics but ignore the typography. Don’t let that be your site’s downfall. Here are some tips to improve your typography:
1. Pay attention to your content
You should always consider the content before you design. After all, your design serves the content — not the other way around. With regard to typography, certain content requires the appropriate typeface. However, choosing the right typefaces can be tricky — especially on the Web. I personally think this comes down to experience. There is no hard and fast rule to choosing the right typeface (if there were, would we need designers?), but as you study and create your own designs you start to pick up on what works and what doesn’t. A good resource to see sites with good typography (and why they work) is typesites.com.
2. Use the grid
Typography is a structured art. Good typefaces are crafted with consideration to proportion and balance. When setting these beautiful letters on the screen (or print), shouldn’t you place them with care as well? This is where the grid is so important. It gives structure to your content, as well as simplifies your design decisions. For a good primer on grids, I recommend Khoi Vinh’s blog post and pdf.
3. White space
One of the simplest things you can do to improve your typography is to let your letters breathe. Go on, give them some margins, they don’t need to sit so close to the edge. In general, I prefer at least 10 pixels of space, but the exact number really depends on your preferences. Of course, using a grid should already solve this problem.
Another place where your text needs to breathe is its line height. Default line heights in the browser (and in some word processors like Word) are too short for my taste. In general, I recommend somewhere between 150% to 180% of the font size.
4. Typographical hierarchy
Should your headings be larger than the text? How do denote different levels of headings? This is another place where you should take advantage of a typeface’s inherent structure. Pick carefully when selecting sizes for different text elements, as there exists a typographical scale. Following this scale is where your design decisions are simplified. For a good resource, check out step 4 of Mark Boulton’s Five simple steps to better typography. Of course, the whole series itself is well worth your time!
Comments
It’s all about the kerning! Nice post, this is exactly what I’ve been focusing on with a few recent designs. The most important affecting the type on your site is normally whitespace, as long as the typeface is legible of course. I like your point about hierarchy, that’s a part of web typeography that we often do automatically, thought it’s still vital.
Hi Luke! Thanks for the link! Kerning on the web can be a bit finicky across browsers, but yeah, I’ve been experimenting with that too.
erm… speaking about this very website, let’s add too large line-length to the list.
Hi Jay, I assume you’re talking about the measure? I agree, it’s a bit wide here, and I sacrificed that for the ability to put larger images in my posts. Perhaps I can find a better solution for the next iteration.
I really want thank you for the very hot articles just about it! And you know, that the http://www.4writers.net freelance writers would like to use it for the custom essays.
Thanks a lot for the tips. They are very useful. To tell the truth I’ve never paid any attention to typography but now I will. I like this site a lot. It is one more argument to pay attention to your words.
Leave a Comment