CSS Units Explained

CSS provides many different units for expressing sizes, distances and proportions. The familiar px unit is only one option. Depending on the situation, CSS can use relative units such as rem, em and percentages, viewport units such as vw and vh, container query units, intrinsic units such as ch, and specialized units such as fr for CSS Grid.

Choosing the right unit has a direct effect on responsive behavior, accessibility and maintainability. A fixed pixel value may be exactly what you need for a border, while rem is often more appropriate for typography and spacing. Percentages can be useful for dimensions relative to a parent, while viewport and container units are useful when an element should respond to its available space.

What Is a CSS Unit?

A CSS unit tells the browser how to interpret a numeric value. For example, 16px means 16 CSS pixels, 2rem means two times the root element's font size, and 50% represents half of the relevant reference dimension.

.card {
  width: 320px;
  padding: 1rem;
  margin-top: 5%;
}

CSS units can be divided into two broad groups: absolute units and relative units. Relative units are especially important for responsive interfaces because their final size can depend on the root font size, parent element, viewport or container.

Absolute and Relative Units

The px Unit

The px unit represents a CSS pixel. It is one of the most commonly used CSS units and is useful when you need a predictable dimension within the CSS layout system.

.button {
  min-height: 44px;
  border-radius: 8px;
  border-width: 1px;
}

.icon {
  width: 24px;
  height: 24px;
}

A CSS pixel should not be confused with one physical pixel on a monitor. Devices with different pixel densities can map CSS pixels to different numbers of physical device pixels.

Pixels are useful for borders, small icons, precise visual details and dimensions where a fixed CSS size makes sense. They are less suitable when you want typography or spacing to scale naturally with user preferences.

When to Use px

• Borders and outlines.
• Small icons with a known visual size.
• Precise decorative dimensions.
• Small radii when a fixed radius is appropriate.
• Layout values that intentionally need a fixed CSS size.

The rem Unit

The rem unit is relative to the root element's font size. In a typical document, the root element is html. If the root font size is 16px, then 1rem corresponds to 16px.

html {
  font-size: 16px;
}

.title {
  font-size: 2rem;
}

.card {
  padding: 1.5rem;
}

.button {
  border-radius: 0.5rem;
}

The major advantage of rem is that the value has a consistent relationship with the root font size. This makes it useful for typography, spacing and component dimensions across an application.

Why rem Is Useful for Accessibility

Using rem for typography and many spacing values allows the interface to respond more naturally when the root font size changes. This can be useful for users who increase their browser's default text size.

body {
  font-size: 1rem;
}

h1 {
  font-size: 2rem;
}

p {
  margin-bottom: 1rem;
}

This does not mean every dimension should be converted to rem. Fixed pixel values remain appropriate for many small visual details. The important point is to avoid treating px as the only useful unit.

The em Unit

The em unit is relative to the font size of the relevant element or inherited context. This makes em different from rem: rem is based on the root font size, while em can depend on the current element's font size.

.card {
  font-size: 1rem;
}

.card-title {
  font-size: 1.5em;
}

.card-title strong {
  font-size: 1.1em;
}

Because em values can compound through nested elements, they can sometimes become difficult to reason about. The computed size of a nested element may depend on several levels of inherited font sizes.

em vs rem

A useful rule is to prefer rem when you want predictable sizing relative to the application-wide root scale. Use em when a component or nested element should intentionally scale relative to its own typography.

Percentage Units

The percentage unit represents a value relative to another value. The exact reference depends on the CSS property, which is one reason percentages can sometimes be surprising.

.container {
  width: 80%;
}

.child {
  width: 50%;
}

If the parent container is 1000px wide, an element with width: 80% has a used width of approximately 800px, and a child with width: 50% can then occupy approximately half of its containing block.

Percentages Are Property-Dependent

It is important not to assume that every percentage is calculated from the same dimension. Width percentages commonly relate to a containing block's width, while other properties can use different reference values.

.box {
  width: 50%;
  padding: 5%;
  margin: 5%;
}

The exact percentage behavior depends on the property and layout context. When debugging percentage-based CSS, always check the property's definition rather than assuming that the reference is the element's width or height.

Viewport Units

Viewport units are relative to the browser's viewport. They are useful when an element should respond directly to the available viewport size.

The vw Unit

The vw unit represents one percent of the viewport width. For example, 50vw represents half of the viewport width.

.hero-title {
  font-size: 5vw;
}

.hero {
  width: 90vw;
}

vw can be useful for fluid layouts and responsive typography, but using it directly for text can cause the font to become too small or too large on extreme viewport sizes.

The vh Unit

The vh unit represents one percent of the viewport height. It has historically been used for full-screen sections and vertically sized elements.

.hero {
  min-height: 100vh;
}

.spacer {
  height: 20vh;
}

On mobile devices, viewport height can be affected by browser interface elements. Modern CSS provides additional viewport units that make different viewport states explicit.

