UX & UI Explained: Modular Scale
The Modular Scale is a sequence of numbers (Ratios), that are used to create a consistency and rhythm to determine the size of several elements in a Design.
A harmonious scale ensures that sizes will be consistent, proportional and proves that the user have breathing areas between elements, which allows a better experience.
When applying a Modular Scale to the Web, a base number will normally be required. In Typography, for example, is the Body Text Size.
The base value is multiplied or divided by the Ratio to find the value above or below. To keep finding new values, just be sure that you make the same operations.
A simple example made with Major Third, on how to use it:
If your Font Size is 14px, the formula will be: 14 x 1.250 = 17.50px.
The most famous and common Ratios are the:
- Minor Second (1.067)
- Major Second (1.125)
- Minor Third (1.200)
- Major Third (1.250)
- Perfect Fourth (1.333)
- Augmented Fourth (1.414)
- Perfect Fifth (1.500)
- Golden Ratio (1.618)
In conclusion, after the values calculated, apply them to Typography elements that must be larger than the Paragraph Text, Headings or/and Sub-Headings.
Final tip to make your job easier with modular scales:
Use ModularScale calculator or Type Scale!
Thank you very much for reading!
