Responsive
Modular Scale

Modular scale typography

This is a responsive extension of the Sass team's modular-scale add-on. A modular typographic scale gives you a set of predefined values to use in your design, based on one or more base sizes and one or more intervals. You can learn more about modular scale typography on A List Apart, and quickly make a modular scale using Tim Brown's modular scale tool.

Making it responsive

Modular scales are great, but type has a tendency to get a little too big on smaller screens. What responsive-modular-scale allows you to do is quickly create multiple scales for different screen sizes. By changing the intervals used, but not the base sizes, we can compress the scale for smaller screens and expand it out for bigger screens.

For example, a default scale could use a 1.333:1 ratio (a perfect fourth), and on screens 768px (everyone's favorite breakpoint) and up, the scale changes to use a 1.5:1 ratio (a perfect fifth) instead. Our base value stays the same, but the gaps between values in the scale widen, increasing the size of the type to a more appropriate size.

Is this the best approach to responsive typography? Maybe, maybe not. I'm not an expert in type by any stretch of the imagination. I've looked around at various responsive type solutions and I haven't seen anything quite like this, so I'm giving it a try.

Setting the scales

To set up your scales, you'll need a base pixel value and any number of breakpoint/ratio pairs. The generated CSS uses mobile-first breakpoints: by passing in a ratio without a pixel value, it's assumed to be for the smallest screens, and any ratios passed in with pixel values will generate min-width media queries.

The rms-set-scales() mixin allows you to set your base pixel value(s), which don't change, and your ratios, which change at the breakpoints you specify. Here's a basic example: use a 1.333:1 (a perfect fourth) scale by default, and widen to a 1.5:1 (a perfect fifth) scale on medium-sized screens and up.

If you're more into using two main breakpoints instead of one, you could slip an augmented fourth in the middle.

These examples use the modular-scale gem's predefined ratios, of which there are many. However, you can pass in any old ratio you want, in the form of an integer (1.5) or a division problem (3 / 2).

Changing the base

If you change the base font size of your page, you'll need to let Responsive Modular Scale know, so it can internally calculate em values properly.

@include rms-set-base(18px);

Pixels or ems?

Responsive Modular Scale outputs ems for font sizes and breakpoints by default, because em-based values are awesome, mostly for people who zoom their browser. If you'd rather use pixels, you can:

// You can call this before or after rms-set-scales()
@include rms-use-pixels;

Debugging

After setting your scales, you can output the values of the scales at each breakpoint to the console by writing @include rms-list-scales; in your stylesheet. The output looks like this:

DEBUG: Default --
DEBUG: 16px 21.33333px 28.44444px 37.92593px 50.5679px 67.42387px
DEBUG: Min-width: 640px --
DEBUG: 16px 22.62736px 31.99984px 45.25449px 63.99936px 90.50853px
DEBUG: Min-width: 1024px --
DEBUG: 16px 24px 36px 54px 81px 121.5px

Setting the type

Setting a size works the same as it does with the standard modular scale gem: 0 is your base value, positive numbers move up the scale, and negative numbers move down. The rms() mixin will add one font-size property at each breakpoint you specified earlier.

Using a 16px base and two basic scales:

And setting your font size like this:

h1 {
  @include rms(4)
}

Your CSS will look like this:

h1 {
  font-size: 50px; // Default value using the smallest scale
}
@media screen and (min-width: 48em) {
  h1 {
    font-size: 81px; // Larger value using a widened scale
  }
}