vmin and vmax

vmin is based on the smaller viewport dimension, while vmax is based on the larger one. They can be useful for elements that should scale consistently regardless of whether the device is portrait or landscape.

.square {
  width: 40vmin;
  height: 40vmin;
}

.decorative-element {
  width: 20vmax;
}

Modern Viewport Units: svh, lvh and dvh

Mobile browsers have dynamic browser interface elements that can change the amount of visible page space. Modern CSS provides small, large and dynamic viewport units to describe different viewport states.

For many mobile full-screen interfaces, 100dvh is useful when the element should follow the currently available dynamic viewport height.

.mobile-screen {
  min-height: 100dvh;
}

The correct choice depends on the desired behavior. A layout that should always fit the smallest viewport state may prefer svh, while a design intended to represent the largest possible viewport can use lvh.

Viewport Width Units: svw, lvw and dvw

The same concept exists for viewport width. CSS provides svw, lvw and dvw for small, large and dynamic viewport widths.

.layout {
  width: 100dvw;
}

In many layouts, regular width percentages are still more appropriate than viewport width units because percentages respect the containing block. Use viewport units when the design is intentionally tied to the viewport itself.

The ch Unit

The ch unit is based on the width of the zero glyph of the element's font. It is especially useful for controlling text measure, although it should not be interpreted as an exact count of characters for every font.

.article {
  max-width: 65ch;
}

Using ch for the maximum width of paragraphs can help create comfortable reading lengths. The actual number of characters that fit on a line varies because different characters have different widths.

The ex Unit

The ex unit is based on the x-height of the current font. The exact value depends on the font and rendering environment, so it is less commonly used than rem, em or ch.

.label {
  margin-bottom: 0.5ex;
}

Most application interfaces do not need ex directly, but it can be useful when a layout needs to respond to font metrics rather than the overall font size.

The fr Unit

The fr unit is specific to CSS Grid. It represents a fraction of the available space in a grid container after fixed and other relevant track sizes have been accounted for.

.layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
}

The two columns above divide the available grid space using a 1:2 ratio. The second column receives approximately twice as much of the remaining space as the first.

fr vs %

The fr unit and percentage values can both create proportional columns, but they do not behave identically. fr distributes available Grid space after other track sizing has been considered, while percentages are calculated from the relevant container dimension.

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
}

For Grid layouts where the goal is to distribute the remaining space between tracks, fr is usually the more natural tool.

Container Query Units

Container query units are relative to a query container rather than the viewport. They are particularly useful for reusable components that can appear in different parts of a layout.

.card-list {
  container-type: inline-size;
}

.card-title {
  font-size: 5cqi;
}

Container-relative units are useful when a component should adapt to its own available space rather than the entire browser viewport. This is particularly valuable in dashboards, sidebars, cards and reusable component libraries.

CSS Units for Responsive Typography

Typography is one of the areas where unit choice has a significant effect on responsive behavior. A fixed px value can be perfectly valid, but fluid typography often benefits from a combination of relative and viewport-based units.

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

The clamp() function allows a value to have a minimum, preferred and maximum size. This prevents a fluid value such as 5vw from becoming unreasonably small or large.

Why clamp() Is Useful

Responsive typography rarely needs to scale directly with the viewport without limits. clamp() provides a controlled range while still allowing a fluid middle value.

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

.description {
  font-size: clamp(1rem, 1.2vw + 0.75rem, 1.25rem);
}

This technique is often more robust than maintaining many separate media queries solely to change font sizes.

Choosing Units for Spacing

Spacing is another area where a consistent unit strategy improves maintainability. Many design systems use rem for spacing tokens because it creates a relationship between spacing and the root type scale.

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

A spacing scale can also use px or other units. The important part is consistency and choosing units that behave appropriately when the surrounding layout changes.

Units for Width and Height

There is no universal unit for width and height. The correct choice depends on what the dimension should respond to.

max-width and min-width

Responsive layouts often work better when dimensions are constrained rather than fixed. Properties such as max-width and min-width can be combined with relative units to prevent content from becoming too wide or too narrow.

.content {
  width: min(90%, 70rem);
  margin-inline: auto;
}

.sidebar {
  min-width: 16rem;
}

This approach lets the content respond to the available space while maintaining useful boundaries.

Using min(), max() and clamp()

Modern CSS mathematical functions make unit combinations much more powerful. min(), max() and clamp() can express responsive constraints directly in CSS.

.container {
  width: min(90%, 75rem);
}

.section {
  padding-block: max(2rem, 5vw);
}

.heading {
  font-size: clamp(2rem, 5vw, 4rem);
}

These functions can reduce the number of media queries required for fluid layouts because the relationship between minimum, preferred and maximum values is expressed directly in the property.

Nested Relative Units

Relative units can be nested. This is especially important with em because an element's font size can affect the meaning of em values used by descendants.

