Scale

A modular "scale" is a way of creating consistent proportions within a branding system, so that elements like logos, headlines, body text, gutters, and margins all have clear relationships. The “scale” is analogous to a musical scale: the ‘scale’ or intervals work the same way as notes in a progression. In fact, music and design scales use the same mathematical basis.

We use a “perfect fourth” scale, with a 3:4 (or 1.333) ratio between intervals. This scale offers reasonably high contrast (allowing for greater size differences between elements like headlines and body text, which helps complex documents scan more easily) while still allowing enough steps within a given range that it still works well in more confined layout contexts, like mobile phone screens.

You can calculate sizes for various elements on our modular scale using the Modular Scale calculator. Set the “Bases” field to your body text font size (e.g. 10 points, 1 rem, etc.) and it will display a range of sizes you can use in your layout.