glunty px to rem converter (px, rem, em)
Type px, rem, or em at any base font size. The other fields update live. Local only.
- Runs in your browser
- No sign-up
- No watermark
- No installs
| Pixels | rem |
|---|
What this tool does
Converts between the three CSS font-size units web developers reach for most: pixels
(px), rem, and em. It is live and two-way, so setting the base font size or typing a
value in any field updates the others instantly, with no button to press. The core
math is simple: px = rem * base and rem = px / base, where
the base (root) font size defaults to 16 px. For this tool, em is computed against the
same base as rem, which matches the common case where an element inherits directly from
the root. Everything runs in your browser with plain JavaScript; nothing you type leaves
your machine. Verify it yourself: open DevTools, open the Network tab, and watch it stay
empty. Zero requests.
How to use it
Set your base or root font size at the top (16 px is the browser default and the value
most projects keep). Then type into whichever field you already have. To convert px to
rem, type a pixel value and read the rem field. To go the other way with the rem to px
converter, type a rem value and read the pixels field. The em field mirrors rem at this
base. The reference table lists the rem equivalents of common pixel sizes at your current
base, so at the default base 16 px is 1 rem,
24 px is 1.5 rem, and 14 px is
0.875 rem. Change the base and every field and table row updates. Press
Clear to empty the fields.
Common use cases
- Converting a design handed to you in pixels into rem for a scalable, accessible stylesheet.
- Reading an existing rem value back as pixels to check it against a mockup.
- Picking media-query breakpoints in rem so they respect the reader's font-size preference.
- Setting spacing, line-height, and font-size in units that grow when a reader zooms text.
- Double-checking a component library's rem scale against a 16 px base.
Common pitfalls
- em is relative to the parent, not the root. This tool computes em against the base you set, which is correct when an element inherits directly from the root. In a real stylesheet, em resolves against the parent element's font-size, so nested ems compound. Use rem when you want a value tied to the root and immune to nesting.
- The base is the root font-size, not a fixed 16. Readers can change
their browser default, and frameworks sometimes set
html { font-size }to something other than 16 px. rem is relative to whatever that root value is, so hard-coding 16 in your head can mislead you. Set the base here to match your project. - rem is for scaling, px is for pinning. Sizes set in px do not grow when a reader increases their base font size; rem does. Prefer rem for text and layout that should respect user preferences, and reserve px for things that must stay a fixed number of device pixels, like a 1 px border.
- Rounding is for display only. Output is rounded to a few decimals
with trailing zeros trimmed, so a value like
0.875shows cleanly rather than as a long floating-point tail. For most CSS that is exactly what you want, but do not treat the shown digits as unlimited precision.
Frequently asked questions
- How do I convert px to rem?
- Divide the pixel value by the base (root) font size. With the usual 16 px base, rem = px / 16, so 16 px is 1 rem, 24 px is 1.5 rem, and 14 px is 0.875 rem. In this tool you type the pixel value into the pixels field and read the rem field; if your project uses a different root size, set the base first and the math follows.
- How do I convert rem to px?
- Multiply the rem value by the base font size: px = rem * base. At a 16 px base, 1 rem is 16 px and 1.5 rem is 24 px. Type a rem value into the rem field and this rem to px converter fills in the pixels field live. Change the base and the pixel result updates to match your root font size.
- What base or root font size should I use?
- Use 16 px unless your stylesheet says otherwise. Browsers default the root font size to 16 px, and most projects keep it, which is why this tool defaults to 16. If you set html { font-size } to another value, or you want to reason about a reader who changed their browser default, enter that number as the base and every conversion adjusts.
- What is the difference between rem and em?
- Both are relative units, but they resolve against different things. rem is always relative to the root (html) font size, so it does not change with nesting. em is relative to the font size of the current element, which in practice means its parent, so nested ems multiply together. This tool treats em as relative to the base for a quick single-level conversion, and notes the parent rule in the guide below.
- Why use rem instead of px for font sizes?
- rem scales with the user base font size, so text sized in rem grows when a reader increases their browser default or zooms, which is better for accessibility. Pixels are fixed and ignore that preference. A common pattern is to size text and spacing in rem and reserve px for hairline borders and other details that must stay an exact number of pixels.
- Does changing the base font size change the results?
- Yes. Every conversion depends on the base, so editing the base font size recomputes the rem and em values and refreshes the reference table immediately. For example, 20 px is 2 rem at a 10 px base but 1.25 rem at a 16 px base. The tool keeps whichever value you last typed and recomputes the others when the base changes.
- Does this px to rem converter send my values anywhere?
- No. Every calculation runs in your browser with plain JavaScript arithmetic. Nothing you type is uploaded, logged, or sent to a server. You can confirm it: open DevTools, watch the Network tab, and it stays empty while you use the tool. Zero requests.
Cite this tool
For academic, journalistic, or technical references. Pick a format:
Citations use 2026 as the publication year. Access date is left as a fillable placeholder where the citation style expects one.