Mark Wallis Web Designer

Compose to a typographic scale

Inspired by a recent talk Mark Boulton gave at Build i set about some focused-practice around web typography. Mark stressed designers should not be distracted by the new and shiny. Web typography is a hot-topic right now but it is not just about @font-face. Font selection is important but it is just one piece of the puzzle. Mark lists 9.

One of these typographic hierarchy is how different faces, weights and sizes of typefaces structure a document. This article focuses on size and its effect on document structure.

Stick to a typographic scale

Always stick to a typographic scale. This concept emerged during the 16th century. European typographers discovered by typesetting using a small set of distinct and related intervals resulted in a harmonious typographic composition.

This set of type sizes: Six Point through to Seventy Two point became standard and has remained intact for over 400 years. If you check your design tool of choice you should find that these are the default options for setting type size.

Using the scale

By setting your type to this scale you ensure there is an underlying relationship between each element.

For example: A heading set at 24px partnered with a paragrpah set at 12px will work nicely. There is a clear relationship in size (times 2) additionally the contrast between type sizes will add visual interest and catch the eye.

You can also use this scale for setting margins and paddings. This again will create a relationship between type and your layout.

Using the scale means there is reasoning behind every decision related to structure. No element is arbitrarily sized or spaced and your page will appear tighter and pleasing to the eye.

Stick to the scale

If you stick to this scale you are implementing over 400 years of typographic tradition. Your compostion will look good because it will appear familiar to the eye. Very like the rule of thirds your layout will look right even if the viewer is not sure exactly why.

Posted in Articles, Typography