Typography - Type Scale

A type scale is used as a guide to set up the hierarchy of your type sizes. This is important so there is a clear difference between your headings (in web design H1–H6) and body copy. This allows the reader to be guided by headings and then read on if they are interested. It facilitates readability. You should always use a type scale.

It is a tool and proportional system that descends from the print industry.

Proportion is NOT arbitrary and the most famous proportional scale is the Golden Ratio — or 1 : 1.618. So what a type scale is trying to do is set up a good proportional system. Why not choose one from history that has stood up the test of time and set up your scales that way?

My favorite comes from Robert Bringhurst's book The Elements of Typographic Style.

http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881792063 http://webtypography.net/3.1.1

On page 158 in the section on Shaping The Page he talks about the Golden Section and the Fibonacci sequence, He sets up a Type Scale as an example using a two-stranded Fibonacci series to suggest type sizes one might use.

The two sets of Fibonacci numbers are below. Each of the numbers that follows the previous has a Golden Ration proportion.

Strand 1 is : 5 • 8 • 13 • 21 • 34 • 55 • 89 . . . Strand 2 is : 6 • 10 • 16 • 26 • 42 • 68 • 110 . . .

He then suggests combining these two strands like a set of DNA so you get: A Type Scale of : 6 • 8 • 10 • 13 • 16 • 21 • 26 • 34 • 42 • 55 • 68 • 89 • 110 (in points)

You can essentially come up with any kind of scale that you want, but if there is not enough difference between scale numbers there will not be enough to separate out the difference between headings and readers might be confused.

Of course the Fibonacci Scale above would have to be translated to work on the web — perhaps using ems so it would be a responsive scale.

Its a mouthful but hope that helps.

Francesco //