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#
Scale1.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.
#
TypographyFor 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.