Fluid typography CSS in WordPress with modular scale

Table of contents

1. Installing the library
2. Including the library in your SCSS
3. Set up your fluid typography system
4. The magic responsive mixin
5. The ms() function
6. Wrap up

One of the most challenging parts of responsive web design is to succeed with fluid typography css. I’ve worked with many systems during my years as a front-end developer, I even tried to build my own.

For the last couple of years i have been using a package called modularscale-sass. The best part about this is you don’t only get fluid typography, you get mixins to make every element of your site fluid. If you scale this blog post window horizontal, you will see that all the lines in both the hero and post content stays the same. Even if the font is scaling, the wrapping containers is scaling with it.

Installing the library

To show you how to to this, we first need to get the modular scale library working. Either you just download the package and include it in your scss files, or as I prefer – you install it via npm using this command:

npm install modularscale-sass --save-dev

Including the library in your SCSS

Once you hav it installed you will need to include it in you scss files somehow. I got a SCSS-system where I use the BEMIT approach. I would say this is by far the best way to write scss for for WordPress themes, so I suggest you read up on it If it’s not familiar to you. Wichever system your using, you include the modularscale library. Since I’m using npm, my code for including looks like this:

@import '~modularscale-sass/stylesheets/modularscale';

Set up your fluid typography system

Once we hav the library imported, we need to setup our typography system. I create a file in my scss/config folder called _typo.sccs, it looks like this:

$europa: europa, sans-serif;
$miller: miller-display, serif;

$modularscale: (
  base: 14px,
  ratio: 1.2,
  400px: (
    ratio: 1.3,
  ),
  800px: (
    base: 16px,
    ratio: 1.3,
  ),
  1400px: (
    base: 18px,
    ratio: 1.3,
  ),
  2400px: (
    base: 24px,
    ratio: 1.3,
  )
);

The first two variables are just for defining the fonts for this blog, so don’t mind them. The scss-map below is where it get’s interesting. This map first sets up a base font size, and a base ratio to define how much every font bump is gonna scale. Think of it like step-0 is 14px, but step-1 will be 14px * 1.2, this will make step 1 = 16,8px, step 2 = 20,16px and so on.

Next, you can add breakpoints where you can change base font-size, or ratio. As you se, at 800px I have a breakpoint defining the base font-size to 16px, and the ratio to 1.3. This means, that at this point step-0 will be 16px, instead of 14px as below 400px.

The magic responsive mixin

To set the base font-size for the whole page, i use the responsive mixin for this purpose, on the body element. To properly size a large heading i bump up the size a couple of steps:

body {
  @include ms-respond(font-size, 0);
}

h1 {
  @include ms-respond(font-size, 4);
}

This will make all our type paragraphs scale fluid between 14px and 16px, in the window widths range of 400px and 800px. and my H1 will scale between ~29px and ~46px for the same range.

Thats the basics of making fluid typography css, but there is more. We can use the same mixin to make our wrappers fluid on the same ratios as well, this will help us preserve the same line length. According to this readablity study, a line length of 50-60 characters is optimal for our reading experience, but up to 75 is acceptable.

With this information it’s time to get testing. The neat thing with this mixin is that you don’t need to feed it with the font-size property, we can feed it with margin, or any other css-rule. In this case, i would use max-width for the wrapper like this:

.post-wrapper {
    @include ms-respond(max-width, 13);
}

When measuring the lines now, we have a pretty good match at about 70 characters on each line, and since we’re scaling the font-size on the same scale as the wrapper, the lines will stay the same in all widths above, this is true fluid typography at its best.

The ms() function

The library also comes with a function, where you can use the scale to change font-size without making it fluid. This function is called ms() and can be used like this: font-size: ms(3). It will step the font size up three steps, and change at each breakpoint, but not scale fluid in between.

Wrap up

Of course there is a whole lot more you can do with this library, and I have only touched the surface here. You can read more about all the good stuff it can do for fluid typography here. Feel free to ask me to elaborate anything in the comments. Maybe I can update this post to make it cover more and elaborate.