A solution to font sizing in CSS

This article isn’t really a one size fits all, solid, untouched solution to the problem of sizing your projects fonts (Which the title suggests), but more of a clever way to approach the way you size your css fonts.

The proposed method I put forward here is nothing new or that hasn’t already been put out there, in fact I got this particular solution from a mix between two articles, ‘Font sizing with rem’ by Jonathan Snook and ‘Font Size Idea’ which is over on CSS-Tricks by Chris Coyier. I am not going to go over the absolute details of what these articles cover but to learn more on a different way to deal with font sizes within a project check those articles out. The basic concept is about using a CSS percentage ‘hack’ on the root and to simply the way you size your projects fonts.

Note: The goal here is to make a simple scalable and maintainable approach as possible to font sizing with little cognitive overhead as possible.

The problem

Here’s an example of the type of font sizing setup you might commonly see

Seems pretty simple right? Yes, your right, it is but the reason I started looking around for different font sizing solutions was because I found myself quite frequently in the situation where I was trying to get a designs font size matching the site I was developing and I was having to check the root font size before declaring a font size property to remind myself of the root unit to ensure the element or class I was applying that font size to hadn’t already got a value that could interfere with the one I was going to write which added a bit of a cognitive headache to the mix, and it got really annoying over the project timeline.

There has to be a better way. Right?

Well how about using relative units instead?

As you can see here we are using a pixel unit for the document font size and them working from that using ems.

Using relative units is a good solution and one I have used for a while as it brings inheritance into play instead of not being influenced by anything but it’s value like the pixel unit does. It’s also pretty easy to follow for example in this case the document font size is 17px so 4.5rem would equal 76.5px or another way to put it 4.5 x 17. But I still think this is a bit confusing for the developer because you still have to do the math. Can we make it so simple that we know what the exact font size is just by glancing at the value?

Note: Don’t get me wrong pixels are great when you wish for a value to be absolute and final with no outer interference but relative units such as ems and rems are great for font sizing as they scale much easier.

Introduction to the Percentage hack

To make font sizing as simple and clear for the developer as possible we need to look at the document font size value. In all the previous examples we have specified the pixel unit to the root font size. You can use the percentage unit to create a simple but effective work around or ‘hack’ that if you set the percentage to a specific value the rem value will equal what it displays. What do I mean? It’s better if I give an example.

How much simpler is that? Now it does what it implies and you need to look no further than the rem unit, as it tells you the font size just by looking at the value on the selector.

So there you have it. I hope you have taken something away from this article in some form and that you at least consider the proposed rem units as a possible option for a future project.