How and when to use PX, REM, EM, %, VH, VW

When we build or customize websites with WordPress, we often have to define element sizes, spacing and proportions. These decisions are based on the CSS units of measure, namely PX, REM, EM, %, VH and VW, plus Media Queries that allow different styles at different screen widths.

Below, we’ll take a look at each unit in depth – when and how it’s best used, where it can get in your way, and what trivia lies behind it. We’ll also add some practical tips for Media Queries to help you achieve more control over the responsive design of your WordPress site.

PX (Pixels)

What is the PX?

PX (pixel) is one of the most familiar and commonly used units in web design. From a CSS perspective, 1px is considered a “reference” pixel and is not always equal to one physical pixel on the screen. For example, in high pixel density devices (such as Retina displays), a single CSS pixel may correspond to multiple hardware pixels. However, for practical website design, PX is considered a stable, “absolute” unit.

When and why to use PX?

1. Precise control: if you want an element (icon, button, container) to have an accurate and consistent size on any device, pixels are a good choice.
2. Details: Suitable for icons, borders (border-radius), shadows (box-shadow), or any decorative elements where precision is important.
3. Fixed design: column widths, maximum image sizes, fixed tab heights.

A curious fact

The word “pixel” comes from the abbreviation of “picture element”. In the context of CSS, however, a pixel is an “abstraction”, meaning that it does not necessarily correspond to the actual size of the dots on the screen. Because of this, your site will look similar even on devices with different resolutions, as long as you set sizes in PX consistently.

Sample code

.header {
  width: 1200px;
  margin: 0 auto;
}
.icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

In this case the .header will always be 1200px and the icon will remain 24x24px on all screens.

% (Percentage)

What is %?

The percentage (%) is a relative unit that calculates the size of an element relative to its parent. For example, width: 50%; means that the element will be half the width of the container it is in.

When and why to use %?

1. Responsive: The element automatically scales down or up along with its parent, which helps make responsive design easier.
2. Padding and Margin: When using % for inside and outside spacing, these values will “move” proportionally as the parent changes size.
3. Fluid Layouts: Percentages are an ideal choice when you want columns or blocks that dynamically stack and resize to different screen widths.

A curious fact

One of the first fluid designs on the web was based almost entirely on percentage widths. This allowed content to be “squeezed” and “stretched” according to available space, without a horizontal scrollbar.

Sample code

.container {
  width: 80%;
  margin: 0 auto;
  background-color: #f5f5f5;
}
.inner-section {
  padding: 5%;
}

Here the .container takes up 80% of the parent’s space (or the body itself if no other container is available), and the .inner-section has padding proportional to its own width.

VH and VW (Viewport Height and Viewport Width)

What are VH and VW?

• VH (Viewport Height): 1vh is equal to 1% of the visible height of the window (browser viewport).
• VW (Viewport Width): 1vw is equal to 1% of the visible width of the window.

When and why to use them?

1. Full screen layout: if you want a tab to occupy the full height of the screen, set height: 100vh;. Often used for “hero” sections or home banners.
2. Animations and dynamic layouts: when you resize the window, VH and VW automatically adjust, which can be fun for interactive designs.
3. Caution: some mobile browsers (especially iOS Safari) have a specific behavior when displaying/hiding the address bar that can change the value of vh.

A curious fact

Due to the different behavior of mobile browsers, “100vh” sometimes does not correspond to 100% of the actual visible screen. This is the reason why many web designers use JS hacks or a combination with CSS calc() for more precise control.

Sample code

.full-screen-section {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  color: #fff;
}

Here the section occupies the entire visible area, both in height and width.

REM (Root EM)

What is REM?

REM is a relative unit that is based on the font size of the root element (usually HTML). By default, most browsers have font-size: 16px for HTML.

When and why to use REM?

1. Perfect for fonts: with accessibility-oriented design, REM allows the user to change the base font size from their browser settings, and the site adapts automatically.
2. Less math headaches: 2rem = 32px (if the base is 16px), 1.25rem = 20px, etc. Easy to calculate.
3. Flexibility: if the user prefers a larger font (e.g. 18px instead of 16px), all elements set in REM will be automatically and proportionally enlarged.

A curious fact

REM was introduced to solve the font size inheritance problem in EM. So instead of being considered against the parent each time, REM always “looks” at the document root (HTML), giving greater predictability.

Sample code

html {
  font-size: 16px;
}
h1 {
  font-size: 2rem; /* 32px при базов размер 16px */
}
p {
  font-size: 1rem; /* 16px при базов размер 16px */
}

If the user sets their browser to a higher DPI, these values will automatically scale up (or down).

EM (Relative to parent)

What is EM?

EM is a relative unit that is based on the font size of the parent element (not the root, like REM). For example, if the parent has font-size: 20px, then 1em = 20px.

When and why to use EM?

1. Line-height: With line-height: 1.5em; you automatically get 150% of the current font size. If the font changes to a larger or smaller font, the line-height is adjusted proportionally.
2. Padding of buttons: If the button has font-size: 1.2rem, and you set padding: 0.5em 1em;, the spacing will increase and decrease with the text in the button.
3. Nested Items: It can get confusing if you have many nested containers, each with a different font-size. Then calculating the final value of em becomes more difficult.

A curious fact

Historically, em comes from typography, where 1 em was roughly equal to the width of the letter “M” in a given font. To this day, it retains the idea of “ratio to font”, although it is no longer literally associated with a specific letter.

Sample code

