Why you shouldn't use pixels for font-size

Certain font-related CSS properties will render your site far less accessible if you define their value using pixels.

Which properties are affected?

All of these properties should never ever be declared in pixels.

1. font-size
2. line-height
3. letter-spacing

Even if your style guide or design file gives you these sizes in pixels (or pts), we must translate those values into more appropriate units when implementing in code.

Why does it matter?

A lot more people than you may think change their base text size, usually making it larger. This can be done at an operating system level or at a browser level.

Text-only zoom is actually the default on my iPhone. Safari has a plus and minus control right there in the browser address bar to make it easy for people to change their text size.

As browsers and devices make settings searchable and more user-friendly, the number of people tweaking font settings will only increase. (I once walked in on my mum holding a magnifying glass up to her computer screen because she didn't know she could change the text size! 🤭 Thankfully, those days are long behind her...)

If you've used pixels to define any of the above style properties, they will not fully respect the user's text size preferences!

At best this means text content becomes too small for some people to read comfortably (bring out that magnifying glass or pinch and zoom!). At worst, it means letters or lines will overlap each other, making the text totally unreadable! 😱

The good news is, if we DO use appropriate units, everything will scale beautifully for ALL users, no matter what changes they make in their settings. And these are easy changes to make!

See text size changes in action

It's worth familiarising yourself with how to change font settings in the browser so you can test your solutions more thoroughly.

Firefox font settings

Chrome font settings

iPhone

Use the 'plus' or 'minus' controls in the Safari browser bar. If you're using Chrome, open up the settings next to the browser bar and choose 'adjust text size'. Then use the 'plus' and 'minus' controls that appear at the top of the screen.

Other user agents

There will definitely be similar settings to change text size within your operating system and on mobile devices. But I'll leave you to figure out those settings on your own. Go explore!

What units should I use?

Font-size

Generally, you won't go wrong using rem!

If your style guide of design file (e.g. Figma / Sketch / Photoshop) provides font size in pixels, you'll need to convert it to rem. Usually the first place to apply this is on the body element (try to avoid setting any direct styles on html or :root).

There are loads of ways to make this easier, and I've already outlined these methods in another post: Should I change the default HTML font-size to 62.5%?. Essentially you will need to divide whatever pixel value you want by 16 to get the rem equivalent for use in your CSS.

I would never recommend setting font size in em unless you have some specific use case where you need an element's font size to scale with it's parent. The only case I can think of where this may be useful is when using an icon font for symbols.

I'll also add that it's a bad idea to mess with font size on the html or :root selectors. Leave that for the browser to apply the user's text size. The only exception might be when you're targeting really large screens, setting a font size in percentage can make everything in your layout scale up. E.g. html { font-size: 125%; } inside a media query targeting very large screens.

Line-height

Usually line-height is written as a unitless value, like 1.5. You may also see it written as a percentage, like 150%.

Which you choose is down to personal preference. I usually use the unitless approach, because I find it easier to read and because it's shorter, making the teeniest tiniest difference to performance.

If your design file gives you a line height value in pixels, you can calculate the unitless or percentage value simply by dividing that value by the font-size. For example, if line-height in Figma/Sketch is 24px, and font-size is 16px: 24 / 16 = 1.5. That's your line-height! (Or 150%).

Letter-spacing

I recommend using em for letter spacing so it always scales with the text where it is used. You could also use rem or %.

These are all valid, but in this case, the em unit definitely makes the most sense to me. Letter spacing is one of those properties that you always want to scale with the font where it's used, and that is exactly what em does!

Summing up...

• NEVER use pixels or viewport units for text properties. (Please, I beg you!)
• Get familar with the text-size settings in various browsers, operating systems or devices. Play with the settings and see how it break some sites. Hopefully this will help you appreciate the importance of choosing responsive units!
• Test your solutions like this, resizing the viewport and using browser emulation with an enlarged default text size. Refactor where necessary!
• Font-size? → Use rem
• Line-height? → Keep it unitless (or use %)
• Letter-spacing? → Use em (or use rem or %)