Modular Scale Design

July 25, 2014

I was able to implement one of my favorite fonts, Avenir, thanks to’s free web font plan. When we switch typefaces, the nature of design almost always calls for tweaks to font sizes, line height, spacing, and all the rest (after all, not all fonts are made the same. 17pt in Museo Sans looks much bigger than 17pt in Avenir.)

When designing on the web, my favorite strategy to implement is using a modular scale, best described in Tim Brown’s excellent article on A List Apart called More Meaningful Typography. The idea is to unite our sizing choices with a metric or ratio of choice—in the above article, Tim uses the golden ratio of 1:618.

I like the golden ratio, but it’s still a bit arbitrary for me. I chose the musical perfect fifth, based off of the ratio 2:3. This decision was inspired by the primary subject matter of my blog, the photography: most of my images are cropped to a standard 3:2 aspect ratio, so it made sense to me to align the rest of my blog’s content along a similar ratio.

The next step is deciding our ideal typeface size. As mentioned before, not every font renders the same at every size. Some fonts look better smaller, some look better larger. To me, the not-so-arbitrary decision was to use Avenir for my body copy and set it at 18pt; not too small, but certainly not too big either.

With these decisions made, we can construct our modular scale using a simple calculator at You can see the scale I ended up using here.

Now, our choices of design metrics don’t have to be based on arbitrary numbers  or our eye alone. We have mathematics to back up our choices, and if you know me, this is how I like to operate. All sizes, from various font sizes and line heights of headings, captions, etc. were chosen from this scale, as well as widths and spacings. The modular scale design concept leaves enough guess work to fit the eye and creative mind of the designer, while implementing pixel-perfect calculations and ratios to satisfy the more detail-oriented designers.

As with any redesign, it’s important to sit on the refreshed look for a couple of days. Allow your visual palette to be cleansed, come back to it, and decide if you still like it. While the modular scale concept seems mathematically sound, the visual arts are rarely perfectly aligned with science. For instance, looking at my design now, I am beginning to feel like the widened content and increased font sizes detract from the emphasized in-your-face photographs. This might call for another look at my choices.