Think Before You Use CSS Relative Units

As a preface, I am primarily going to talk about ol' rem and em here but I'm sure one would be able to draw similar conclusions with other relative font and viewport units to the same ideas mentioned in this post.

---

This post goes out to all the people that say: "You have to use relative units instead of px for everything in CSS or else you are a bad developer 😡”. I am sure some of you know my feelings on how the internet is just a huge mess right now and that I am disappointed with how people (definitely including myself) tend to gather information anymore. I think it is this continuance of the entertain-net that has brought us to this point of having an even greater stack-overflow-esq-copy-and-paste habit. We just want to do the right thing with the least amount of effort possible. I understand completely because I am guilty of it.

Anyways… this week has been interesting as you can tell. I am just tired of people getting overly excited over something so relatively small 😉. But fear not, because I am about to share with you really the only thing you have to do with relative units.

Use font-size relative units for styling font size.

Boom! You are done with the necessities of rem, em, etc… units. This is my biggest point and you can stop reading this now if you want. Everything else is basically optional given your site meets the WCAG conformance rules with variance in zoom levels and root font size values. As someone who has studied accessibility as their main focus in front-end development and has been a part of accessibility remediation projects for 2 years now, I can say from the heart that we need to just solve the biggest problems first. It is like arguing about car paint when your timing belt is broken.

Read WCAG before you start saying what is and isn't accessible

Your biggest bet to understanding this whole thing is to just read the WCAG specs to get a sense of the definitive rules first, but here are the ones that are probably the most important for zooming and dynamic font size:

• Resize Text
• Text Spacing
• Reflow
• Consistent Help (maybe)

I feel we as a front-end community get ahead of ourselves with this relative unit discussion, and the focus is lost on the main goal of ensuring that our site stays functional, legible, and informative on most different zoom sizes and browser-set font sizes. I just want to make sure that we know that “use relative units at all times!” is definitely not a rule in WCAG or anywhere for that matter.

Test for all cases

Let's just do a super quick test. Adjust your default user agent (UA) font size by following this guide to increase it to "very large" or something similar. Now, going back to this blog, everything is indeed bigger now, which is what we wanted. Set that same default font size setting back to normal, and then go back to the site. Use the normal browser zoom this time by pressing Ctrl/Cmd + and Ctrl/Cmd -. Similar effect yes?

Essentially, we want these two tests, both conducted on a variance of screen sizes, to play nicely with the site and make sure nothing gets broken. If we set our zoom to 200%, size our default text to large, and look at the result from an iPhone SE screen size; this blog post will look broken. This brings me to my next point.

Relative units in layout styles

Now, this is the interesting part: can we use relative units anywhere else? Of course, they are merely calculated values. Even the "absolute" CSS units are technically also relative values and are dynamic across different devices. However, what we call relative units in CSS are very powerful, and with great power comes sometimes great headaches in refactoring. A lot of the decisions to use relative units in padding and margin are merely design choices. For instance, I will show some comparisons of different zoom/font size levels for the Recent Posts component on Mutual Threads.

Chrome Desktop - Normal UA Font Size - 200% zoom

Current Absolute State (px for padding, margin, gap, etc…)

Relative State (rem for padding, margin, gap, etc…)

Chrome Desktop - Very Large UA Font Size - 150% zoom

Current Absolute State (px for padding, margin, gap, etc…)

Relative State (rem for padding, margin, gap, etc…)

Final Thoughts

Based on the images above, we can see that either of these views of the site is accessible and everything is fine. It's really only a design choice (in this case), and so far I think the consistency with the absolute values looks better, but honestly, I could be fine with either. Basically what I am trying to say is…

Some people use em for media queries. Some people use relative units for padding/margin on the block axis and then use absolute units for padding/margin on the inline axis. Some people avoid relative units for layout styles altogether since they have the potential to cause problems on smaller screens for components with big padding and margin values. I personally, barely use relative units in layout styles unless it makes sense to. Some people need to use relative units for a lot of styles since they need the print version to look nice. Whatever you decide to do or use, make sure to just always test the WCAG stuff like mentioned earlier in this post, and that will benefit all of us 😊. Thanks for reading!

TL;DR

1. The only place you really need to add relative units for sure is the font-size property
2. Use the WCAG specs as a baseline for all your rules
3. Add zooming and default font size changes to your Front End testing flow
4. Do you and be yourself yo