px
= 1rem
Pixels (px)
↔
Root em (rem)
Common Values Reference
What This Tool Does
Converts between px and rem instantly. Set your root font size (default 16px — the browser default), type a value in either field, and the other updates automatically. The reference table shows common sizes at your chosen base.
Frequently Asked Questions
What is rem in CSS?
rem (root em) is a relative CSS unit that is always relative to the root element font size (the <html> element). Unlike em — which is relative to its parent — rem is consistent throughout the document. The default browser root font size is 16px, so 1rem = 16px by default.
Why use rem instead of px?
rem respects the user's browser font size preference. If a user increases their browser's default font size for accessibility, rem-based layouts scale proportionally, while px-based layouts do not. rem is also easier to reason about than em since it always relates to the root, not a varying parent.
What should I set as my base font size?
Use 16 (the browser default) unless your site explicitly sets a different root font size in CSS (html { font-size: X; }). If your site uses html { font-size: 62.5%; } — a common trick — set the base to 10, which makes 1rem = 10px for easy mental math.