Typography in Design

TypographyIn 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. We 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. We 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 our 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 may call "line height". This is the amount of spacing between each line of text. As we mentioned above, the wider your measure (or width of the body text), the more leading you will 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 spacing 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 we can say here that can prepare a designer for all possible types of designs, styles or color combinations. Any rule of thumb that we 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 many professional designers are in no way experts in typography, they do have some experience putting it all together in a cohesive way. Usual strengths lie in design using color and layout. Even so, the final word of advice we will give is this: when in doubt, make it readable.



1 comment (Add your own)

1. LUONG TAT TU wrote:

Tue, March 28, 2017 @ 1:30 AM

Add a New Comment


Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.


Try it out for free. Create your own demo website in seconds. Sign Up For Free