Responsive web typography

So, responsive web typography. You should use REM’s, right? No, I’d say.

TLDR;

• Don’t use rems because you think people can’t properly scale their fontsize in their browser if you don’t. (they can)
• Don’t use rems because you think you can then create responisive typography by only changing the body fontsize (because you can’t)
• Don’t use rems because scaling the body-fontsize creates an unpredictable amount of insignificant fontsizes (it does!)
• Too many insignificant fontsizes create a lot of visual noise.
• Don’t use rems because the size of your text has to do with semantics (not mathematics)

Reasons to use rem

A lot of people are using rem for their fontsize. It’s an easier value than em, and the other relative fontsizes ( %, vw, vh, ch, ex ) are not as wel known. Why they use rem? Two reasons people use to say that you should:

1. You should use relative units for typography because then browsers can size your website repsonisbly. In other words: for accesibility. 
   NOT ANYMORE according to this article: R.I.P. REM, Viva CSS Reference Pixel! (I admittedly didn’t check the truth of this article, but it seems legit)
2. You should use relative units for typography because then you can set a new (larger, smaller) font-size at root-level (body or html) and all else automagically scales for you. True. It’s true. But you’re gonna have to ask yourself: do you really want this. The remainder of this text is about showing you that you don’t.

What’s responsive (with relative units)

Usually you will want your body font-size to be slightly larger on small devices. So, in the scenario in which you use relative font-sizes (rems), you will change the body (or html) font-size, and your body font-size (and all other rem sizes!) will scale up.

body {
    font-size: 100%; // usually about 16px
}
h1 {
    font-size: 2rem; // 2 * 16px = 32px;
}
p {
    font-size: 1rem; // 1 * 16px = 16px;
}
@media (min-width: 600px) {
    body {
        font-size: 120%; // 120% * 16px = 19.2px
    }
    h1 {
        // Without declaring anything, so still 2rem.
        // Means this is now 2*(120%*16px)=38.4px
    }
    p {
        // now equals 19.2px
    }
}

The nice part from the example above is that everything scales automatically with only one (1) change in a mediaquery. Cool. But. Do you really want to scale your headings as much as your body font-size?

One shebang does not exist in the real world

As you see above, the body font-size nicely grows on mobile. But, wait! The headers also scale. You probably don’t want that. (At least not to that extend) No problem, you can add specific mediaqueries for your headings. But that sort of defies the idea to be able to change your sizes on only one spot (in on big zhebang).

Calculating the h*** out of it

But besides that, your CSS becomes incomprehensible:

body {
    font-size: 100%; // usually about 16px
}
h1 {
    font-size: 2rem; // 2 * 16px = 32px;
}
p {
    font-size: 1rem; // 1 * 16px = 16px;
}
@media (min-width: 600px) {
    body {
        font-size: 120%; // 120% * 16px = 19.2px
    }
    h1 {
        font-size: 1.4rem; // 1.4 * (120% * 16px) = 26.88px
    }
}

But you probably don’t want your H1 to be 26.88px, but about 30, so you change the rem-size to 1,5625:

h1 {
    font-size: 1.5625rem; // 1.5625 * (120% * 16px) = 30px
}

But now imagine what happens if you want you body font-size not to be 19.2px but 18px. You set your body fontsize to 112,5%,

body {
    font-size: 112.5%;
}

Now you need to recalculate your H1 rem size… 30px/18 = 1.66667rem. Of course you can automate this with a function in SASS, but: why would you? Why not just tell your H1’s and P’s what size you want them? Bonus advantage is that you put the responsibility for your font-sizes in one location (i.e. at the element you actually want changed), instead of spreading out this responsibility.

Rendering and unhappy designers.

The worst of ‘automagically’ resizing is that you’ll get a ton of unpredictable fontsizes that need to be rendered by the browser. Wether that is a big job for the browser I don’t know, but I do know that the rendering will differ (per browser, per OS, per font-size). And that the significance of the differences between different fontsizes will be less. The difference between a 16px heading and a 17px heading is so small, that the user will not see it.

The difference between 1.1 and 1.25 rem sounds ok and significant, but if you look at the image above you see that it will probably not convey any meaning to the user.

And if you start looking in close detail at the rendering of the letters, you’ll see that every font-size makes different decisions on how to render. That’s ok, but you would want to keep the amount of render possibilities to a minimum.

In short, you want to design your fontsizes per breakpoint and not let your math calculate it for you.

If you don’t want to have to write all those different fontsizes in your SASS, you can alway consider using a map for your fontsizes. But that might be worth another post.

[It’s my first post. I just posted it. I don’t want it to live forever as a draft.]