Deciphering PX, EM, REM, %, VW, and VH: The Ultimate Guide to Measuring Units!

Web development and web design units have the same principles as any other measuring unit, for instance, meter or foot. They are used to give a number context.

An example of available measuring units within the Greenshift container can be seen in the picture here. With these units you define how much screen space the container may take up. How much horizontal screen space (width) should the container take up?

The units in question are

• PX — Fixed amount of pixels used. Most used on the web.
• % — Takes up a percentage of its parent.
• EM — Scales with its parent font size.
• REM — Scales with the HTML font size.
• VW — Viewport width, the width of the browser.
• VH — Viewport height, the height of the browser.
• CH — The font’s width of the character 0 (zero, or U+0030).

PX (pixel) unit explained

Pixels (px) are the smallest unit of measurement used in digital imaging and graphic design. They’re like the tiny dots that make up an image on a screen. When you zoom into an image, you’ll see it’s made of thousands or millions of these tiny pixels, each with a specific color. See the example. The monitor, keyboard, and mouse are your image. When you zoom in on a part, you see tiny little squares. Those squares are called pixels.

In web design and development, pixels are used as a measurement unit to define the size, spacing, or layout of various elements on a webpage. For example, you might set the width of an image or a text box in pixels. Similarly, you might use pixels to define the space between different elements (known as “padding” or “margin”) on the page.

However, using pixels as a unit of measurement in web design can be tricky because the actual physical size of a pixel can vary depending on the screen resolution of the device displaying the webpage. Higher-resolution screens pack more pixels into the same physical space, meaning a pixel on one device can be physically smaller than another.

To deal with this issue, modern web design often uses relative units like em, rem, percentages, or viewport units, which dynamically adjust based on the size or resolution of the user’s screen or font size. But pixels are still widely used, especially for defining the size of small elements or for creating designs where precision is important.

EM or REM units explained

Let’s continue with the best unit you should use most from now on, the EM or REM units. These are scalable units, allowing us to scale elements like a container up and down relative to a set value, the font size. One em or rem unit is the same as the set font size. So if the font size is set to 8px, and you make a paragraph with a font size of 2em, the paragraph font size would be 8px * 2em = 16px. This is the same for rem.

The difference is from which font size these units are copied. Em uses the font size of its parent element. Rem uses the font size of the HTML element.

em is a CSS unit relative to the font size of the parent element, while rem is a CSS unit relative to the font size of an html element.

LogRocket

Using scalable units allows us to add responsiveness and flexibility to our designs. The main reason for using em and rem units is for accessibility. People can change the font size in their browser because they need bigger texts (EG. Elderly people with glasses) to be able to read the content. Using em or rem allows them to change it on their terms. Fix units like px will stay the same either way.

Example of different font size

Let’s try it out, open up Settings > Appearance > Font-size dropdown, and change the size and see what happens in the next section. They all look the same by default but watch what happens when you change the size.

2em header

2,4rem header

38px header

%, VW, and VH relative units explained

These are relative units and are used to create responsive and scalable layouts for different sizes of screens and resolutions. These are the second most used units on the web. Especially in the time we live in, there are a lot of devices with different screen sizes. From a small smartphone to humongous desktop monitors, they all need to be able to view your website. Developers and designers use these units to ensure their websites look good and function well on any device’s viewport.

What the hell is a viewport?

A viewport is a user’s visible area of a web page. Web developers often need to consider viewport sizes while designing a website to ensure it is responsive and visually appealing on all devices. The size of the viewport plays a significant role in responsive web design, as it can affect layout, typography, images, and other aspects of a website. See the example below, the purple area is the viewport area of this website.

% (Percentage) Units:

The percentage unit is based on the parent element’s size. If you set an element’s width to 50%, it will take up half of its parent element’s width. The advantage of using percentages is that it makes the design responsive to the size of the viewport or parent element, so the layout will adjust automatically when the screen size changes.

VW (Viewport Width) Units:

The VW unit stands for “viewport width.” It’s a responsive design unit equal to 1% of the viewport’s width. For example, if the viewport is 500 pixels wide, 1VW equals 5 pixels. This unit is useful for elements that should scale with the browser window’s width, such as backgrounds or images. It’s also often used for typography to make the text size responsive to the viewport’s width.

VH (Viewport Height) Units:

VH stands for “viewport height” and is similar to VW but based on the height of the viewport instead of the width. 1 VH is equal to 1% of the viewport’s height. This unit is useful for elements like full-screen sections or banners that should always take up a certain percentage of the viewport’s height, regardless of the screen size.

CH unit explained

The “ch” unit in CSS is a relative length unit for “character”. It is based on the width of the “0” (zero or U+0030) character of the current font. So, 1ch is equivalent to the width of the character “0” in the font you’re reading.

This unit is particularly useful when you want to size something based on the current font size or when you want to line up text in a certain way. For example, you might want to set the width of an input box to fit exactly 10 characters. You could do this by setting the width to 10ch.

It’s also worth noting that because it’s a relative unit, it will change size if the font size changes. This can be useful for creating responsive designs that scale well between different screen sizes and font settings.