Web Interface Handbook / Typography

Modular scale

01 Automate text sizing

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.

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.

02 Build contrast by ratio

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, its overall design and expression.

Create a high contrast between headings and text for a landing page or marketing website choosing a higher ratio. This allows you better focus users' attention on important titles and captions.

Dashboards, mobile, and content-oriented applications need a lower ratio because the hierarchy of headings is less meaningful in these types of projects.

03 Round up and cut out values

When you have created a modular scale, round the values, and select only those sizes you may need. This simplifies calculations and the use of the modular scale in your work.

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.

04 Control different contexts

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.

You simply apply two different typography scales depending on the screen. The interface on the fly becomes comfortable to read on any screen.

Building typography on a modular scale is always a good way to keep your design consistent across different contexts.