CSS Unit Converter: Instantly Convert PX, EM, REM, PT, and More

This CSS Unit Converter helps you seamlessly translate any CSS length value from one unit to another, such as px to rem, em to %, or vw to px. Simply enter a value, select your units, and set your base font size to get the precise conversion you need for your responsive web design projects.

Instantly convert between absolute and relative CSS units.

Value to Convert

Contextual Settings

Base Font Size (for rem)

Parent Font Size (for em)

Viewport Width (for vw)

Viewport Height (for vh)

Conversion Results

Other Calculators

How to Use Our CSS Unit Converter

Our calculator is designed to be flexible and straightforward. To get an accurate conversion, you’ll need to provide the following information:

Value to Convert: The numerical value of the length you want to convert. For example, if you want to convert 16px, you would enter 16.
From Unit: The unit of the value you are starting with. This dropdown includes all common CSS units like px, em, rem, %, pt, vw, and more.
To Unit: The unit you want to convert your value into.
Base Font Size (px): This is a crucial setting for converting between absolute units (like px) and relative units (like rem or em). Most web browsers use a default base font size of 16px, but you can change this value if your project uses a different root font size.

Understanding Your Results: A Guide to CSS Units

The number our calculator provides is more than just a conversion; it represents a value within a specific CSS measurement system. Understanding the difference between these systems is key to building modern, responsive, and accessible websites. CSS units are broadly divided into two categories: Absolute and Relative.

Absolute Units

Absolute units are fixed and do not change based on any other element or screen size. A length of 1cm will be 1cm regardless of the device. They are most useful when the exact size of the output medium is known, like for a print stylesheet.

Unit	Name	Description	Primary Use Case
`px`	Pixel	The most common absolute unit for screens. 1px is one dot on a digital display.	Borders, box-shadows, or any element that requires a fixed, precise size that should not scale.
`pt`	Point	A standard typography unit. `1pt = 1/72` of an inch.	Primarily used in print stylesheets for `font-size`.
`in`	Inch	A standard inch. `1in = 96px = 72pt`.	Print stylesheets; rarely used for screen design.
`cm`	Centimeter	A standard centimeter.	Print stylesheets; rarely used for screen design.
`mm`	Millimeter	A standard millimeter.	Print stylesheets; rarely used for screen design.

While px is an absolute unit, its physical size can vary slightly depending on a screen’s pixel density (PPI). However, in the context of CSS, it’s considered a fixed reference unit.

Relative Units

Relative units are flexible. Their actual size is calculated based on another value, such as the parent element’s font size, the root font size, or the size of the viewport (the browser window). These are the foundation of modern responsive and accessible design.

Unit	Name	Relative To	Primary Use Case
`rem`	Root EM	The `font-size` of the root element (`<html>`). (Default is `16px`).	The modern standard for `font-size`, `margin`, `padding`, and most layout components for scalability and accessibility.
`em`	EM	The `font-size` of the parent element.	Sizing elements that should scale relative to their immediate container’s text size, like icon padding.
`%`	Percentage	The size of the parent element (e.g., `width`, `height`, or `font-size`).	Creating fluid layouts, like setting a column’s `width` to `50%` of its container.
`vw`	Viewport Width	1% of the viewport’s width.	Creating full-width elements or typography that scales with the browser window width.
`vh`	Viewport Height	1% of the viewport’s height.	Creating elements that fill the entire screen height, like a hero banner.

Comparison: `px` vs `em` vs `rem`

Choosing between px, em, and rem is one of the most common decisions in CSS. Here’s a quick comparison to help you decide.

Feature	`px` (Pixels)	`em`	`rem` (Root EM)
Reference	Fixed to the screen’s pixels.	`font-size` of the direct parent element.	`font-size` of the root (`<html>`) element.
Behavior	Static and predictable.	Can cause compounding issues if nested (e.g., `1.2em` inside `1.2em`).	Consistent and predictable throughout the entire document.
Use For	`border-width`, `box-shadow`, pixel-perfect elements.	Elements that must scale with their immediate parent.	`font-size`, `padding`, `margin`, `width`—most scalable elements.
Accessibility	Poor. Does not scale with user’s browser font settings.	Good. Scales with parent font size.	Excellent. Scales with the user’s root font settings, respecting their preferences.

Frequently Asked Questions

What is the real difference between `em` and `rem`?

The key difference is the reference point for the calculation.

rem (Root EM): Is relative to the font-size of the root element (the <html> tag). This makes it predictable. If the root font size is 16px, then 2rem will always be 32px everywhere on your page. This consistency is why it’s the preferred unit for most scalable sizing.
em: Is relative to the font-size of its direct parent element. This can lead to compounding.

Concrete Example:

