I like the effort you put into this article.
Stefan Tim Koopmans
31

Hi Stefan

Based on the research I have done, rems are most useful when you want to scale with ease across several responsive breakpoints (frequently).

I decided to use px because we are an information-heavy enterprise app and have fewer breakpoints. We don’t need to scale font sizes that often.

Another reason is that as a designer, thinking about line-height as 20px was easier to translate in mocks than 19.5px or 1.218rem. Designers & developers on team can easily remember to use type as 24px/40px, 20px/32px, 16px/24px, 13px/20px etc instead of 25.39px /38.09px (1.953rem/ 2.895rem), etc (so tedious, I don’t want to calculate the rest of the values right now)(Type format is font-size/line-height)

Typography decisions determine spacing too. I may need to use a similar approach for component sizing and spacing. To specify space of 2,4,8,16px in rem — use 2/base body text size = 2/13 = 0.1538rem, 0.3076rem (4/13), 0.6153rem (8/13), 1.23 rem (16/13). You can see how this is difficult to remember.

The key point is that, all rem values get computed to px by browsers. So, I chose px as it made all design systems values predictable for both designers as well as developers.

Having said that, I can totally see rems being very useful for website design. As most often websites have lot of paragraphs and images but not as many tables or forms (the highlights of enterprise apps). Also, websites typically employ bigger font-sizes and spacing than what an information-heavy enterprise app may. And lastly, websites need to behave well on viewports of several different sizes and based on client feedback, the designer may end up needing to update typeface or font-size several times.

https://benfrain.com/just-use-pixels/ this article by the author of 2 books on responsive design and CSS for large codebases is a good read. He mentions that “I feel like nowadays, when choosing the units to specify for lengths, it’s just down to authoring preference, team communication and weighing up the pros and cons that fixed (px) or proportional (em/rem) length units offer.” I could not have summed it up better.

I will love to hear what others think about this.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.