In the dynamic world of web design, creating responsive and accessible layouts is paramount. CSS units are the fundamental tools that dictate how elements are sized and positioned on your web pages. Understanding the nuances between these units is crucial for any developer aiming for pixel-perfect designs that adapt flawlessly across various devices and user preferences.

When working with design tools like Elementor, you'll often encounter options to specify sizes using different units like px, em, rem, %, vw, and vh. More recently, with the advent of CSS Grid, the fr unit has also entered the scene. But what do these seemingly cryptic abbreviations mean, and when should you use one over another?

The Foundational Distinction: Absolute vs. Relative Units

The most important distinction among CSS units is whether they are absolute or relative. This core concept will guide your decisions in crafting adaptable web experiences.

Absolute Units

PX (Pixels): Pixels are considered an absolute unit. While they are technically "relative" to the DPI (dots per inch) and resolution of the viewing device, on that device itself, a px unit is fixed. It does not change based on any other element or user setting.

When to use PX: px units are useful for maintaining consistent sizing for elements that absolutely should not resize, regardless of the screen size or user preferences. However, their fixed nature can be problematic for truly responsive designs and accessibility.

Example: If you want a very specific border thickness that should always be 1 pixel, no matter what:

CSS

.my-border {
    border-width: 1px;
}

Relative Units

Relative units, unlike px, scale up or down based on another element's size, the viewport size, or the user's default settings. This characteristic makes them far better suited for responsive design and crucial for meeting accessibility standards. If a user adjusts their default browser font size, elements sized with relative units will adjust accordingly, ensuring a readable experience.

Let's look at the common relative units:

• EM: Relative to the parent element's font size.

• REM: Relative to the root element's (HTML tag's) font size.

• % (Percentage): Relative to the parent element's size (can apply to widths, heights, margins, padding, and font sizes).

• VW (Viewport Width): Relative to the viewport's width.

• VH (Viewport Height): Relative to the viewport's height.

• FR (Fraction): A unit specific to CSS Grid, representing a fraction of the available space.

Proportional Scaling: em, rem, and % in Action

Most browsers have a default font size of 16px. Relative units like em, rem, and % calculate their size from this base. If you set a base font size for the html tag via CSS, that then becomes the foundation for calculating relative units throughout the rest of the page. Crucially, if a user adjusts their default browser font size, that new size becomes the base for these relative calculations.

Here's how they scale with a default 16px base:

• 1em = 16px (1 * 16)
  
  

• 2em = 32px (2 * 16)
  
  

• .5em = 8px (.5 * 16)
  
  

• 1rem = 16px
  
  

• 2rem = 32px
  
  

• .5rem = 8px
  
  

• 100% = 16px
  
  

• 200% = 32px
  
  

• 50% = 8px
  
  

What happens if the base size changes? If you or the user changed the default to 14px, the calculated sizes would become:

• 1em = 14px (1 * 14)
  
  

• 2em = 28px (2 * 14)
  
  

• .5em = 7px (.5 * 14)
  
  

• 1rem = 14px
  
  

• 2rem = 28px
  
  

• .5rem = 7px
  
  

• 100% = 14px
  
  

• 200% = 28px
  
  

• 50% = 7px
  
  

This flexibility is a huge win for user experience, allowing users to customize their Browse experience while maintaining the intended visual hierarchy and scale of your design.

Understanding Inheritance: The Nuance Between em and rem

While em and rem might look identical in the above chart, their fundamental difference lies in inheritance.

REM (Root EM): As mentioned, rem is always based on the root element (html)'s font size. Every child element that uses rem will calculate its size from this single, unchanging base, regardless of whether its direct parent has a different font size specified. This makes rem very predictable and helps avoid unexpected scaling issues in deeply nested elements.

Example:

HTML

<html style="font-size: 16px;">
  <div style="font-size: 20px;">
    <p style="font-size: 1.5rem;">This text will be 24px (1.5 * 16px from HTML)</p>
  </div>
</html>

EM: em, on the other hand, is based on the font size of its parent element. If a parent element has a font size different from the root, the em calculation will be based on that parent's size. This can lead to "compounding" effects in nested elements, where each em declaration can scale the size further. While this offers fine-grained control for specific areas, it can also lead to unanticipated sizes if not managed carefully.

Example:

HTML

<html style="font-size: 16px;">
  <div style="font-size: 20px;">
    <p style="font-size: 1.5em;">This text will be 30px (1.5 * 20px from parent div)</p>
  </div>
</html>

Dynamic Dimensions: Leveraging %, vw, and vh

