Why You Should Consider Using REM for Web Design?

CSS units are a fundamental part of web design and development, allowing designers and developers to define sizes and distances in a way that works across different devices and screen sizes. Among the many CSS units available, one that has gained popularity in recent years is REM, which stands for "root em". Unlike other units, REM is relative to the root font size, making it easy to scale elements up or down by adjusting the root font size. In this article, we'll explore the benefits of using REM in web design and development, including scalability, accessibility, and consistency.

I'll also provide tips and best practices for using REM effectively, so you can start using this CSS unit in your own projects.

But before we start let's discuss what is REM exactly?

What is REM?

REM is a CSS unit that stands for "root em". It is similar to the more common em unit, but the "em" is relative to the font size of the parent element, whereas the "rem" is relative to the root font size.

If you are wondering, what do I mean by the root font size, then the root font size is the font size of the HTML itself, and it is 16 pixels by default in most web browsers.

Setting the custom root font size:

.html{
font-size: 18px;
}

From the above code the 1 rem is equal to 18 pixels. And, if you set the font-size property of a heading element to 2 rem, it will be displayed with a font size of 36 pixels (2 times 18 pixels).

One of the main advantages of using REM is that it allows you to scale the size of elements up or down easily by adjusting the root font size. This can be particularly useful for creating responsive designs that adapt to different devices and screen sizes.

Additionally, using REM can also help improve the accessibility of your website, as it allows users to adjust the font size in their browser without affecting the layout of the page.

Now that you know what REM is, let's discuss the benefits of using REM in detail now.

The Benefits of Using REM

1. Scalability
One of the biggest advantages of using REM is its scalability. Because REM is relative to the root font size, it allows you to scale the size of elements to big or small easily by adjusting the root font size.

This can be particularly useful for creating responsive designs that adapt to different devices and screen sizes.

For example, if you set the font-size property of a container element to 1.5 REM, and then change the root font size to 20 pixels, the font size of the container element will be scaled up to 30 pixels (1.5 times 20 pixels).

This means you can create a layout that looks good on both a desktop and a mobile device without having to use different CSS rules for each device.

2. Accessibility
Using REM can also help improve the accessibility of your website. By using relative font sizes, you allow users to adjust the font size in their browser without affecting the layout of the page.

This can be particularly important for users with visual impairments, who may need to increase the font size to be able to read the content.

Additionally, using REM can help you meet accessibility standards such as WCAG 2.1, which requires that text can be resized up to 200% without losing functionality.

3. Consistency
Another advantage of using REM is consistency. Because REM is relative to the root font size, it allows you to maintain consistent spacing and sizing throughout your website, regardless of the device or screen size.

For example, if you use REM for all your margin and padding values, those values will be scaled proportionally when the root font size is changed.

This means that the spacing and sizing of your elements will remain consistent across different devices, which can help create a cohesive and professional-looking design.

Overall, using REM can help you create responsive, accessible, and consistent designs that look good on a wide range of devices and screen sizes. By taking advantage of the scalability, accessibility, and consistency benefits of REM, you can create websites that are both functional and visually appealing.

Conclusion

As discussed in the article, using REM can offer several benefits for web designers and developers. Its scalability, accessibility, and consistency make it a great choice for creating responsive, accessible, and consistent designs that look great on a wide range of devices.

While there are other approaches to responsive design and sizing, REM offers a number of unique benefits that make it a useful tool for any web designer or developer.

Whether you're working on a new project or updating an existing one, consider using REM to create designs that are not only visually appealing, but also accessible and responsive.

With its many benefits and best practices, REM can help you create websites that look great and work well on any device.

By the way, you'll need a few rem specific tools if you want to use rem for sizing fonts and different elements on the webpage. I have listed some of my favorites below -

REM related useful tools:

1. PX to REM Chrome Extension
2. PX to REM Converter (Clean UI, Easy to use & Free | Disclaimer - My own web app)
3. Bootstrap (css framework that uses rem)
4. Bulma (css framework that uses rem)

All of these tools are free and some of them are even open source and community built.

For ease of use, consider bookmarking these tools.