Typography Basics, Part 2

Oct 14, 2011 Joann Design, Web Development, Website Tips

This is Part 2 of a series on the basics of typography, a very important aspect of print and web design

In Part 1, I talked about the actual typefaces, fonts, and characters. If you missed it, you can check out Typography Basics, Part 1.

Jumping right in from where we left off:

Tracking, Kerning

Tracking is the spacing between words.

Kerning is the spacing between individual characters. There is a lot more control in print design for kerning. On the web, css styling allows for adjustments of space between characters but it can be limiting.


This has been shown through user-interface testing that the length of text in a column effects the readability. If you ever had to read a very wide column of text, you know it is difficult for the eyes to follow from the end of one line to the beginning of the next. A balance between the size of the font used and the width of the column is optimal.

Alignment, Grids, and Making it Balance

In the Western world, we typically have our text left aligned as that is how we have all learned to read.

Grids are used in print and web design to provide a balance layout on a page. For example, brochures and newspapers, and websites, use grids to position headings, copy, images, and create a structured flow of content.

There are different grid systems that are currently popular for web development, but they all essentially provide a framework for making a balanced web page.


Often, in basic design, two main types are used: one for headlines and titles and one for the body text. This keeps it simple.

There have been rules in the past, sans-serif for headings and serifs for body text. But as soon as a rule is set, designers will break the rules and create something different.

More articles on Design, Web Development, Website Tips