Skip to main content

    PX to REM Converter

    Convert pixels to REM and EM units. Set a custom base font-size for accurate conversions.

    Free to use. Runs in your browser.

    Enter a pixel value to see the equivalent in rem, em, and percentage. Based on the default browser root font size of 16px, which you can customise.

    8px0.500rem
    10px0.625rem
    12px0.750rem
    14px0.875rem
    16px1.000rem
    18px1.125rem
    20px1.250rem
    24px1.500rem
    28px1.750rem
    32px2.000rem
    36px2.250rem
    48px3.000rem

    PX vs REM: Why It Matters

    Pixels (px) are fixed. 16px is always 16px regardless of the user's preferences. REM units are relative, 1rem equals whatever the root font size is (usually 16px by default). The difference seems small until you consider accessibility: millions of users increase their browser's default font size because they have difficulty reading small text.

    When you set font sizes, margins, and padding in rem, your entire layout scales gracefully when users change their browser settings. Set them in px, and increasing the font size can break layouts because the text grows but the containers don't. That's why modern CSS frameworks like Tailwind use rem-based spacing by default.

    This converter translates between px and rem using any base font size. The default is 16px (the browser standard), but if your project uses a different root font size, adjust the base to get accurate conversions.

    CSS Unit Comparison

    UnitRelative ToScales WithBest For
    pxNothing (absolute)NothingBorders, shadows, fine details
    remRoot font size (html)Browser settingsFont sizes, spacing, layout
    emParent font sizeParent elementComponent-level scaling
    %Parent dimensionParent sizeFluid widths and heights
    vw/vhViewport width/heightWindow sizeFull-screen layouts, hero sections
    chWidth of "0" characterFont choiceLimiting text width (max-width: 65ch)

    What this means for you: Use rem for most things (font sizes, padding, margins, gaps). Use px for things that shouldn't scale (1px borders, box shadows). Use vw/vh for viewport-relative layouts. Use ch for readable line lengths.

    Common PX to REM Conversions

    PixelsREM (base 16px)Tailwind ClassTypical Use
    4px0.25remp-1, gap-1Tight spacing, icon padding
    8px0.5remp-2, gap-2Small gaps, compact UI
    12px0.75remtext-xsCaption text, labels
    14px0.875remtext-smSecondary text, sidebar
    16px1remtext-baseBody text (browser default)
    20px1.25remtext-xlSubheadings
    24px1.5remtext-2xl, p-6Section headings, card padding
    32px2remtext-3xl, p-8Page headings, large spacing
    48px3remtext-5xlHero headings

    The 62.5% Trick

    Some developers set html { font-size: 62.5%; } to make 1rem = 10px (instead of 16px). This makes mental maths easier: 1.4rem = 14px, 2.4rem = 24px. But there are trade-offs:

    Pros

    • Easy mental conversion: 1.6rem = 16px
    • No calculator needed for common sizes

    Cons

    • Third-party components assume 16px base
    • Must reset body font-size to 1.6rem

    Related Tools

    CSS Gradient Generator

    Create CSS gradients visually

    CSS Box Shadow Generator

    Design shadows visually

    CSS Border Radius Generator

    Create rounded corners

    Colour Converter

    Convert between colour formats

    Aspect Ratio Calculator

    Calculate responsive dimensions

    Screen Size Checker

    Check viewport dimensions

    How to use this tool

    1

    Enter a pixel value in the input field

    2

    Adjust the base font size if your project doesn't use the 16px default

    3

    See instant REM, EM, and percentage conversions

    Common uses

    • Converting pixel values to REM for accessible CSS
    • Building responsive layouts with relative units
    • Translating design specs (usually in px) to CSS rem values
    • Quick reference for Tailwind CSS spacing values

    Share this tool

    Frequently Asked Questions

    What is a REM unit?
    REM stands for 'root em'. 1rem equals the font-size of the root <html> element, which is 16px in all browsers by default. So 1.5rem = 24px, 0.5rem = 8px. REM units scale when users change their browser font size, making your layout accessible.
    Why use REM over PX?
    Millions of users increase their browser's default font size for readability. PX values ignore this preference, 16px stays 16px no matter what. REM values scale proportionally, so your entire layout adapts. It's the single biggest accessibility win in CSS.
    What is the difference between EM and REM?
    REM is always relative to the root <html> font size, predictable and consistent. EM is relative to the parent element's font size, which means nested elements compound. A 1.2em inside a 1.2em parent is actually 1.44em of the root. REM avoids this compounding problem.
    What's the default root font size?
    16px in every modern browser. You can change it with html { font-size: 18px } or html { font-size: 62.5% } (makes 1rem = 10px for easier mental math). Most Tailwind projects keep the 16px default.
    When should I use PX instead of REM?
    Use px for things that shouldn't scale with font size: 1px borders, box shadows, outline widths, and very small decorative details. If the element is content-related (text, spacing, layout), use rem. If it's decorative, px is fine.
    Does Tailwind use REM?
    Yes. Almost all Tailwind spacing and font size utilities use rem under the hood. p-4 is 1rem (16px), text-lg is 1.125rem (18px). Tailwind's design system is accessibility-friendly by default because of this. Only specific utilities like border widths use px.
    What happens if I change the root font size?
    Everything sized in rem scales proportionally. If you set html { font-size: 20px }, then 1rem becomes 20px, 0.5rem becomes 10px, and your entire layout grows by 25%. This is exactly the behaviour you want for accessibility.
    How do I convert my entire CSS from PX to REM?
    Divide every px value by your base font size (usually 16). So 24px becomes 24/16 = 1.5rem. For Tailwind projects, just use the utility classes, they're already in rem. For custom CSS, do the conversion during development, not at build time.
    What about viewport units (vw, vh)?
    Viewport units are relative to the browser window size, not font size. 1vw = 1% of viewport width. They're great for hero sections and full-screen layouts, but they don't respond to font size preferences. Use rem for text and spacing, vw/vh for layout dimensions.
    What is the 62.5% trick?
    Setting html { font-size: 62.5% } makes 1rem = 10px (62.5% of 16px). Then conversions are easy: 1.4rem = 14px, 2rem = 20px. The downside: it changes the base for everything, including third-party components. Most teams prefer the default 16px and memorise common conversions.
    Do all browsers support REM?
    Yes. REM has been supported since IE9 (2011). Every modern browser supports it. There's no reason to avoid rem in any current project. The only exception is email HTML, where support is inconsistent.
    What about the ch unit?
    ch equals the width of the '0' character in the current font. It's perfect for setting max-width on text containers: max-width: 65ch gives you optimal reading width regardless of font size. It's a complement to rem, not a replacement.

    Results are for general informational purposes only and should be checked before use. They are not professional advice. See our Disclaimer and Terms of Service.