Imagine the root font-size is 16px.

HTML

<style>
  html { font-size: 16px; }
  div { font-size: 1.25em; } /* 1.25 * parent font-size */
  p { font-size: 1.5rem; }  /* 1.5 * root font-size (16px) */
</style>

<div> This div's font-size is 1.25 * 16px = 20px.

  <div> This nested div's font-size is 1.25 * 20px = 25px. (Compounding!)
  </div>

  <p> This paragraph's font-size is 1.5 * 16px = 24px. (Consistent!)
  </p>
</div>

As you can see, the em unit’s size changed based on its nesting level, while the rem unit’s size remained consistent because it only references the root.

Why is `16px` the default base font size?

16px is the long-standing default font-size in almost every major web browser. This standard was established early in the web’s history as a comfortable and legible size for reading on typical desktop monitors of the time. While designers can change this, it’s the baseline that rem units are calculated from unless you specify otherwise. It is also the size that accessibility features in browsers use as a starting point when a user requests larger or smaller text.

Should I still use pixels (`px`) in modern web design?

Yes, absolutely. Pixels are not “bad,” they are just a tool for a specific job. While rem is better for scalable layouts and text, px is perfect for elements you want to remain fixed and not scale.

Use px for:

border-width: 1px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
Sometimes fixed-width icons or elements where scaling would break the design.

What is the best CSS unit for font size for accessibility?

rem is the best unit for accessible font sizes. This is because it directly respects the user’s default font size settings in their browser. If a user with low vision sets their browser’s default font size to “Large” or 20px, all rem-based typography on your site will scale up proportionally from that new base. px-based fonts will ignore this user preference, creating a usability barrier.

How do viewport units (`vw`, `vh`) work?

Viewport units are relative to the size of the browser window (the “viewport”).

1vw = 1% of the viewport’s width.
1vh = 1% of the viewport’s height.

If your browser window is 1200px wide, 10vw would be 120px. If you resize the window to 800px wide, that same 10vw element will now be 80px. This makes them incredibly powerful for creating elements that scale fluidly with the browser window, such as a full-screen hero image (height: 100vh;) or responsive font sizes that get bigger on larger screens.

What is the relationship between points (`pt`) and pixels (`px`)?

In CSS, there is a fixed relationship: 1in = 72pt = 96px. Points are a unit from the print world. Because of the fixed relationship in CSS, you can convert between them, but pt is almost exclusively used for stylesheets intended for printing documents, not for screen display.

How do I change the root font size to affect all `rem` units?

You can easily change the base font size for your entire site by setting the font-size on the <html> element in your CSS.

CSS

html {
  /* This changes the base for all 'rem' calculations from 16px to 18px. */
  font-size: 18px;
}

h1 {
  /* This will now be 2 * 18px = 36px */
  font-size: 2rem;
}

A popular modern technique is to set the root font size to a percentage to better respect user preferences:

CSS

html {
  font-size: 100%; /* This equals the user's default, usually 16px */
}

Can I mix different units in a `calc()` function?

Yes, and it’s a very powerful feature of CSS. The calc() function allows you to perform calculations with different units. This is extremely useful for creating complex layouts that mix fixed and fluid units.

Concrete Example: Create a full-width element with fixed 20px padding on each side.

CSS

.container {
  /* Take 100% of the parent's width, then subtract 40px for padding */
  width: calc(100% - 40px);
  padding: 0 20px;
}

What are `ch` and `ex` units?

These are less common but interesting typographic units.

ch: Represents the width of the “0” (zero) character in the element’s current font. It is useful for setting the width of containers to a specific character count, which is great for readability (e.g., max-width: 60ch; for a blog post).
ex: Represents the x-height of the element’s current font (the height of a lowercase “x”). It’s useful for fine-tuning the alignment of typographic elements.

What happens if I use `%` for font-size?

Using a percentage for font-size works almost exactly like the em unit. A font-size of 125% is equivalent to a font-size of 1.25em. It is relative to the parent element’s font size and will also compound if nested. Because of this, rem is generally preferred over both % and em for setting font sizes to avoid complexity.

Related Developer Tools

Now that you’ve mastered CSS units, these other tools can help streamline your web development workflow:

For managing your project’s color palette, use our Hex to RGB Color Converter.
To create complex, modern layouts with ease, try our CSS Flexbox Generator.
When you need a pixel-perfect background, check out our CSS Gradient Generator.

Creator

Nhi Nguyen

A versatile quality assurance professional with a proven track record testing embedded, mobile, and web applications across defense, aerospace, telecom, pharmaceuticals and medical devices. She brings deep knowledge of QA methodologies, SDLC processes, and web technologies, along with strong project planning and cross‑functional leadership skills.

Home /

Unit Converter /