What is the default root font size?

The default is 16px, which is the browser default. You can change it to match your project's root font size for accurate rem/em conversions.

How do vh and vw units work?

1vh equals 1% of the viewport height, and 1vw equals 1% of the viewport width. Set your viewport dimensions in the tool to see accurate pixel equivalents.

When should I use rem vs em?

Use rem for consistent sizing relative to the root element. Use em when you want sizing relative to the parent element's font size, such as padding that scales with text size.

What is 1rem in pixels?

With the default browser font size, 1rem = 16px. If your project sets html { font-size: 62.5% }, then 1rem = 10px. The conversion formula is: pixels = rem × root font size.

Why should I use rem instead of px?

REM units scale when users change their browser's default font size for accessibility. PX stays fixed regardless of user preferences. Using rem ensures your layout respects accessibility settings and scales proportionally on all devices.

How do I convert px to rem?

Divide the pixel value by the root font size (default 16px). For example: 24px ÷ 16 = 1.5rem. Enter your pixel value here and the tool calculates it instantly for any base font size you configure.

PX to REM Converter — CSS Unit Calculator

How to Use the CSS Unit Converter

Enter a value, select the source unit (px, rem, em, vh, or vw), and see all equivalent values instantly. Adjust the root font size if your project uses a custom base (the browser default is 16px). Set custom viewport dimensions for accurate vh/vw conversions. The visual preview shows the actual rendered size in pixels. Pick your colors with the color converter to complement your sizing.

What Are CSS Units?

CSS offers multiple unit types for sizing elements. Pixels (px) are absolute units tied to device pixels. remis relative to the root element's font size — ideal for consistent, accessible sizing. emis relative to the parent element's font size, useful for components that scale with their context. Viewport units (vh and vw) represent percentages of the viewport height and width, perfect for full-screen layouts and responsive design.

Common Use Cases

Convert a designer's pixel values to rem for accessible styling. Calculate how many pixels 1rem equals in a project with a custom root font size. Determine vw values for fluid typography. Quickly reference em equivalents when building scalable component libraries. Create responsive gradients with the CSS Gradient Generator. The visual preview helps verify that your converted values produce the expected size on screen. For physical unit conversions, see the unit converter.

CSS Unit Converter

How to Use the CSS Unit Converter

What Are CSS Units?

Common Use Cases

Frequently Asked Questions

Related Tools

Color Converter

Unit Converter

Number Base Converter

JSON Formatter & Validator