Skip to main content

Modular scale

The implementation of modular scale simplifies and beautifies our designs.

Scales are everywhere. Most notably in nature where the presence of the golden ratio can be found from the microscopic DNA's double helix to vast spiral galaxies.

Tim Brown describes how we may use modular scale in web design in his 2011 A List Apart article More meaningful typography.

Taking this approach and applying it to our Structure, Typography, Spacing and extending into Iconography, Illustrations and further, we are able to define a hierarchy which is beautiful, calculable and concise.

Viewports#

Scale#

1.5

We have six viewports, the smallest width being 320px. This is our initial value that all the other viewports are based from.

We use the formula 320 * 1.5x to calculate the sizes

Then we scale from here in increments of 1.5x as follows:

320 * 1.51 = 480
320 * 1.52 = 720
320 * 1.53 = 1080
320 * 1.53.4 = 1270
320 * 1.54 = 1620
320 * 1.55 = 2430

Read more about our Viewports and see our table of Nucleus viewport sizes.

Typography#

For Typography, we have three multipliers to generate our scales.

Major Second = 1.125
Minor Third = 1.2
Major Third = 1.25

These are applied to our Viewport sizes in the following way:

๐Ÿ”ต Squash & ๐ŸŽพ Tennis uses Major Second. ๐Ÿ€ Basketball, ๐Ÿ‘ Hockey & โšฝ Football & uses Minor Third.
๐Ÿ‰ Rugby & โšช๏ธ Polo uses Major Third.

Read more about our Typography and how Modular Scale applies.