Rem unit is the most useful length variable in CSS, and its utility goes beyond the usual font sizing where it is widely implemented. Before I give you the lowdown about this smart CSS addition, let’s check out first what rem actually is and how it can help give you very adaptive website.
For those unfamiliar with rem, it’s a shortened term for root em and it is a way to specify fractions in the root element of the whole html document. In comparison, the unit em has its value referenced with the font size of the current element. This is advantageous when you use boxes and they scale with changes in the font size subsequently, allowing a dynamic way of measuring length.
Because rem references the font size of the root element, all references to rem will be consistent and returns the same value regardless of the font size. Because of this, rem can be used as a document wide CSS variable that is widely supported in all modern browsers.
For fonts, the rem unit uses a base 16px font size, meaning you can use the 62.5% rule used with em when converting rem units to px. The typical use for rem that most people implement is the usual font declarations. When em values become compounded because of markup nest complexities, rem allows you to untangle such issues with ease. Rem has a lot more uses than just playing around with text.
Rem can be used for scaling documents, building scalable components that make your website functional even if changes are done on the browser. This is useful for users like me who like reducing the size their browser window to half and accommodate another window. This allows the contents of the document to be dynamic, letting the contents adjust properly even if the font size or the window is adjusted. This is done through the expression of page elements like padding, margin and widths in rem, creating a UI that grows or shrinks in conjunction with root font size.
Using CSS media queries are a practical way to set font-size to adjust depending on the width of the screen. This is a good demo of using the rem units for scaling in action, courtesy of Adrian Sadnu in his demo from SitePoint. This allows us to customise the reading experience of the user, making the site flexible to use.
Rem obviously has a lot of advantages in CSS. In its value alone in flexibility, reading experience improvements, dynamicity and scalability make it a power method in defining components. Though rem units are not the be all, end all solution for all our problems, properly understanding how to implement it takes a tonne of load off developers. It is more advantageous to use rem in runtime scaling rather than fonts, as it gives you utter flexibility with your CSS documents that you can’t get in any other method. Rem can be used either on font or layout, but it is wasteful to choose font over layout as it can give your CSS documents a runtime advantage you and your users will appreciate.