How to use the pixel to REM converter
Enter a numeric value in the input field and select whether you're converting from pixels to rem or from rem to pixels. The converter instantly shows the equivalent in all four units: px, rem, em, and pt. Click any result card to copy that specific value to your clipboard, ready to paste into your CSS, Sass, or Tailwind configuration.
Adjust the base font size slider if your project uses a non-standard root font size. The default browser base is 16px, but some projects set the root to 10px (using html { font-size: 62.5%; }) for easier mental math (1rem = 10px). The reference table below the converter automatically updates to show conversions for 18 common pixel values at your chosen base size.
The visual size preview bar gives you a spatial reference for how large the converted value is in pixels. This is particularly helpful when working with unfamiliar rem values—seeing that 2.5rem equals 40px as a visual bar is more intuitive than reading the number alone. The formula section shows the exact math being applied so you can verify calculations independently.
Why relative units matter for accessibility
WCAG 2.1 Success Criterion 1.4.4 requires that text can be resized up to 200% without assistive technology and without loss of content or functionality. When you use rem units for font sizes, spacing, and layout dimensions, your entire interface scales proportionally when users adjust their browser's default font size. This is the most reliable way to support users with low vision who need larger text.
Many users increase their browser's base font size from 16px to 20px, 24px, or even larger. If your font sizes are set in pixels, this preference is completely ignored. With rem, a heading set to 2rem automatically grows from 32px to 40px or 48px, maintaining the visual hierarchy and proportional spacing that your design depends on. This isn't just good practice—it's a legal requirement in many jurisdictions under accessibility laws.
The 62.5% trick (html { font-size: 62.5%; }) sets the root to 10px, making 1rem = 10px for easier math. However, this approach has a drawback: any third-party component or library that assumes the default 16px base will render too small. A better approach is to use the default 16px base and let your tooling (like this converter or PostCSS plugins) handle the px-to-rem conversion during development. This keeps the default accessible while giving you the convenience of working in familiar pixel values.
Best practices for CSS units in modern projects
For font sizes, use rem exclusively. This ensures all text scales with user preferences. For spacing (margin, padding), rem is also preferred because it keeps proportional relationships between text and whitespace. For borders and box shadows, pixels are appropriate since these decorative elements don't need to scale with font size. For media queries, em is technically more reliable than px because it responds to user font size changes.
In Tailwind CSS, all default spacing and font size values are already in rem. When you use classes like text-lg (1.125rem) or p-4 (1rem), you're automatically getting accessible, scalable values. If you need custom values, Tailwind's arbitrary value syntax (e.g., text-[1.375rem]) lets you specify rem directly. This is one reason Tailwind projects tend to be more accessible by default than hand-written CSS using pixel values.
When working with design tools like Figma, designs are typically specified in pixels. This converter bridges that gap: take the pixel value from your design spec, convert it to rem, and use the rem value in your code. Over time, you'll memorize common conversions (14px = 0.875rem, 18px = 1.125rem, 24px = 1.5rem) and the process becomes second nature. The reference table on this page serves as a quick lookup for the most frequently used sizes.
Frequently Asked Questions
What is the difference between px and rem?
Pixels (px) are absolute units that represent a fixed size on screen. REM (root em) is a relative unit based on the root element's font size (usually the <html> tag, which defaults to 16px in most browsers). Using rem allows your layout to scale proportionally when users change their browser font size, improving accessibility.
Why should I use rem instead of px?
REM units respect user font size preferences set in browser settings. If a user sets their browser to 20px base font size for readability, rem-based layouts scale appropriately while px-based layouts remain fixed. This is a key accessibility requirement—WCAG 2.1 Success Criterion 1.4.4 requires text to be resizable up to 200% without loss of content. REM makes this automatic.
What is the default base font size?
The default base font size in all major browsers is 16px. This means 1rem = 16px by default. You can change this with CSS (html { font-size: 62.5%; } makes 1rem = 10px for easier math), but the most common practice is to keep the default 16px and use rem values like 0.875rem (14px), 1rem (16px), 1.25rem (20px), etc.
What's the difference between rem and em?
REM is always relative to the root element's font size, making it predictable. EM is relative to the parent element's font size, which means it compounds: if a parent has font-size: 1.2em and a child also has 1.2em, the child is actually 1.44x the root size. REM avoids this compounding issue. Use rem for consistent sizing and em when you specifically want proportional sizing relative to a parent.
When should I still use pixels?
Pixels are appropriate for values that should not scale with font size: borders (1px solid), box shadows, very small decorative elements, and media query breakpoints. Some developers also use px for horizontal spacing and layout dimensions while using rem for font sizes and vertical spacing. The key principle is: if it relates to text readability, use rem; if it's structural decoration, px is fine.
What is the pt (point) unit?
Points are a unit from print typography where 1pt = 1/72 inch. In CSS, 1pt = 1.333px (or equivalently, 1px = 0.75pt). Points are rarely used in web design but are included here for cross-reference with print design specs, email templates, and legacy systems that specify sizes in points.
Privacy and methodology
This tool runs entirely in your browser. Conversion uses simple arithmetic: rem = px / base, px = rem × base, pt = px × 0.75. The base font size defaults to 16px (standard browser default) and can be adjusted to match your project's root font size. No data is sent to any server. Results are computed and displayed instantly with no external dependencies.