A Bite-Sized Best Practices Guide for CSS Units: Em, Rem, Px, and More | by Celia Lewis | Dev Genius | Medium

12/19/2020, 1:42 PM

You have 2 free member-only stories left this month. Sign up for Medium and get an extra one

A Bite-Sized Best Practices
Guide for CSS Units: Em,Rem, Px, and MoreA beginner’s guide to using CSS units like em, rem, px andmore in your responsive web designs.
Celia Lewis

Follow

Jun 24 · 3 min read

https://medium.com/dev-genius/a-bite-sized-best-practices-guide-for-css-units-em-rem-px-and-more-f621c0d56df4

Page 1 of 6

A Bite-Sized Best Practices Guide for CSS Units: Em, Rem, Px, and More | by Celia Lewis | Dev Genius | Medium

12/19/2020, 1:42 PM

Absolute Units
Absolute units are divided mainly into two categories: pixels (px),and the rest (cm, mm, in). Absolute units are good for laying out
precise screen dimensions, but they will not scale with theviewport, so they aren’t so great for creating responsive
designs on tablets and mobile phones.
You may recognize units such as cm, mm, and inches from youreveryday life. These units, like their real-life counterparts, should
only be utilized when making designs for print (physical designs).
In general, avoid the non-pixel absolute units unless you have aspeciDc use for them.
Pixels (px)Also pt, cm, mm, inBest Practice: While I advise that you use the px unit
sparingly if there is a better alternative, they can sometimes be
useful in specifying speci;c widths, heights, and font sizes.

Percentages

https://medium.com/dev-genius/a-bite-sized-best-practices-guide-for-css-units-em-rem-px-and-more-f621c0d56df4

Page 2 of 6

A Bite-Sized Best Practices Guide for CSS Units: Em, Rem, Px, and More | by Celia Lewis | Dev Genius | Medium

12/19/2020, 1:42 PM

Percentages are primarily used for widths. They make it reallyeasy to calculate what percent of a parent object’s space a childelement should occupy. For example, examine the HTML below,
where “parent” is the parent container to two children:<div class=”parent”><div class=”child-one”></div><div class=”child-two”></div></div>

By default, my parent div (the red block below) has a width of100%. By declaring child-one to have a width of 60%, and childtwo to have a width of 40%, the result will be:

Relative Units
These units are very commonly used to achieve responsive
designs, since they scale with diUerent elements of the page. Thismeans they will look nice on monitors, tablets, and phones! Theem and the rem units should be your best friend as a
responsive web designer.
Units relative to font-sizes. For example, em, rem, ch, and ex.
https://medium.com/dev-genius/a-bite-sized-best-practices-guide-for-css-units-em-rem-px-and-more-f621c0d56df4

Page 3 of 6

A Bite-Sized Best Practices Guide for CSS Units: Em, Rem, Px, and More | by Celia Lewis | Dev Genius | Medium

12/19/2020, 1:42 PM

Units relative to the viewport, like vh, vw, vmin, and vmax.

Things to know about Em and Rem
The Em Unit:
When used on a font-size property, em is relative to parent’s
font size.
1em will change nothing. It means copy the parent’s fontsize.
So 120% em is equivalent to 120% the font size of the parent.
A Problem: If you change the parent’s font size, you willaDect all subsequent font sizes for all child elements ofthat parent. So by applying the em unit to children within ahierarchy, you could have some astronomical scaling eUects if
you change the root font size.
Best Practice: Em is great for setting padding, margins,
and widths. This is because when you use em for anythingother than font-size, it is not relative to the parent. It isrelative to its own font-size.
So if you use the em unit on a width property, the width
will scale with the font-size of that element, not with thefont-size of the parent element.

The Rem Unit:
https://medium.com/dev-genius/a-bite-sized-best-practices-guide-for-css-units-em-rem-px-and-more-f621c0d56df4

Page 4 of 6

A Bite-Sized Best Practices Guide for CSS Units: Em, Rem, Px, and More | by Celia Lewis | Dev Genius | Medium

12/19/2020, 1:42 PM

Instead of being relative to the parent, the rem unit is relative
to the root object: the HTML element.
You can change the font size on the HTML element tochange the font-size on all objects using the rem unit.
A Problem: Setting a font-size in the HTML element is not
required. It can occasionally create problems down the road,so use it sparingly.
Best Practice: Rem units avoid the scaling problems of theEm unit, so they are a great go-to when setting font-size forresponsive web design.

Sign up for Best Stories
By Dev Genius

The best stories sent monthly to your email. Take a lookGet thisnewsletter

Your email

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy formore information about our privacy practices.

Responsive DesignHTMLCSSWeb Development

Programming

https://medium.com/dev-genius/a-bite-sized-best-practices-guide-for-css-units-em-rem-px-and-more-f621c0d56df4

Page 5 of 6