Using Root EM (REM) for spacing as well as font sizes

In the world of web design, there are various units of measurement available to define the size and spacing of elements on a webpage. While pixel (px) units have been a longstanding choice, a growing trend in modern web design is the use of Root EM (REM) units. An ‘EM’ is a capital letter M. We use this as a reference point because it is (depending on the font) a square letter, where the width matches the height. In this blog post, we will explore why REM has gained popularity over pixels and discuss the advantages it offers to web designers and developers.

1. Scalability and Accessibility:
   One of the primary advantages of using REM units is their scalability. REM units are based on the root font size, typically defined at the document level, making them relative to the user’s preferred font size settings. This means that when users increase or decrease their font size preferences, the entire webpage scales accordingly. This scalability ensures that content remains readable and accessible for users with varying visual needs, contributing to a more inclusive web experience.
   
2. Responsive Design:
   In the era of multi-device usage, responsive design has become a crucial aspect of web development. REM units align perfectly with the philosophy of responsive design, as they adapt to different screen sizes and resolutions. By using REM units, elements on the webpage can proportionally adjust to fit various devices, maintaining a consistent layout and user experience across different screens, including desktops, laptops, tablets, and smartphones.
   
3. Consistency and Maintainability:
   We use REM for spacing for elements that is padding and margins. On nearly all sites we have our REM set to 16px. Using REM for our spacing means we have margins and padding that are all multiples of 16px or 8px when we include half REMs. This creates a uniformity of spacing across the entire site that is kind of like the using the golden mean as found in nature, but with REM ours is a little more block like. Another benefit is that REM’s flexibility simplifies the process of maintaining and updating websites, as developers can focus on adjusting a single root font size, rather than manually modifying pixel values for every element.
   
4. Access to Modern CSS Features:
   REM units synergies well with modern CSS features, such as CSS variables, clamp() and calc() functions. By combining REM units with CSS variables, designers can easily create dynamic and reusable styles, enabling greater flexibility and customisation options. Additionally, the calc() function allows for precise calculations involving REM units, making it simpler to achieve complex layout adjustments and responsive designs.
   
5. Future proofing for new technologies?
   As technology evolves and new devices with varying pixel densities emerge, REM units provide something of a future-proof solution. With REM units, designers can ensure that their websites remain adaptable and visually appealing on upcoming devices without the need for extensive redesigns or adjustments. By embracing REM units, designers can future-proof their websites and provide a seamless user experience for years to come.
   

As a small side note there are some cases where we use EM instead of REM. EM is relative to the font size of a specific element. An example of this is when we have a button that has padding top and bottom of .5em and left and right padding is 1em. If we scale the font-size of the button up then the padding increases as well so our buttons are always proportionate, with the padding relative to the size of the text.

While pixel units have long been the standard for defining sizes in web design, REM units have emerged as a more flexible and responsive alternative. With their scalability, responsiveness, consistency, and compatibility with modern CSS features, REM units provide web designers and developers with greater control over layout and responsiveness. By adopting REM units, designers can create websites that are accessible, adaptable, and future-proof, ultimately enhancing the overall user experience in today’s dynamic digital landscape.