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.



9 comments (Add your own)

1. LUONG TAT TU wrote:

Tue, March 28, 2017 @ 1:30 AM

2. Vianoraburf wrote:
3773 wow cialis buycialis onlin

http://cialisyqwol.com/ - generic cialis online
generic cialis

cialis en suisse forum

Mon, October 15, 2018 @ 8:50 AM

3. Vianoraburf wrote:
3773 cipla cialis online

http://cialisyqwol.com/ - cialis

levitra cialis canada

Tue, October 16, 2018 @ 12:44 AM

4. Aveniraaburf wrote:
37a1 insurance covers viagra

[url=http://viagrakiier.com/]buy viagra online[/url]
buy viagra

where to get viagra in el paso

Wed, October 17, 2018 @ 7:23 AM

5. viagra wrote:

Wed, October 17, 2018 @ 5:54 PM

6. cialis_online wrote:

Wed, October 17, 2018 @ 5:54 PM

7. buy_viagra wrote:

Wed, October 17, 2018 @ 5:54 PM

8. super wrote:

Wed, October 17, 2018 @ 5:54 PM

9. cheap_cialis wrote:

Wed, October 17, 2018 @ 5:55 PM

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