PX to REM Converter

Features

• Two-way conversion between px, rem and em
• Set any root font size, not just the default 16px
• Convert rem or em back to pixels
• A reference table of common pixel values
• Runs entirely in your browser, nothing is uploaded

How to use it

1. Set your root font size, usually 16px unless you have changed it.
2. Type a pixel value to see it in rem and em.
3. Or type a rem value to convert it back to pixels.
4. Use the table for the values you reach for most often.

px, rem and em, and why the unit matters

A pixel is a fixed, absolute unit: 24px is always 24px regardless of anything else on the page. rem and em are relative units. One rem equals the root font size of the document, which is the font size set on the html element and defaults to 16px in every browser. One em equals the font size of the current element, so it depends on its context rather than the root. This is why 1.5rem is 24px when the root is 16px, but becomes 30px if a user or a stylesheet sets the root to 20px.

Relative units matter most for accessibility. When someone increases their browser's default font size, everything sized in rem scales up with it, so your layout grows to remain readable. Anything hard-coded in pixels ignores that preference and stays put, which can leave text uncomfortably small for the people who most need it larger. Sizing typography and spacing in rem is the simplest way to respect the reader's own settings, which is why it is now the common recommendation.

em is the right choice when you want a value to scale with its own element rather than the page root, for example padding inside a button that should grow with the button's text. The catch is that em compounds through nested elements, so an em inside an em inside an em can drift in ways that are hard to predict. A practical rule many designers follow is rem for global sizing where you want predictability, and em for local sizing that should track a specific element's font size.