Tutorial: Typography in Design
In the early days of most folk's web design and graphic design careers, the choice and application of typography was the same as asking oneself, "What font should I use?"
As many entry-level graphic and web designers will find out, typography is not simply about font. It is about measure, leading, tracking, color and layout. The typography must be readable as well as visually pleasing - and it must fit thematically with the other content on the page. I will attempt to describe in layman's terms the importance of the basic elements of typography.
Font: When designing for print, use serifed fonts. When designing for the screen, use sans serif fonts. There are exceptions to this rule, but mostly in the way of titles and headers. For body text seen on computer monitors, a sans serif font is the way to go for the most readability in most cases. I have seen many beautiful serifed fonts used recently on the web- but they are usually font size 14 and above. This makes the readability of serifed fonts a non-issue - mostly.
Based on my own research and experience, the following fonts are the most available, accessible and readable for the web. Unfortunately, many designers may feel silly using such "archaic" fonts, even if just for body text.
Sans Serif, size 12+: Arial
Sans Serif, size 11-: Verdana
Serif: Georgia
Measure: The width of the body of type. Basically, how wide is your paragraph or body of text? The best practice is usually to limit your width to 50 - 80 characters in length. Any narrower or wider and you risk having readability issues. As a rule, the wider your measure, the more leading you need to retain readability.
Leading: This is what many designers still call "line height". This is the amount of spacing between each line of text. As I mentioned above, the wider your measure (or width of the body text), the more leading you need. When using light text on a dark background, you would need to add even more leading and tracking to the body of text.
Tracking: This is the space between letters and words. Right now we're just interested in word tracking. A good rule to remember is the narrower your measure, the tighter the tracking. The wider your measure, the wider your tracking between words. Letter tracking can be fun, but make sure you are conservative when it comes to body text.
Color & Layout: Color and layout are important elements of typography that must be tested and used by web and graphic designers on a regular basis. There is really nothing I can say here that can prepare a designer for all types of designs, styles or color combinations. Any rule of thumb that I could give would eventually be disproven with a typography style that works for an individual design that exists as an exception to the rule.
While I am in no way an expert in typography, I do have some experience putting it all together in a cohesive way. My strengths lie in design using color and layout. Even so, the final word of advice I will give is this: when in doubt, make it readable.
Labels: tutorial
posted by Christopher Nelson at
5:16 PM
2 Comments:
I thought that was very comprehensive (even for someone like me who isn't in the field). Good job!
Why thank you. :)
Post a Comment
<< Back To Blog Home