Everything You Need To Know About EM & REM

Magic and logic are inversely proportional to each other. As long as logic stays away from magic, it seems mystical. But as soon as logic slips in, magic is just a few smart and quick moves. EM & REM both can seem like magic to us, but that is logic. One change can make a big difference in your webpage. Both values are converted into the PX by the browser, depending on the font size given to the base. The default root font size of HTML is 16px. As you overwrite this value, inner sizes will also affect.

In simple terms,
EM is related to self or parent font size.
REM is related to the root font size

When you are changing the REM size, EM size can be affected. But when you shift EM size, the REM size will not be affected because it is associated with the root font size. REM will only be affected when the root font size will change. Is it getting confusing? Let’s check in detail.

Convert Into EM/REM

48px into EM/REM with default font size

Base Size : 16px
Required Size : 48px

Required Size / Base Size = Value (3 EM/REM)

EM

If you use EM values for specific things like height, width, padding, and margin, all this will change with changing parent div font size.

With base value :- 16px

.parent-div {
font-size: 16px
}
.parent-div .child-div {
padding: 2em; /*32px*/
height: 5em; /*80px*/
width: 5em; /*80px*/
margin-bottom: 1em; /*16px*/
border-radius: 2em; /*32px*/
}

When you reduce 4px from the Parent-div value

changed base value :- 12px

.parent-div {
font-size: 12px
}
.parent-div .child-div {
padding: 2em; /*24px)*/
height: 5em; /*60px)*/
width: 5em; /*60px)*/
margin-bottom: 1em; /*12px)*/
border-radius: 2em; /*24px)*/
}

You see here that as you change the parent div value, then the inner value will also be reduced. This is a base limitation for the EM that it’s limited to its parent value. This is helpful when you have used so many properties with px, and you have to change each value when you are working with responsive. You can see here that you can change all these properties related to EM by changing only one font-size property.

REM

REM is related to its root means fort size given to HTML. REM value on the page will only change when the root font size is changed. Parent size change will not affect here on REM.

With base value :- 16px

When you reduce 4px from the base value

changed base value :- 12px

.parent-div {
font-size: 1rem
}

.parent-div .child-div {
padding: 2rem; /*32px*/
height: 5rem; /*80px*/
width: 5rem; /*80px*/
margin-bottom: 1rem; /*16px*/
border-radius: 2rem; /*32px*/
}

If you have some values in EM, then check here.

.parent-div {
font-size: 16px
}

.parent-div .child-div {
padding: 2rem; /*24px*/
height: 5rem; /*60px*/
width: 5rem; /*60px*/
margin-bottom: 1rem; /*12px*/
border-radius: 2rem; /*24px*/
}

You can check here when you change the base font size to 12px, but the parent div has a 16px font size. With the change of base value, only REM values are affected, but EM values will not act.

Base Value In Percentage

When the base value you are using is a percentage, then the value of EM/REM will change according to rate. Let’s take a look at 100% & 75%. EM/REM both will be affected as you shift in root font-size.

With 75%

In regular CSS, we have to make calculations for EM/REM, and then we can add value, but in SCSS, we can use the function to convert value without measures.

Let’s check the function:-

$base: 16px;
// PX to REM
@function rem($target, $context: $base) {
@return decimal-ceil($target / $context)+0rem;
}

// PX to EM
@function em($target, $context: $base) {
@return decimal-ceil($target / $context)+0em;
}

// Heading font family
$h1-size: rem(52px) !default;
$h2-size: rem(42px) !default;

@include respond-below(md) {
font-size: $h1-size / 1.5;
}
}

@include respond-below(md) {
font-size: $h2-size / 1.5;
}
}

$hgroup-margin-bottom: rem(15px) !default;

Here we have used the “$base” value 16px. “$target” will be the value that you want to convert into EM/REM. In this function, simply your required value will be divided by your base value, so if you change your base value, then the EM/REM calculation will be adjusted according to that. This will reduce counting and add direct values.

Conclusion

HTML & CSS EM/REM are functional units that can reduce your work in responsive. They are used for majority web design projects because of their accuracy. If you find the technicalities challenging, you can always reach out to the best web development company around you and ask for a consultation. It will also help you scale your text and other components you created with EM/REM. The webpage will be more flexible and edit easily with minor changes. Use EM where you have to make more scaling than the root font size. And use REM where you need value according to the root there you can use REM units. This can help with many factors and reduce your code in responsive. You will save time and energy for better health for the project.

Originally published at https://www.zealousweb.com.