Sizing in CSS.

When designing with CSS, you may notice that there are various measurement unit options for sizing, allowing you to choose PX, REM, EM, %, VH, or VW. But what do these options actually mean, and when should you use one over another?

Let’s start with the basics of these units, their meaning, classifications, differences and usage. PX stands for pixel, REM — root element, EM — element, % — percentage, VH — viewport height, and VW — viewport width. They can be classified into two(2) divisions the Absolute(s) and the Relative(s).

The Absolute Units.
Essentially PX is the only absolute unit that is they are fixed measurements and do not rely on the size(s) of other elements, although they are relative to the DPI(dots-per-inch) and resolution of the viewing device. But on the device itself, the PX unit is fixed and does not change based on any other element. Using PX can be problematic for responsive sites, but they are useful for maintaining consistent sizing for some elements. If you have elements that should not be resized, then using PX is a good choice.

The Relative Units.
Unlike PX, relative measurement units are better suited to responsive design and also help meet accessibility standards Relative units scale better on different devices because they can scale up and down according to another element’s size. these are REM, EM, %, VH, VW.

Some examples, in browsers the default font-size is 16px which would serve as the base measurement, If you don’t change that base by setting a base size for the HTML tag via CSS. Relative units calculate the size from this base.

So what do these units mean when dealing with the default of 16px?
The number you specify will multiply that number times the default size.

EM
1em = 16px (1 * 16)
2em = 32px (2 * 16)
.5em = 8px (.5 * 16)

REM
1rem = 16px
2rem = 32px
.5rem = 8px

%[percentage]
100% = 16px
200% = 32px
50% = 8px

This rule implies if either you or the user changes the default size the relative units will be based off of the new base size.

Difference Between REM and Em.
Looking at the example above, it shows EM and REM looking exactly the same. So how do they differ?

The computed pixel value of EM unit is relative to the font size of the element being styled. This is also affected by inherited values from the parent elements unless it is explicitly overridden by a PX unit which is not subject to inheritance.

The computed pixel value of REM unit is relative to the font size of the root (html) element. This is however affected by the font size setting on the browser as a result of inheritance unless it is overridden by a PX unit which is not subject to inheritance.

Simply put, they differ based on inheritance.

So what about %, VH, and VW?

While PX, EM, and REM are primarily used for font sizing, %, VW, and VH are mostly used for margins, padding, spacing, and widths/heights.

Having an instance of 100VH would represent 100% of the viewport’s height, or the full height of the screen. And of course, VW stands for “viewport width”, which is the viewable screen’s width. 100VW would represent 100% of the viewport’s width, or the full width of the screen. % reflects a percentage of the parent element’s size, regardless of the viewport’s size.

Their Usage

PX, unit is fixed and does not change based on any other element.

Press enter or click to view image in full sizePractical representation of using PX

REM,the PX equivalence depends on the font size of the html element.
Given a web page with its root element assigned a font size of 15px

Press enter or click to view image in full sizeInputted StylePress enter or click to view image in full sizecomputed style

EM, the computed pixel value is derived from the font size of the styled element while putting the inherited (parent and grandparent) values into consideration.

Press enter or click to view image in full sizeInputted StylePress enter or click to view image in full sizeComputed style

Viewport units represent a percentage of the current browser viewport (current browser size). While similar to % units, there is a difference. Viewport units are calculated as a percentage of the browser’s current viewport size. Percentage units on the other hand are calculated as a percentage of the parent element, which may be different than the viewport size, If the viewport size changes, the element’s size changes respectively. In that case we have.

VW, would be ratio(ed) according to the browser current viewport width
1 VW = 1% of the viewport’s width (or 4.8px);
50 VW = 50% of the viewport’s width (or 240px);

VH, would be ratio(ed) according to the browser current viewport height
1 VH = 1% of the viewport’s width (or 4.8px);
50 VH = 50% of the viewport’s width (or 240px);

When Should You Use One Over Another?

Have you ever created a large heading and admired how great it looked on desktop, only to realize it was far too large on mobile? (Admission of guilt: I have, more than once).The key to solving this is to use either EM, REM, or VW instead of PX. Which you choose is dependent upon your particular situation.

But Ultimately there isn’t a perfect answer for this question. In general, it is often best to choose one of the relative units over PX so that your web page has the best chance of rendering a beautifully responsive design. Use PX however, if you need to ensure that an element never resizes at any breakpoint and remains the same regardless of whether a user has chosen a different default size. PX units ensure consistent results even if that’s not ideal.

Conclusion

EM is relative to the parent element’s font size, so if you wish to scale the element’s size based on its parent’s size, use EM.

REM is relative to the root (HTML) font size, so if you wish to scale the element’s size based on the root size, no matter what the parent size is, use REM. Also, If you’ve used EM and are finding sizing issues due to lots of nested elements, REM will be a better choice.

VW is useful for creating full width elements (100%) that fill up the entire viewport’s width. Of course, you can use any percentage of the viewport’s width to achieve other goals.

VH is useful for creating full-height elements (100%) that fill up the entire

% is similar to VW and VH but it is not a length that is relative to viewport’s width or height. Instead, it is a percentage of the parent element’s width or height. Percentage units are often useful to set the width of margins.

My Take/Advice

Use EM units only for sizing that needs to scale based on the font size of an element other than the HTML (root) element.

Use REM units for elements that scale depending on a user's browser font size settings. Use REM as the unit for most of your property value.

And for accuracy use pre-processors to abstract the calculations using a PX to REM/EM converter function.