For the majority of website projects I use modular scales to set the typographic harmony. You can get an overview of this technique in the first section of Tim Brown’s excellent A List Apart article.
Basically, you choose a starting point and then use the golden ratio (1.618) to calculate the rest of the sizes.
I’m a big fan of Sass so I was curious if I could use a mixin to automatically calculate a font size based on the Golden Ratio and two user-defined default values. Thereby forcing a modular scale as long as you stuck to outputting the font size with this mixin. Answer (spoiler alert): yes.
First I’ll share the Sass formula and the output and then I’ll explain the function in a little more detail.
This is what the Sass code looks like:
If you are familiar with Sass you may know that the exp() function is not a native function. You have to add this functionality with an external Ruby file (sass_functions.rb) and then reference it when you run the command line.¹
Contents of the sass_functions.rb file:
Command line command (ha):
Once that’s ready here’s how you would reference the mixin function:
If you reference Figure 1 you will see we have our base font size and minor font size set at 16px and 10px respectively. The way the formula works is the base font size is at position 1 on the scale. Position 2 moves up the Fibonacci scale one place so its value is 26px, position 3 is 42px and so forth. It moves down as well, position 0 is 10px and position -1 is 6px.
So the output of the code above would be:
Where the magic happens is in Binet’s Formula for the nth Fibonacci number. It’s a function of position n where n returns the value of the Fibonacci scale at that position.
- f(0) = 0
- f(1) = 1
- f(2) = 1
- f(3) = 2
- f(4) = 3
- f(5) = 5
Where the Fibonacci sequence is: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 and onward
The nice thing about the function is it always returns an integer. And since two values in the type scale have been preset you can use this formula to get the point-size at any position in the scale by following the Fibonacci pattern of the current value being the sum of the preceding two values.
font size = f(n-1)*10px + f(n)*16px
- font size at position 1 =
f(0)*10px + f(1)*16px = 0 + 16px = 16px
- font size at position 2 =
f(1)*10px + f(2)*16px = 10px + 16px = 26px
- font size at position 4 =
f(3)*10px + f(4)*16px = 20px + 48px = 68px
Perhaps this is a little overkill, but the larger vision of mixing SASS and typography like this is a structured way to set typography on the web. The font-size mixin could be part of a larger “typeset” mixin that used a baseline variable to set line-height, vertical margins and padding. It could also include a option to reference a double-stranded modular scale (see the ALA article referenced in the beginning). The options dare I say are endless.
- ¹There’s probably a better way to do this, not sure, I’m still a Sass amateur. If there is I would love to hear about it and would be very grateful. Contact me!