This is a system for creating harmonious font sizes in a document — for example a web page.
- Choose the typeface for the body copy.
- Choose an appropriate font-size the body copy—usually 16px (100%).
- Choose an appropriate line-height for the body text—usually between 1.3–1.5 (depending on screen size).
- Choose a type scale, often based on a musical or other natural scale.
- Set up the CSS font-sizes, line-heights, and margins to create the rhythm.
- Create a set of utility classes to be used throughout your design.
The main idea is to pick a base font size, say 16pt, and then a multiplier, say 1.125, usually based on some natural scale. Font sizes are then set up as follows:
16pt -> 1.125 * 16 -> 1.125 * 1.125 * 16 -> …
You can also go down:
16pt -> 16 / 1.125 -> 16 / 1.125 / 1.125 -> …