Advertisement
CSS Tools

PX to EM/REM Converter

Convert between px, em, and rem CSS units with configurable base font size. Includes conversion table and CSS output.

px

Default browser font size is 16px. Adjust if your project uses a different root font size.

Convert

px
em
rem
CSS
font-size: 1rem; /* 16px at 16px base */

Conversion Table (base: 16px)

PixelsEMREMPreview
8px0.5em0.5remAa
10px0.625em0.625remAa
12px0.75em0.75remAa
14px0.875em0.875remAa
16px1em1remAa
18px1.125em1.125remAa
20px1.25em1.25remAa
24px1.5em1.5remAa
28px1.75em1.75remAa
32px2em2remAa
36px2.25em2.25remAa
40px2.5em2.5remAa
48px3em3remAa
56px3.5em3.5remAa
64px4em4remAa
72px4.5em4.5remAa
80px5em5remAa
96px6em6remAa
Advertisement

Related Tools

Aspect RatioNEW

Calculate aspect ratios for images and videos. Enter width or height with a ratio (16:9, 4:3, 1:1) to find the other dimension.

CSS Beautifier

Format and beautify messy CSS code. Minify or expand with proper indentation.

CSS MinifyNEW

Minify CSS code to reduce file size. Remove comments, whitespace, and optimize.

Box Shadow

Create CSS box shadows visually. Adjust blur, spread, offset, and color.

Advertisement

Frequently Asked Questions

What is the difference between em and rem?
Both em and rem are relative CSS units, but they reference different elements. rem (root em) is always relative to the root element (html) font size. em is relative to the font size of its parent element. This means em values can compound when nested (a 2em inside a 2em parent becomes 4x the base size), while rem always stays relative to the root, making it more predictable for consistent sizing.
What is the default browser font size?
The default font size in virtually all modern browsers is 16px. This means 1rem = 16px unless you explicitly change the html element's font-size. Our converter defaults to 16px as the base, but you can change it to match your project's root font size.
Why should I use rem instead of px?
Using rem allows your design to scale with the user's preferred font size settings. If a user increases their browser's default font size for accessibility, rem-based layouts will scale proportionally. Pixel values are fixed and do not respect user preferences. This is why WCAG accessibility guidelines recommend relative units for text sizing.
When should I use em vs rem?
Use rem for most sizing (font-size, padding, margins, widths) to maintain consistency relative to the root. Use em when you want an element to scale relative to its own font-size, such as padding on a button that should grow proportionally when the button text is larger. Em is also useful for media queries in some browsers.
How do I set the base font size in CSS?
Set the base font size on the html element: html { font-size: 16px; }. A popular technique is html { font-size: 62.5%; } which sets the base to 10px (62.5% of 16px), making rem calculations easier: 1.6rem = 16px, 2rem = 20px. However, this approach can cause issues with third-party components.
Does this converter work for all CSS properties?
Yes, em and rem units can be used with any CSS property that accepts length values: font-size, padding, margin, width, height, border-radius, gap, and more. The conversion math is always the same: pixels divided by the base font size gives the rem/em value.

How to Convert Between PX, EM, and REM

Converting between CSS units is a daily task for web developers building responsive, accessible websites. Our converter lets you instantly translate between pixels, em, and rem units with a configurable base font size, complete with a handy reference table.

Step 1: Set your base font size. The default is 16px (the browser default). If your project uses a different root font size, change this value to get accurate conversions. All calculations are based on this base value.

Step 2: Enter a value in any unit. Type a number in the px, em, or rem field. The other two fields update instantly with the converted values. The conversion is bidirectional: enter pixels to get em/rem, or enter em/rem to get pixels.

Step 3: Use the reference table. The conversion table shows common pixel values and their em/rem equivalents at your chosen base size. This is perfect for quick lookups when writing CSS without needing to calculate each time.

Understanding CSS Relative Units

CSS provides several relative units for responsive design. Pixels (px) are absolute units tied to device pixels. Em units are relative to the computed font-size of the element (or parent for font-size itself). Rem units are always relative to the root element font-size, making them predictable and consistent across the document.

The shift from pixel-based to relative-unit-based design is driven by accessibility requirements and responsive design needs. Users who set larger default font sizes in their browsers (for vision accessibility) benefit from rem-based designs that scale proportionally. WCAG 2.1 Success Criterion 1.4.4 requires text to be resizable up to 200% without loss of content or functionality, which is naturally supported by rem-based layouts.

CSS Unit Best Practices

Use rem for global sizing. Font sizes, margins, padding, and widths that should maintain consistent proportions across the page work best with rem. This ensures everything scales uniformly when the user changes their preferred font size.

Use em for component-relative sizing. When button padding should scale with the button text size, or when an icon should match its adjacent text, em units create proportional relationships within a component. Increasing the component font-size automatically scales all em-based dimensions.

Use px for borders and shadows. Fine details like 1px borders, box shadows, and outlines often look best at fixed pixel sizes. A 1px border remains crisp at any scale, while 0.0625rem might render inconsistently across browsers and zoom levels.

Advertisement