While px, em, and rem are commonly used for typography, %, vw, and vh are primarily employed for dimensions like margins, padding, spacing, and element widths/heights.

• % (Percentage): Reflects a percentage of the parent element's size, irrespective of the viewport's size.
  
  Example (Elementor Context):

Column Widths: Elementor columns often use % exclusively because column widths need to be responsive and relative to their container.
CSS

.elementor-column {
    width: 33.33%; /* Takes up one-third of its parent section/container */
}

Margins/Padding: Using % for margins and padding is generally preferable over px to ensure these spaces scale proportionally with the content and screen size, preventing them from becoming disproportionately large or small on different devices.
CSS

.my-section {
    margin-left: 5%; /* 5% of its parent's width */
    padding-top: 2%; /* 2% of its parent's height */
}

• VW (Viewport Width): Represents a percentage of the viewport's width (the current browser window's width). 100vw would be the full width of the screen.
  
  

• VH (Viewport Height): Represents a percentage of the viewport's height (the current browser window's height). 100vh would be the full height of the screen.

VW and VH in Action: Consider a mobile screen with a viewport of 480px width and 800px height:

• 1vw = 1% of 480px = 4.8px

• 50vw = 50% of 480px = 240px

• 1vh = 1% of 800px = 8px

• 50vh = 50% of 800px = 400px

As the viewport size changes (e.g., resizing the browser window or rotating a device), elements sized with vw or vh will change their dimensions proportionally. This is fantastic for creating elements that truly scale with the screen.

Example: A large heading that automatically scales with the screen width:

CSS

h1 {
    font-size: 8vw; /* Font size will be 8% of the viewport width */
}
A full-height section:
CSS
.hero-section {
    min-height: 100vh; /* Ensures the section takes at least the full viewport height */
}

Grid Layouts Transformed: Introducing the fr Unit

With the widespread adoption of CSS Grid, a new unit of measurement, fr (fraction), was introduced. Fractions represent a proportion of the available space within a grid container.

How FR Works: If you have a grid container and define columns using fr units, the available space is divided into those fractions.

• A setting of 2fr for a column means that column will take up 50% of the available space if there's only one column defined as 2fr.

• If you have two columns, one 1fr and another 2fr, the total "fractions" are 3fr. The 1fr column gets 1/3 of the space, and the 2fr column gets 2/3 of the space.

Example:

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Creates three columns */
  gap: 10px;
}
.grid-item {
  background-color: lightblue;
  padding: 20px;
  border: 1px solid blue;
}

In this example, the middle column (2fr) will be twice as wide as the first and third columns (1fr).

Rows and FR: When using fr for rows, if you add more content to a grid than there are defined cells, new rows will be created automatically. These new rows will typically have a minimal height, ensuring they don't unexpectedly affect the height of the fr-measured rows above them.

Strategic Unit Selection: A Practical Guide

Ultimately, there isn't a single "perfect" answer. The best choice often depends on the specific element and your design goals for responsiveness and accessibility.

• PX: Use when you need absolute, fixed sizing that should never change. Good for very precise border widths or small, non-scaling icons. Be cautious as it can hinder responsiveness and accessibility.

• EM: Choose if you want an element's size to scale proportionally to its direct parent's font size. This is great for maintaining relative sizing within specific components or sections. Be aware of potential compounding issues in deeply nested elements.

• REM: Prefer this if you want an element's size to scale proportionally to the root HTML font size, regardless of parent elements. This offers consistent scaling across your entire site and is generally recommended for typography in responsive designs to avoid em compounding.

• VW / VH: Excellent for creating elements that scale directly with the browser viewport's width or height. Ideal for full-width headers, hero sections, or text that should always occupy a certain percentage of the screen space.

• %: Use when you want a dimension (like width, height, margin, or padding) to be a percentage of the parent element's size. Very common for responsive column layouts, fluid margins, and padding.

• FR: Essential for flexible and dynamic column/row sizing within CSS Grid layouts, allowing you to distribute available space proportionally.

Elementor, and modern CSS in general, makes it easy to choose the unit best suited for your design. By understanding these units, you gain precise control over your layouts, ensuring your web pages look beautiful and perform optimally across all devices and user preferences.

Ready to Build Faster?

Understanding CSS units is crucial, but imagine if your design tool could automatically generate perfect, responsive code with these units already optimized. Stop wasting time manually converting designs into code and focus on the exciting parts of development.

Level up your web development workflow with Superflex.ai — turn your Figma designs into production-ready code in seconds!