.parent {
  font-size: 1.25em;
}

.child {
  font-size: 1.2em;
}

.grandchild {
  font-size: 1.1em;
}

When several nested levels use em, the resulting size can compound. This can be useful when intentional component scaling is desired, but it can also make a stylesheet difficult to maintain.

rem vs em in Component Libraries

Component libraries often benefit from using rem for global design tokens and em for local relationships. For example, a button can use rem for its general dimensions while an icon or label can use em when it should scale with the button's text size.

.button {
  font-size: 1rem;
  padding: 0.625rem 1rem;
}

.button-icon {
  width: 1em;
  height: 1em;
}

The icon scales with the button's font size, while the button's main spacing remains tied to the root scale.

Common CSS Unit Mistakes

Using px for Everything

Using pixels everywhere can make a design less adaptable. Fixed values are useful, but typography, spacing and responsive dimensions often benefit from relative units.

Using vw Directly for All Typography

A value such as 5vw changes continuously with the viewport and can become too small on narrow screens or excessively large on wide screens. clamp() is usually safer for fluid typography.

Confusing em and rem

The two units look similar but have different references. em can depend on the current element and inherited context, while rem is based on the root font size.

Assuming % Always Means Parent Width

Percentage behavior depends on the property. Width, height, padding, margin and other properties do not necessarily use the same reference dimension.

Using vh for Every Full-Screen Mobile Layout

Traditional vh can interact poorly with mobile browser interface changes. Consider svh, lvh or dvh when the distinction between viewport states matters.

Using Viewport Units Inside Reusable Components

A component inside a narrow sidebar may need to respond to its container rather than the browser viewport. Container query units can be a better fit for reusable components.

Using Too Many Different Units

CSS supports many units, but a stylesheet does not become better simply because it uses more of them. A small, consistent unit strategy is easier to understand and maintain.

A Practical Unit Strategy

A reasonable starting point for many modern web projects is to use rem for typography and global spacing, px for small fixed visual details, percentages for dimensions relative to a containing block, viewport units for viewport-driven effects, and fr for flexible Grid tracks.

A Consistent Design Token System

Design tokens make unit decisions explicit. Instead of scattering arbitrary values throughout the stylesheet, define a small set of typography, spacing and layout values.

:root {
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 2rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --radius-sm: 4px;
  --radius-md: 8px;
}

This gives the project a predictable sizing vocabulary. Components can consume the tokens without needing to know why a particular unit was chosen.

CSS Units and Responsive Design

Responsive design is not simply about replacing px with percentages. A robust layout usually combines several units and constraints. For example, a content container can use a percentage for its fluid width and a rem-based max-width to prevent excessive line lengths.

.content {
  width: min(92%, 72rem);
  margin-inline: auto;
}

.article {
  max-width: 65ch;
  margin-inline: auto;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 4.5rem);
}

This combination lets the layout adapt to the viewport without allowing every dimension to grow indefinitely.

Testing Unit-Based Layouts

A CSS unit strategy should be tested at different viewport sizes and with different content. A layout that looks correct at one desktop width may fail when text becomes longer, the browser font size changes or the component is placed inside a smaller container.

• Test narrow and wide viewports.
• Increase the browser's text size when checking accessibility.
• Test long headings and translated content.
• Check components inside different container widths.
• Test mobile browser viewport behavior.
• Inspect computed values in browser developer tools.
• Check for horizontal overflow.
• Verify that Grid and Flex layouts still have enough available space.

Which CSS Unit Should You Choose?

The table is a starting point rather than a strict rule. The correct unit depends on what should control the dimension. Ask what the value should respond to: the root font size, the element's font size, the parent, the viewport, the container or the remaining Grid space.

Frequently Asked Questions

Helpful CSS Unit Tools

A CSS unit converter is useful when you need to translate values between different units during development. Dedicated px-to-rem and rem-to-em converters are particularly convenient when migrating an existing stylesheet or creating a design-token scale.

Viewport conversion tools can also help when reasoning about vw and vh values at a particular screen size. They are useful for checking calculations, although responsive CSS should generally be tested across multiple viewport sizes rather than designed around one fixed device.

Conclusion

CSS units are not interchangeable. Each unit expresses a different relationship: px provides a predictable CSS dimension, rem relates values to the root font size, em relates them to local typography, percentages depend on the relevant property and containing context, viewport units respond to the browser viewport, and container units respond to component space.

For many projects, a practical default is to use rem for typography and global spacing, px for small fixed details, percentages for parent-relative dimensions, fr for flexible Grid tracks, ch for text measure and viewport or container units when the design specifically needs those relationships.

The goal is not to avoid pixels or use relative units everywhere. The goal is to make each value respond to the thing that should actually control it. Once that relationship is clear, choosing the right CSS unit becomes much easier and responsive layouts become more predictable.