CSS px to rem Converter

CSS px to rem Converter

Local Processing

Convert CSS pixel units (px) to relative root em units (rem) based on root font size.

How It Works & Processing Standards

Enter values above to calculate results automatically. Check each input field for guidance and units.

Example: Measurement Value = 32, Conversion Direction = pxToRem, Root Font Size (px) = 16 → 2

Tool processing runs in your browser. If you create a calculator or conversion share link, its values are included in the URL. See the privacy policy for account, analytics and advertising data.

rem is a multiple of the root (html) font size. At the default 16 px, 24 px = 1.5 rem. Change the root size if yours differs.

How to Use CSS px to rem Converter

  1. 1
    Enter a valueThe px or rem value to convert.
  2. 2
    Direction and root sizePick px → rem or rem → px and set the html font size (default 16).
  3. 3
    CopyPaste straight into your CSS.

Examples

24 px in rem
Input: 24 px, root 16 px
Result: 1.5
1.5 rem in px
Input: 1.5 rem, root 16 px
Result: 24

Common Use Cases

  • Moving px values from a mockup into rem-based CSS
  • Layouts that scale when users enlarge text
  • Tidying spacing units in a design system

Frequently Asked Questions (FAQ)

How is em different from rem?

rem is always relative to the html font size; em is relative to the parent element.

My html font size is 62.5%.

Enter 10 as the root size (16 × 62.5% = 10 px).

Have feedback or ideas for this tool? Suggest & Inquire →