Photo by Michael Maasen on Unsplash

Pixels vs Rems

What to use when sizing typography 🖋

As far as I can remember I have used pixels or percentages for my front end development styling. The choice usually boils down to what the designer has decided to go with (a mix of both).

Responsive design is now becoming standard in a lot of designs and we tend to utilise percentages more and more for sizing elements in our applications. But how should we size our typography? Percentages will work on font sizing but in my opinion it’s not a clean solution (behaves similar to em). An alternative would be to consider using another unit such as rem or em.

TL;DR there is no right or wrong. Personally, I wouldn’t start sizing elements on the page using rem 😅 But for typography they can take some heavy lifting away when working with responsive designs. Consider developing with pixels and deploying rems potentially.

The options

Pixels

Most of you reading this will be familiar with pixels. Pixels are the most common unit. They have good support and designers and developers are comfortable with them. One myth about pixels is that they equate to one physical pixel on your device. This isn’t always true. Devices evolve and this was only true for devices with a 96dpi screen. In fact you can read up on it here.

Percentage/Ems

I’ve put percentage and ems together as they behave similarly. These units allow relative scaling. But they both have a cascading nature which can become exceptionally problematic down the line 😰

html {
  font-size: 16px;
}

In most browsers, the base font size is 16px. This means that

font-size: 1em; == 16px
font-size: 2em; == 32px
font-size: 100%; == 16px
font-size: 200%; == 32px

This seems great because now if I change the base font size, my typography will scale accordingly. This is true with relatively small layouts but if the DOM starts getting a little complex along with our styling rules, the nasty cascading nature mentioned above will come into play.

The cascading behaviour means that when nesting em/percentage declarations, the parent element styling is taken into account as relative and therefore it’s hard to keep a true grasp of the different sizes.

For an example,

html {font-size: 16px;}
div {font-size: 1em;}
div li {font-size: 1.2em;}
div li a {font-size: 1.2em;}

Nested elements in this example will become bigger than their parent 👎

Points

pt is worth mentioning but you should not be using it. The only exemption being when you are creating a print stylesheet. pt sizing relates to actual physical paper size. But the size of 1 pt can differ from browser to browser.

Yes. I understand that design tooling uses pt by default. But that does not mean you should use it. In fact, it’s recommended you don’t.

Taken from w3.org (here)

CSS inherited the units pt (point) and pc (pica) from typography. Printers have traditionally used those and similar units in preference to cm or in. In CSS there is no reason to use pt, use whichever unit you prefer. But there is a good reason to use neither pt nor any other absolute unit and only use em and px.

The only place where you could use pt (or cm or in) for setting a font size is in style sheets for print, if you need to be sure the printed font is exactly a certain size. But even there using the default font size is usually better.

Rems

Rems came in CSS3 and are like ems cooler brother that was late to the party 😎 They work in a similar nature to ems but there is no cascading issue… Hurrah! 🎉

html {font-size: 16px;}
div {font-size: 1rem;} == 16px
div li {font-size: 2rem;} == 32px
div li a {font-size: 2rem;} == 32px

Changing your base font size will relatively scale typography app/site wide. rems ignore their parents and only listen to the root font size 👍

I’ve put together a similar example as above here.

What should I use?

You are free to use whatever you feel comfortable with (just don’t use pt).

For me personally, it really comes down to px and rem. The other units pose too many problems down the line especially with complex DOM structures and designs.

Pixels seems like the easiest option. They are also easier to communicate. But, rem does have the advantage of easier maintenance/scalability. Especially if the client turns around later and says “I want to see all the fonts a little bigger actually…” 🤦‍♂

Developing with pixels and opting for post compilation transforms will be best. That way dropping/opting in for rem is much easier to maintain. Be sure to check out PostCSS!

Using rems to size everything?

All the measuring units mentioned in this article are valid units of measurement. You can use them to size elements in your applications. I would stick to using pixels, percentages or viewport units for sizing your elements. Using measurement units relative to font size is likely to cause maintenance nightmares.

Summary

There are many decisions to make when creating your applications. Sizing style is something that can be often overlooked. Whichever measurement unit you opt for, remember there is no right or wrong. rem, px or a combination of the two are most likely to be your best bet. Sticking with pixels will be fine as many modern browsers support zoom functionality. The use of pixels will most likely never be obsolete. The benefit of rem will of course be the ability to change font size globally with ease.

Consider trying rems in your next project with some of the techniques I’ve mentioned above!

As always, any questions or suggestions, please feel free to leave a response or tweet me 🐦!