Typo Tips

Here are a few tips on how to make your typographic style a little more solid.

Alignment
Aligning your type properly goes a long way to influence readers perception of your site. Justified gives a more “official” impression due to the fact that newspapers use this alignment. However, ragged right (Left Align) is more common in the online world due in large to the fact that properly setting blocks of type justified, adjusting for the loosely spaced lines (rivers of white space through the text) and the inability to hyphenate words over line breaks, is almost impossible with html and css. Aligning your blocks of type with the overall grid of the site is also a key element when designing your site, even the worst designed site can be improved by a layout grid.

Leading and Kerning
Both these terms originate from the days when all type was cast metal, leading referring to pieces of lead used to adjust the vertical space between lines of body text, and kerning derived from a cognate of corner as certain corners were notched out to accommodate proper spacing between letters like A and V.

There is a delicate balance between too much and too little leading, either or will reduce the readability of your content. 130% of the point size is a good start, but it largely depends on the x-height of the typeface used, and the length of the line. The longer the line and the higher the x-height the more leading is needed to keep readers on the same line rather then fall to the next line mid sentence.

Kerning on the other hand is something you will most likely only have to play with when doing display type (headlines), strings of capitals and small caps, and all long strings of digits, most fonts are auto kerned but you can make an old font like Times New Roman appear much more unique by tightening the kerning. Tighten in larger type and loosen the spacing in smaller type.

Measure
Measure is the width of a body of text. A good rule of thumb for this is to keep the measure to 2-3 alphabets long, or 50-70 characters including spaces. Play with it from there for the best fit for sidebar content or narrow columns.

Hierarchy
Hierarchy with typography can be accomplished with size, weights, indent, line spacing, colour, placement on page and different faces to structure the site. It’s basically the principal of emphasizing data over others, helping readers scan content. A good rule of thumb for this element is to increase the size by 20% for each level from the base size for the body text and up to 50% for the main heading.

You can use sites like http://typetester.maratz.com/ to preview and play with some of these ideas and better understand how they effect your content.