Modular Scale

Define

A series of numbers used to create consistency and rhythm

Modular scales are ratios that are used to determine the size of elements in a design. A harmonious scale ensures that sizes will be consistent and proportional. This makes the overall design more pleasing to the eye and easier to read.

When applying a modular scale to the web, a base number is required. In typography, this is usually the value of the body text size. The base value is multiplied (or divided) by the ratio to find the next value above (or below), Continue finding new values sequentially, by multiplying (or dividing) using the ratio.

For example (where body text size = 16px): 16 1.618 = 25.888 25.888 1.618 = 41.887 41.887 * 1.618 = 67.773

Resources

• 🧑‍💻 Modular Scale - Scott Kellum and Tim grown
• 📃 More Meaningful Typography - Tim Brown
• 📘 The Elements of Typographic style - Robert Bringhurst

Web Designer Depot

Universal Principles of Design

Lidwell, Holden and Butler