How to choose the perfect heading size and text size in web design typography

This is the best thing I've come across for some time - a logical/technical way to pick font sizes in relation to each other. Read on and if you have time, watch the video as Tim Brown gives his explanation (30mins).

Essentially this technique is built around using a harmonious modular scale (using the Golden Ratio or any other "beautiful" scale) and applying it to text size (so simple I can't believe I haven't run into this before!!)

Once you have settled on a suitable type size for the body text you can use the Golden Ratio to find a modular scale of headings and smaller fonts sizes that are visually in proportion, for example:

Golden ratio = 1:1.618

Text size = 16px

16 x 1.618 = 25.888

16 / 1.618 = 9.888

This produces a pixel scale: 41.9, 25.9, 16, 9.9, 6.1

You can also "reverse engineer" an element box width to find the appropriate text/heading size, for example if you have a column of 570px (like this one) then divided by the Golden ratio you get sizes of 51, 32, 19, 12, 7.5

Have a look at my quick mock-up using these sizes (note that 12 pixels is probably too small for standard body text in most websites) -

The Eye Catcher

An Amazing Heading

Title Heading Size

Body text for a 570 pixel width box based on the Golden Ratio. The eye catcher heading is 51px. The amazing heading is 32px. The title heading size is 19px and the base font is 12 pixels with a standard line height of 19px. These have all been rounded to the nearest whole pixel from the modular scale using 570 as the starting point.

Check out this tool that calculates the modular scale for you, it even lets you add another important number into the equation (like if I wanted to include the value of 16px in the above mock-up) modularscale.com