Convert layout measurements bidirectionally and map styling classes.
Why Convert PX to REM?
Pixel (PX) is an absolute sizing unit, meaning it represents a fixed physical dot on a screen. REM (Root EM) is a relative sizing unit whose value is calculated relative to the HTML document's root font-size. By default, most modern web browsers define the base font-size as 16px.
Converting pixel dimensions to REM units is an industry-standard best practice for building accessible, responsive web designs. If a user increases their browser's default font size (e.g. for accessibility or visual impairment), REM-based typography, margins, and padding scale proportionally, preventing content overlaps and broken layouts.
How to Use the PX to REM Converter
- 1
Define the Root Base Size
Set the base font-size (default is 16px). This value represents what 1rem evaluates to in pixels.
- 2
Enter Absolute Pixels
Type in any pixel dimension (e.g., 24px) to instantly see its relative REM equivalent (e.g., 1.5rem).
- 3
Convert REMs Back to Pixels
Type in a REM value to calculate its corresponding pixel size based on the set base value.
- 4
Use Tailwind Sizing Mapping
Reference the interactive conversion chart to quickly copy Tailwind utility class names (like w-4, p-8) into your code.
Related Tools
More helpful utilities under the Utility Calculators category.
Calculate image or screen dimensions and ratios.
Compute Body Mass Index and health status indicator.
Convert colors between HEX, RGB, HSL, and CMYK formats.
Forecast investment returns over time with compound interest.
Calculate monthly installments for personal or home loans.
Calculate inclusive and exclusive goods and services tax.
Perfect vertical rhythm line-height helper.
Convert annual salary to hourly, weekly, or monthly equivalent.
Calculate returns on systematic investment plans.
Count words, characters, sentences, paragraphs, and reading time.