Px to Rem
Convert pixel values to rem and em for scalable CSS typography.
① Enter a pixel value ② Set the base font size (default 16px) ③ Copy rem or em
Why use rem instead of px?
rem (root em) units scale with the user's browser font size preference, making your typography more accessible and responsive. 1rem = 16px in most browsers by default, but users can change this via font-size in the browser settings. Using rem instead of px ensures your text scales proportionally when users adjust their browser settings.
Frequently asked questions
rem (root em) is a relative CSS unit based on the font size of the root element (<html>). By default in most browsers, 1rem = 16px. Unlike px, rem units scale when users change their browser's base font size, making them essential for accessible and responsive typography.
rem is always relative to the root element font size. em is relative to the parent element's font size, creating cascading scaling that can be hard to manage. rem is generally preferred for font sizes and spacing because it is predictable. em is useful for component-level scaling where you want sizes to relate to the component's own font size.
The default browser font size is 16px, making 1rem = 16px. Designers sometimes set html { font-size: 62.5%; } so 1rem = 10px for easier mental math, but this can harm accessibility. Instead, keep the default and use the calculator. The base font size can be changed with html { font-size: Xpx; }.
Divide the px value by your base font size. With base 16px: 24px ÷ 16 = 1.5rem. With base 10px: 24px ÷ 10 = 2.4rem. The mental shortcut for base 16: multiply by 0.0625 (or divide by 16). This calculator also provides a full reference table.
Yes. Using rem for font sizes respects the user's browser font preferences. Many users with low vision increase their browser base font size (via Settings > Appearance). If your CSS uses px, these preferences are ignored. rem-based typography scales with user settings, meeting WCAG 1.4.4 (Resize Text) requirements.
Use px for borders (1px border), box-shadows, and decorative elements where pixel-perfect rendering is required. Also use px for media query breakpoints, since rem in media queries can be problematic in some browsers. For spacing (margin, padding) and font sizes, prefer rem.
rem = px ÷ base font size. Example: 24px ÷ 16px = 1.5rem. Reverse: px = rem × base font size. 1.5rem × 16px = 24px. For em, the formula is identical but relative to the parent element instead of the root.