What are Rem Units in CSS ?

Last Updated : 26 Mar, 2024

Rem stands for root em. It’s a unit of measurement in web development that is relative to the font size of the root element i.e. HTML, typically set in CSS it enables consistent and proportional adjustments across different screen sizes and user preferences.

This makes it easier to create responsive designs that adapt seamlessly to various devices and ensure readability and accessibility. 1rem is equal to the font size of the root element. If the font size of the root element is set to 16px, then 1rem would be equal to 16px.

Table of Content

Base Font Size
Modular Scaling
Consistent Spacing
Conclusion

Base Font Size

Using rem we can set a base font size for the entire document using rem units, then size other elements relative to this base size.

Example: In this example by using rem units, the layout will adapt if the root font size changes, making it more flexible and responsive.

HTML

<!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>
        html {
            font-size: 16px;
            /* Set the root font size to 16px */
        }

        .container {
            width: 20rem;
            /* 20 times the root font size,
             so it's 320px */
            margin: 0 auto;
            padding: 20px;
            background-color: #dadada;
        }

        .box {
            width: 5rem;
            /* 5 times the root font size, 
            so it's 80px */
            height: 5rem;
            /* 5 times the root font size,
            so it's 80px */
            background-color: #3498db;
            margin-bottom: 1rem;
            /* 1 times the root font size,
            so it's 16px */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

</html>

Output:

rem

Modular Scaling

Rem units can be used in a modular way, allows for easy adjustments across different screen sizes by modifying the root font size.

Example: In this example HTML file along with CSS demonstrating the use of rem units in a modular way for responsive design

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Modular Scaling with rem Units</title>
    <style>
        html {
            font-size: 16px;
            /* Base font size */
            color: green;
        }

        h1 {
            font-size: 2rem;
            /* Double the 
           base font size */
        }

        p {
            font-size: 1rem;
            /* Equal to the 
            base font size */
            line-height: 1.5;
            /* Adjust line height
            for readability */
        }

        @media (max-width: 768px) {
            html {
                font-size: 10px;
                /* Adjust font size
                for smaller screens */
                color: red;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <p>This is a paragraph with some text. 
              It adjusts its size based on the root font size set in CSS.
            You can see how it changes on different screen sizes.
          </p>
    </div>
</body>

</html>

Output:

rem2

Consistent Spacing

Rem can be used to maintain consistent spacing and proportions throughout the layout by using rem units for margins, padding, and other spacing properties.

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Consistent Spacing with rem Units</title>
    <style>
        html {
            font-size: 16px;
            /* Base font size */
        }

        .container {
            width: 80%;
            /* Set container width */
            margin: 0 auto;
            /* Center the container */
            padding: 2rem;
            /* Consistent padding
    around the container */
            background-color: #f0f0f0;
            /* Background color
    for the container */
        }

        .item {
            margin-bottom: 1rem;
            /* Consistent margin between items */
            padding: 1rem;
            /* Consistent padding within items */
            background-color: #3498db;
            /* Background color for items */
            color: #fff;
            /* Text color for items */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>

</html>