CSS (Cascading Style Sheets) is one of the building blocks of user interfaces in web, mobile, and desktop applications. This styling language has different values and properties, making giving applications different styles and properties easy. REM is one of the values you will encounter a lot as you style your web pages using CSS. 

In this article, I will explain REM in CSS, discuss the importance of responsive typography in web design, describe how REM units are calculated, and mention some benefits of using REM in CSS.

What is REM in CSS?

Root-EM (REM) are units that indicate an element’s font size relative to the root element’s font size. REM is a relative unit, meaning that all the values that use it will change when the font size of the root element changes. The default font size of most browsers is 16px. Thus, if the root element is 16px, the REM size will be 1. 

REM units are the opposite of absolute units like pixels. Take, for instance, this code:

Hello World

This is our styling:

div {
  border: 1.5px solid black;
  width: 200px;
}

The block’s width (200px) will remain the same irrespective of whether the screen size increases or becomes smaller. This width is not relative to anything in our HTML document. 

The same applies to the border of our container; it will remain 1.5px irrespective of the screen or environment variation.

Importance of Responsive Typography in Web Design

Responsive typography involves a lot of things, such as text layout, size, and spacing. These are some of the reasons why web designers implement responsive web design:

• Improved user experience: Web users are attracted to applications that are easy to navigate. An application that adjusts to different screen sizes and environments offers an enjoyable and seamless user experience. 
• Makes it easy to adjust to different viewports: Responsive typography checks the available space on a viewport and adjusts accordingly. Thus, you will not have cases of overstretched texts on large screens or tiny texts on small screens. 
• Improved readability:  A good website should be easy to access and read. Investing in responsive typography ensures that the text on your application adjusts based on the screen size and orientation. 
• Consistent branding: As your source code increases, you may have mixed font variations within your application. Responsive design ensures that you have consistent design approaches irrespective of the screen size or user behavior. 
• Integrates with media queries: Responsive typography can be combined with media queries. Web designers can design different styles through media queries where fonts adjust based on characteristics such as screen orientation and size. 
• Improved accessibility: Responsive typography is one of the foundations of an application’s accessibility. As such, users with varying abilities can adjust the screen sizes and fonts to suit their needs. 

How REM Units are Calculated

REM units are calculated in relation to the font size of the (root) element. This feature allows us to create consistent and scalable designs by setting values based on a single root value.

Most browsers are by default set to 16px. However, you can set the font size of the root value to a figure like 10px. You can have something like this:

html {
  font-size: 10px;
}

In such a case, 10px=1 REM

We can use this code to demonstrate:

    
    
    
    


    
Welcome to Geekflare

This code has no styling and has a single element, an H1, saying “Welcome to Geekflare”.

The font size by default will be 16px, which means that 1REM=16px. When we render this page, this is what we get:

We can now add a styling sheet, styles.css, and demonstrate how REM works. This is how you link styles.css and index.html files on your HTML document’s section:

You can then have this code:

html {
  font-size: 10px;
}

In this case, when we define REM figures, they will be relative to 10px. The font size of our H1 will also shrink, as shown in this screenshot. 

We can now change the size of our H1 using REM values as follows:

h1 {
    font-size: 3.5rem; /* Equivalent to 35 pixels (3.5rem * 10px = 35px) */
  }

Our H1 now will be bigger at 35px=3.5REM. 

Benefits of Using REM in CSS

Most people are used to pixels (px) and percentages as their units of measure when writing CSS code. Why not stick to these two choices instead of opting for REM units? These are some reasons to use REM:

• Increases scalability: You can change the root element’s font size, making REM units scalable. Such an approach makes it easy to change the REM units proportionally. The REM units will also adjust when users adjust their browser’s font sizes.
• Easy to manage: You can change the root element in the or tag, and the REM units will automatically adjust. This approach saves you from the pain of adjusting every element in your CSS file. You can thus change the font size of, let us say, all H1s with a single change. 
• Consistent sizing: REM units control font sizes and spacing. You are thus assured that you will have consistent font sizes across your web pages as they are relative to the root element. 
• Makes it possible to have responsive designs: You can create designs that adjust to various screen sizes and devices. When REM units are used together with media queries, you can adjust the font sizes of the root element, and other units will adjust proportionally.

CSS REM vs. EM vs. Percentages

You may have come across pixels, REMs, EMs, and percentages when writing CSS code. While all these units are used to define font sizes and spacing, they are applicable in different scenarios and come with different features. Let us compare REM against different units:

REM vs EM

REM and EM are relative units, meaning they change based on a given value. However, REM is tied to the root element (), while EM is tied to the parent (container) element. For instance, you have a div that acts as a parent and another div inside the parent that acts as a child. Take a look at this code:

    
This is the parent element.
    

      
This is the child element.
    
  

You can set the EM units as follows:

.parent {
  font-size: 1.5em; 
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
.child {
  font-size: 1.2em; 
  color: #333;
}

We have assigned the .parent class a font size of 1.5em. However, the .child element has a font size of 1.2em, which is relative to the parent class. All the changes in the parent class will be automatically transferred to the child element.

REM vs. Percentages

Percentage units are relative to the size/ spacing of the parent element. So, if we have a parent element, such as the having 16px as its font size, we can set a child element, such as a

to have a font size of 50%, which means that it is 50/100*16=8px. 

You can illustrate this using this code:

body {
  font-size: 16px;
}
p {
  font-size: 50%;
}

We can summarize the relationship between REM, EM, and Percentages using this table:

Feature	REM	EM	Percentage
Relative to	Root element	Parent element /container	Parent element/ container
Inheritance	From root	From parent	From parent
Use case	Suitable for consistent layouts	Suitable for relative sizes	Suitable for responsive designs
Scalability	Yes	Yes	Relative

When Not to Use REM Units

You may be tempted to use REM units in all your CSS measurements due to their many advantages. However, these are some of the instances where they might be inappropriate:

• When dealing with prints: If you want to print something, then you want assurance that you are dealing with absolute values. In such cases, inches or millimeters give you precise control over the dimensions.
• When you want fine-grained control: If you want to control an element’s size, which is closely tied to the parent, REM will not be a good option. In such cases, absolute or fixed units like pixels will be a perfect choice.
• When dealing with animations and transitions: REM units are not suitable where you want the size of animations and transitions to change gradually. When you use REM units, a certain change in the root element’s font size will cause abrupt changes in the transitions or animations. 
• When dealing with legacy browsers: Some older browsers don’t support REM units. In such instances, you can use percentages or pixel-based units. 

Conclusion

We now hope you understand how to use REM in CSS, calculate them, and where to use them. REM values are relative values, meaning you can have consistent font sizes in your applications. 

On the other hand, pixels are absolute values that don’t change based on the size of the viewport or surrounding elements. 

However, such REM values are not applicable in all cases, as there are some instances where percentages and pixels suit better. 

Learn more about styling using these CSS Resources.