PX, REM, EM, %, VH, VW: Which Measurement Units Should You Use for Your Website? A Comprehensive Guide
Have you ever designed a webpage that looked perfect on your desktop, only to find it completely broken on a mobile phone? Or maybe you’ve wondered what the cryptic abbreviations like PX, REM, %, or VW mean in your WordPress or Elementor editor options? If so, this article is for you!
Understanding CSS measurement units is the foundation of building modern, responsive, and accessible websites. Whether you use WordPress, Elementor, or write code by hand, these principles are universal. We’ll explain the differences between each unit and when to use them, so your site looks amazing on every device.
Absolute vs. Relative Units: The Key Difference
The primary division of measurement units is into absolute and relative categories.
Absolute Units, like pixels (PX), have a fixed value. An element that is 20 pixels wide will be 20 pixels wide regardless of the screen size or the user’s browser settings.
Relative Units (EM, REM, %, VW, VH) are more flexible. Their value depends on another element—like the font size of a parent element, the size of the screen, or the browser’s default settings.
Today, in an era of countless different screen sizes, “pixel-perfect” design is essentially a thing of the past. That’s why relative units are the key to responsive design.
An Overview of the Most Important Units in Web Design
1. PX (Pixels) – Precision, But Use Sparingly
The pixel (PX) is the most well-known unit. It’s an absolute unit, meaning its size is fixed on a given device.
What is it? A unit with a constant size, independent of other elements.
When to use it?
◦ Small, fixed-size elements: It’s great for defining the thickness of borders, small icons, or precise, small margins that shouldn’t change.
◦ Overall site width: Some developers use PX to set a maximum width for the main site container (e.g., max-width: 1200px) to maintain a consistent look on large screens.What to avoid? Avoid using PX for font sizes! Text defined in pixels doesn’t scale with the user’s browser accessibility settings, which makes it difficult for people with visual impairments to read.
2. % (Percentages) – Flexibility and Proportions
The percentage unit (%) is relative and refers to the size of the parent element.
What is it? A value calculated based on a dimension (e.g., width) of the element it’s inside.
When to use it?
◦ Container and column widths: This is the best choice for creating flexible layouts. Setting widths in % allows elements to adapt smoothly to different screens.
◦ Paddings and margins: Using % for internal and external spacing ensures that the page’s proportions are maintained. On a large screen, the spacing will be larger, and on a small one, it will be smaller, which looks natural and aesthetically pleasing.
Real-world example: If a parent container is 1000px wide and you set an inner element to width: 50%, it will be 500px wide. But if the screen shrinks and the parent container becomes 500px wide, the same element will automatically narrow to 250px.
3. EM and REM – The Kings of Typography and Accessibility
EM and REM are relative units that revolutionize working with text and spacing.
REM (Root EM): This unit is relative to the font size of the root element, which is the <html> tag. By default, 1rem is equal to 16px in most browsers.
◦ Advantages: Using REM for fonts, paddings, or margins ensures that the entire page scales proportionally when a user changes the default font size in their browser. This is a huge plus for accessibility. It also makes it easier to maintain consistent proportions throughout your design.
◦ Best for: Font sizes (font-size), spacing between elements (gap), and global paddings and margins.EM: This unit is relative to the font size of the parent element.
◦ The catch: EM can be tricky with nested elements. If several nested elements have sizes defined in EM, their values can compound, leading to unexpected results (like very tiny or very large text).
◦ Best for:
▪ Line height (line-height): This is the perfect use case for EM. Setting line-height: 1.5em means the spacing between lines of text will always be 150% of the current font size, whether it’s a small paragraph or a large heading.
▪ Button padding: Using EM for button padding will make its size scale proportionally with the font size inside it.
4. VH and VW – The Power of the Viewport
These units are relative to the dimensions of the browser window, also known as the viewport. The viewport is the visible area of a webpage.
VW (Viewport Width): 1 VW is 1% of the viewport’s width.
VH (Viewport Height): 1 VH is 1% of the viewport’s height.
When to use them?
◦ Full-screen sections: Want your “hero” section (the main banner at the top of your page) to always take up the full height of the screen, no matter the device? Set its minimum height to min-height: 100vh.
◦ Elements taking up part of the screen: You can set an element to take up, for example, 80% of the screen’s width (width: 80vw).
Practical Tips & Summary – Your Cheat Sheet
There’s no single perfect answer, but there are best practices that will make your work easier. Here is a recommended approach based on the sources:
Font Sizes (font-size): Use REM. This ensures accessibility and easy scaling of the entire interface.
Layout Widths (containers, columns): Use % for flexibility. You can add a max-width in PX for the main container to limit its width on very large screens.
Paddings and Margins: Mostly % or REM. Percentages are excellent for maintaining proportions, while REM ensures consistency with your typography.
Line Height (line-height): Definitely EM. It’s the easiest way to maintain perfect line spacing proportions.
Full-Height Sections: VH is made for this.
Border Thickness, Small Icons: PX works perfectly here.
Remember to always test your site on different devices and screen sizes. Mastering these units is a powerful tool for any web creator. With them, your designs will not only be beautiful but also functional and user-friendly for everyone.