Do you think IIT Guwahati certified course can help you in your career?
Introduction
When designing a website, ensuring that text and layout elements scale properly across different screen sizes is important. CSS provides various units for sizing elements, and one such unit is rem. The rem unit helps in maintaining a consistent design while making the website more accessible and adaptable.
This article will discuss what rem units are, how they work, and how they compare to other units like em.
What Are rem Units?
The rem (root em) unit in CSS is a relative unit of measurement that depends on the root element's font size. Unlike em, which depends on the font size of its parent element, rem is always based on the font size of the <html> element.
For example, if the root font size is 16px, then:
1rem = 16px
2rem = 32px
0.5rem = 8px
This makes rem an excellent choice for responsive and scalable design.
Base Font Size
The default font size of most browsers is 16px. However, you can change it in your CSS file:
html {
font-size: 20px; /* Now 1rem = 20px */
}
After setting this, any rem value used throughout the site will be based on 20px instead of the default 16px.
Each heading follows a scale factor of 1.5 for a harmonious design.
Example
Let’s see another example where rem is used for spacing and layout:
html {
font-size: 10px;
}
.container {
padding: 2rem; /* 20px */
margin: 1rem; /* 10px */
}
Output
The .container will have a padding of 20px (2rem * 10px) and a margin of 10px (1rem * 10px).
Consistent Spacing
Using rem units ensures a consistent spacing system throughout your CSS, making it easy to maintain. For instance:
html {
font-size: 16px;
}
.button {
padding: 1rem 2rem; /* 16px top & bottom, 32px left & right */
font-size: 1.25rem; /* 20px */
}
Output
The .button class has padding and font size values that scale well across different screen sizes while maintaining a balanced look.
Rem Units vs Em Units
Both rem and em are relative units, but they function differently:
Parameters
Rem Units
Em Units
Definition
Relative to the root element's font size (usually the <html> element)
Relative to the parent element's font size
Use Case
Ideal for consistent sizing across the entire document
Useful for scaling elements relative to their parent
Example
If the root font size is 16px, 1rem equals 16px
If the parent font size is 16px, 1em equals 16px
Nested Elements
Remains consistent regardless of nesting
Scales based on the nearest parent element
Ease of Use
Easier to maintain and predict
Can become complex with nested elements
CSS Example
font-size: 1rem;
font-size: 1em;
Example
Comparison of rem and em:
html {
font-size: 16px;
}
.container {
font-size: 2em; /* 32px based on parent */
}
.child {
font-size: 2em; /* 64px if inside .container */
}
.rem-container {
font-size: 2rem; /* Always 32px */
}
Output
The .child inside .container becomes 64px (2em of 32px).
The .rem-container remains 32px regardless of nesting.
Font Sizing with Rem Units
Using rem units for font sizing is a great way to ensure consistency across your entire website. Since rem units are relative to the root element's font size, they provide a predictable way to scale text sizes. Let's understand how you can use rem units to set font sizes in your CSS.
Setting the Root Font Size
First, you need to set the root font size. This is typically done on the <html> element. By default, most browsers set the root font size to 16 pixels, but you can change it if needed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rem Units Example</title>
<style>
/* Set the root font size */
html {
font-size: 16px;
}
/* Set font sizes using rem units */
body {
font-size: 1rem; /* 16px */
}
h1 {
font-size: 2rem; /* 32px */
}
p {
font-size: 0.875rem; /* 14px */
}
.small-text {
font-size: 0.75rem; /* 12px */
}
</style>
</head>
<body>
<h1>Welcome to the World of Rem Units</h1>
<p>This paragraph uses the default font size of 1rem, which is 16 pixels.</p>
<p class="small-text">This text is smaller, set to 0.75rem, which is 12 pixels.</p>
</body>
</html>
Output
In this example, we set the root font size to 16 pixels. Then, we use rem units to set the font sizes for different elements. The body text is set to 1rem, which is equivalent to 16 pixels. The h1 heading is set to 2rem, making it 32 pixels, and the paragraph with the class small-text is set to 0.75rem, making it 12 pixels.
Benefits of Using Rem Units
Consistency: Rem units ensure that font sizes remain consistent across the entire document, regardless of nesting.
Ease of Maintenance: Changing the root font size will proportionally scale all elements using rem units, making it easier to adjust the overall design.
Predictability: Since rem units are based on the root element, they are more predictable compared to em units, which can change based on the parent element.
Frequently Asked Questions
Why should I use rem instead of px?
Using rem ensures that font sizes and spacing scale consistently across different devices, making your website more accessible and responsive.
What is the default size of 1rem?
By default, 1rem is equal to 16px, but this value can be changed by modifying the font-size of the <html> element.
Can I use rem for margin and padding?
Yes, using rem for spacing properties like margin and padding helps maintain consistency throughout the website.
Conclusion
In this article, we will learn about REM units in CSS, their benefits for creating responsive and accessible designs, and how they differ from other units like pixels and EM. We will also learn how to use REM units effectively for various properties such as typography, margins, and padding to improve scalability and ensure a better user experience across different devices.
518+ registered 
