When designing modern web layouts, understanding relative units like rem and em is key to building flexible and scalable designs. Both of these units allow you to size elements relative to font sizes, but they work in slightly different ways. In this post, we'll explore what rem and em are, how they differ, and why many developers set their base font size to 62.5% on the html or body element.

1. What Are `em` and `rem`?

`em` Units

Definition: The em unit is relative to the computed font-size of the element on which it is used. For example, if an element’s font size is 16px, then 1em equals 16px. If you nest elements, the em values compound based on the parent’s font size.
Usage Example:

.parent {

font-size: 16px;

}

.child {

/* 1.5em here equals 1.5 times the parent's font size (16px), which is 24px */

font-size: 1.5em;

}

Pros: Great for scaling elements relative to their parent, especially when you need components to grow or shrink together.
Cons: Can be tricky to manage when elements are nested, as the sizes may compound unexpectedly.

`rem` Units

Definition: The rem (root em) unit is relative to the font-size of the root element, typically the <html> element. Unlike em, it is not affected by the font-size of parent elements, providing more predictable and consistent sizing across your site.
Usage Example:

html {

font-size: 16px;

}

.element {

/* 1rem equals 16px, regardless of where the element is in the DOM */

font-size: 1rem;

margin: 2rem; /* equals 32px margin */

}

Pros: Consistency is key—using rem makes it easier to maintain uniform sizing, especially for typography and layout spacing.
Cons: If you need elements to scale based on their immediate context, rem might not be the best fit.

2. Why Set the Base Font-Size to 62.5%?

A popular technique among developers is to set the font-size of the <html> (or sometimes <body>) element to 62.5%. The reason behind this is simple math: most browsers default to a 16px font-size, and setting 62.5% of 16px gives you 10px. This makes converting between rem units and pixels much more intuitive.

Example:

html {

font-size: 62.5%; /* 62.5% of 16px = 10px */

}

body {

font-size: 1.6rem; /* 1.6rem = 16px */

}

Benefits:

Simpler Calculations: With 1rem equal to 10px, if you need a 24px font, you simply use 2.4rem.
Consistency: It helps standardize the sizing across your project, making it easier to maintain and scale your design.

Considerations:

Ensure that any changes in the browser’s default font settings are considered. While 62.5% is widely adopted, it’s important to test your design across different devices and settings.

3. Practical Examples

Example: Typography with REM

<!DOCTYPE html>

<head>

<title>REM and EM Example</title>

<style>

html {

font-size: 62.5%; /* 1rem = 10px */

}

body {

font-size: 1.6rem; /* 16px base font size */

line-height: 1.5;

margin: 2rem;

}

h1 {

font-size: 3.2rem; /* 32px */

}

p {

font-size: 1.6rem; /* 16px */

}

.box {

width: 20rem; /* 200px */

height: 10rem; /* 100px */

background-color: lightblue;

margin-top: 2rem;

}

</style>

</head>

<body>

<h1>Welcome to My Website</h1>

<p>This paragraph is set in rem units, making it scalable and consistent throughout the design.</p>

<div class="box">This is a box with dimensions set in rem.</div>

</body>

</html>

Example: Nested Elements with EM

<!DOCTYPE html>

<head>

<title>EM Example</title>

<style>

.parent {

font-size: 1.6rem; /* 16px */

border: 1px solid #ccc;

padding: 1rem;

}

.child {

font-size: 1.5em; /* 1.5 times parent's font size = 24px */

margin-top: 1rem;

}

</style>

</head>

<body>

Parent Element (16px)

Child Element (1.5em of 16px = 24px)

</div>

</div>

</body>

</html>

4. Conclusion

Both rem and em are powerful units for building scalable and responsive designs in CSS:

REM offers consistency by referring back to the root element, making it ideal for global typography and spacing.
EM is great for contextual scaling within components, but requires careful management when elements are nested.
Setting the base font-size to 62.5% simplifies your calculations by making 1rem equal to 10px, leading to more predictable designs.