Skip to content

Instantly share code, notes, and snippets.

@scottkellum
Created February 11, 2016 17:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save scottkellum/b4b273fbca409434e906 to your computer and use it in GitHub Desktop.
Save scottkellum/b4b273fbca409434e906 to your computer and use it in GitHub Desktop.

First off using a modular scale is like using a different type of unit and requires a different mental model. Imagine a ruler where the space between numbers regularly increase instead of uniform space between. Using a modular scale can be a useful tool but everyone has to be on the same page when talking about them. I use them on personal projects but it’s often easier to stick with traditional units at work.

The modularscale.com site uses it all over the place as well as my personal site. IBM probably has the largest scale implementation of it and Foundation 3 included the Sass library as well.

While most of the advantages of using modular scales on websites are somewhat subjective as they help many people finding a type hirarchy but many people prefer to work without them, introducing modular scales into responsive web design can have more quantifiable advantages. Smaller screens with less room need a lower contrast between headings while larger screens require higher contrast between type sizes. Using a modular scale allows you to simply change the ratio at different screen sizes to change this contrast while still preserving type and proportion hirarchies in your design. This means you can declair a heading to be ms(4) and change the scale instead of changing all the values at every breakpoint. There are tools in the Sass lib to help you out with this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment