The Basics of Typography in Web Design

Web design has one very importance piece that contributes a lot to the success of your design, but the irony is that your reader may not easily identify what it is. Typography. This is the (not so) secret ingredient of a great web design. According to some, typography is information design. True to this statement, typography goes beyond merely choosing the right font or type piece; it is all about crafting a beautiful text form of your content. Typography is a way to make sure that your content is conveyed in a smooth and pleasant way to your user. After all, what’s good content if it fails to reach its target readers?

Typography is broken down into two types: macro-typography which deals with the overall text structure, and micro-typography which deals with the specific aspects of type and spacing.

Measure is a fundamental topic in typography. It is defined as the width of a body type. Though there are several units of measure, the three basic units are:

One point = 1/72 of an inch

One pica = 12 points

One em = the horizontal distance equal to the type size you are using. This is measured in points. (e.g. 1em of of 13pt type is 13pt)

Leading is what’s also known as line spacing. A good rule of thumb in typography is that your leading should be wider than your word spacing. When the proper balance is achieved, your readers eyes will move along the line instead of down the lines.

That’s just the starter in typography. In the next posts I will discuss more resources on typography as well as best practices.

Go back