Modular scale | Principles

Chaotic and randomly chosen text sizes give chaotic and random results. A systems approach helps to build a scale of text sizes, where each value will be in harmony with the other.

Modular typography scale at modularscale.com

The size scale can be based on the modular scale and harmony of musical ratios. You can use special tools for this, such as type-scale.com and modularscale.com. By trying different ratios you can find the best scale for your project.

Building three modular scales with different ratios.

The ratio you choose depends on how much contrast and hierarchy you want to create in your typography. This often determines the type of project.

For a landing page or marketing website, it's a good idea to create a high contrast between headings and text; this allows you better focus users' attention on important captions. In dashboards, mobile and content-oriented applications, the hierarchy of headings is less meaningful, and therefore the ratio can be lower.

Two different ratios create different contrasts.

Created values can be rounded, and you can select only those sizes you may need from the scale. This simplifies calculations and the use of the modular scale in your work.

Selection and rounding of modular scale values.

The modular scale makes it easy to find and select size values. Also, the systems approach offers advantages when working in a team. You are building the scale and ratio; each team member will understand how and why the values are created. This will make the work more consistent and accurate.

The modular scale helps you control text sizes in the same design on different screens more easily. For example, creating scales with different base text on desktop and mobile devices.

Scale based on 1.125 ratio for desktop and mobile in Spectrum Design System.

Sometimes the chosen size ratio doesn't produce a sufficient set of large or small sizes. Often small sizes are not enough in complex interfaces with many controls and components, such as dashboards. So it's okay to add to the scale those values required based on the design task or project requirements.

Adding a variety of small size values to the scale.

Of course, you can intuitively build a text size scale and choose values manually. This often allows you to create typography that accurately solves a particular problem. But the system gives reliability and predictability, and the modular scale provides harmony and balance. It helps in the work, especially in a team.