.button {
  font-size: 1rem; /* 16px */
  padding: 0.5em 1em; 
}
.text-block {
  font-size: 1.125rem; /* 18px */
  line-height: 1.5em;  /* 27px */
}

Instead of thinking in pixels, you can set a value that multiplies against the current font.

Media Queries

What are Media Queries?

Media Queries are a mechanism in CSS that allows you to apply different styles depending on the characteristics of the device or browser window (width, height, resolution, orientation, etc.). They are most commonly used to create responsive designs.

How and why to use them?

1. Adaptive design: you can rearrange or change the style of elements when the window is below or above a certain width.
2. Mobile optimization: It’s common to see Media Query enabled at max-width: 768px, for example, to style the design for a tablet or phone.
3. Joint use with units: PXs are often used to set breakpoints:

@media (max-width: 768px) {
  .container {
    width: 100%;
    margin: 0;
  }
}

But you can also use em or rem, for example:

@media (max-width: 48em) {
  /* 48 * 16px = 768px при базов размер 16px */
}

A curious fact

Using em or rem in Media Queries allows your design to respond not only to window size, but also to user font preferences. If the user has increased the base font, the breakpoints will adapt accordingly, which can improve accessibility.

How to apply all this in WordPress

1. Child Theme: When you want to change the styles of your main WordPress theme, it is always recommended to use a child theme to avoid losing changes when updating the main theme.
2. Additional CSS: In Appearance > Customize > Additional CSS, you can add new code using all the units and Media Queries you’ve looked at without risking modifying the theme’s system files.
3. CSS plugins: plugins like CSS Hero or Yellow Pencil offer visual editors that let you select (px, %, em, rem, etc.) without writing CSS manually. They also make it easy to apply Media Queries for a more customized approach.
4. Work with Page Builders (Elementor, Divi, Avada, etc.):
   • In Elementor you can specify dimensions (px, %, em, rem, vh and vw) directly in the UI controls of the widgets. You can also add custom CSS in the Advanced settings section of an individual element.
   • Divi has built-in customizability settings where you can change styles (including units of measure) for different breakpoints.
   • Avada and other popular page builders also offer an interface for selecting the unit of measure. This way you don’t have to write CSS manually, but if you want more control, you can always add custom code and use Media Queries for more specific adjustments.
5. Gutenberg (Block Editor): In newer versions of WordPress you can add CSS classes to each block and then style them in Additional CSS or in your child theme files. This way you have full control over each element.
6. Plugins for Responsive Design: there are also specific plugins for responsive design that make it easier to implement Media Queries, including templates for different breakpoints.

The choice of method depends on your personal preference and skill level in writing code. If you want visual control – use Page Builders. If you prefer to manage every detail – add CSS manually in child theme files or in Additional CSS.

Using calc() and typographic scales

The CSS function calc() allows you to combine different units of measure and set calculations directly in declarations. For example, if you want to mix a fixed value (px) with an adaptive value (% or vw), you can use:

.example {
  font-size: calc(1rem + 2vw);
}

This will make the text slightly larger on wider screens, but keep a minimum base of 1rem. This provides more precise control over layouts as you can find a ‘happy medium’ between different approaches.

When talking about typographic scales, Major Third (1.25), Minor Third (1.20), Perfect Fourth (1.333) and other values are often used to build a harmonious hierarchy between headings, subheadings and paragraphs. With calc() you can experiment with different multipliers. For example:

h1 {
  font-size: calc(1rem * 1.333); /* Perfect Fourth (около 21.3px при 16px база) */
}
h2 {
  font-size: calc(1rem * 1.25);  /* Major Third (20px при 16px база) */
}
h3 {
  font-size: calc(1rem * 1.2);   /* Minor Third (19.2px при 16px база) */
}

This approach allows you to create a more precise, balanced and consistent typographic layout that visually supports the page content and makes it easier to read.

Using font-size: clamp() for responsive font design

The function clamp() in CSS allows you to set a minimum, preferred (including dynamic) and maximum value of a parameter (most often a font). With its help, you can define “boundaries” in which an element resizes smoothly when the window width changes.

.responsive-text {
  font-size: clamp(1rem, 4vw, 2rem);
}

• Minimum value (1rem): the font will not be smaller than 1rem, even on very narrow screens.
• Preferred value (4vw): Intermediate growth is based on window width (4% of viewport width).
• Maximum value (2rem): the font will not exceed 2rem, which prevents excessive bloat on large screens.

Thus clamp() balances between accessibility (readability) and flexible design without the need to write separate Media Queries for each breakpoint. This technique is becoming increasingly popular for creating smooth, customizable typographic layouts, especially when combining different units of measure (px, rem, vw, etc.) and you want to retain control over the final result on different devices.

In conclusion

Choosing the right CSS unit (PX, REM, EM, %, VH, VW) and the appropriate Media Queries is key to the optimal look, readability and responsiveness of your WordPress site. Here is a brief summary:

• PX: Ideal for static items where you want a 100% identical look.
• %: Excellent for fluid layouts and dynamic sizes that depend on the parent container.
• VH/VW: Based on window height and width; ideal for fullscreen sections and creative designs.
• REM: Great for fonts and accessibility; always based on size in root (usually 16px).
• EM: Powerful at line-height and buttons, but can be “tricky” in deep nested elements.
• Media Queries: allow you to adapt the design to different widths and devices, ensuring convenience for users on any screen.

When you combine them wisely, you’ll achieve a professional, responsive, and affordable WordPress design. Experiment boldly and remember that true power comes from understanding the logic behind each unit and Media Query – that’s how you’ll deliver a seamless user experience on every device.