CSS - Typography Scales

typography-scales.css

/* 
Source: http://typecast.com/blog/contrast-through-scale

The 16th century scale:
6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 26, 48, 60, 72
*/

body { font-size:100%; }
h1 { font-size: 2.25em; /* 16 x 2.25 = 36 */ }
h2 { font-size: 1.5em; /* 16 x 1.5 = 24 */ }
h3 { font-size: 1.125em; /* 16 x 1.125 = 18 */ }
h4 { font-size: 0.875em; /* 16 x 0.875 = 14 */ }
p { font-size: 0.75em; /* 16 x 0.75 = 12 */ }

/* The Fibonacci scale: */

body { font-size: 100%; }
h1 { font-size: 4em; /* 16 x 4 = 64 */ }
h2 { font-size: 2.5em; /* 16 x 2.5 = 40 */ }
h3 { font-size: 1.5em; /* 16 x 1.5 = 24 */ }
p { font-size: 1em; /* 16 x 1 = 16 */ }

/* The golden ratio scale: */

body { font-size: 62.5%; }  /* Sets our base type size to 10px, easing the maths. */
h1 { font-size: 6.7773em; /* 10 x 6.7773em = 67.773 */ }
h2 { font-size: 4.1887em; /* 10 x 4.1887em = 41.887 */ }
h3 { font-size: 2.5888em; /* 10 x 2.5888em = 25.888 */ }
p { font-size: 1.6em; /* 10 x 1.6 = 16 */ }

/* Calculator for the golden ratio scale: http://modularscale.com */