px to rem Converter
Convert pixels to rem, em, points, and percentages in real time. Adjust your root base size or copy CSS clamp & Tailwind values with a single click.
Pixels to REM Calculator
Type any value below. Every unit updates instantly based on your configured root base (default 16px).
Tailwind CSS Font Size Reference Scale
Tailwind CSS uses a 16px default root scale. Click any badge or row to copy the CSS property or Tailwind class:
| Class | REM | Pixels | Line Height | Quick Copy |
|---|---|---|---|---|
text-xs | 0.75 rem | 12 px | 1rem (16px) | |
text-sm | 0.875 rem | 14 px | 1.25rem (20px) | |
text-base | 1 rem | 16 px | 1.5rem (24px) | |
text-lg | 1.125 rem | 18 px | 1.75rem (28px) | |
text-xl | 1.25 rem | 20 px | 1.75rem (28px) | |
text-2xl | 1.5 rem | 24 px | 2rem (32px) | |
text-3xl | 1.875 rem | 30 px | 2.25rem (36px) | |
text-4xl | 2.25 rem | 36 px | 2.5rem (40px) | |
text-5xl | 3 rem | 48 px | 1 | |
text-6xl | 3.75 rem | 60 px | 1 |
How to Convert Pixels to rem (Formula & Examples)
rem stands for root em. One rem equals the computed font size of the root <html> element. In 99.9% of browsers, this default is 16px.
Step-by-step example:
- To convert a 32px headline on a standard 16px base:
32 ÷ 16 = 2rem. - To convert an 18px paragraph:
18 ÷ 16 = 1.125rem. - If using the 62.5% CSS trick (where 1rem = 10px):
32 ÷ 10 = 3.2rem.
Why REM is Essential for Modern Web Design & Accessibility (WCAG):
- Accessibility (A11y): When low-vision users increase their browser default font size to 20px or 24px,
rem-based layouts scale harmoniously without truncating text or breaking user preferences. - No Compounding Bugs: Unlike
em, which multiplies inside nested elements (e.g.ul > li > ul > li),remremains anchored strictly to the root. - Fluid Responsive Scaling: Changing one CSS variable or media query on the root element effortlessly scales your entire application UI.
Frequently Asked Questions (FAQ)
How do I convert px to rem?
To convert pixels to rem, divide the pixel value by your root font size (browser default is 16px). Formula: rem = px ÷ root_font_size. For example, 32px ÷ 16 = 2rem. 24px ÷ 16 = 1.5rem.
How many pixels is 1rem?
With standard browser defaults (html font-size: 100% or 16px), 1rem = 16px. If you change the root font size in CSS (e.g., html { font-size: 62.5%; }), then 1rem = 10px.
Why should developers use rem instead of px?
Using rem enables WCAG accessibility compliance because rem font sizes scale dynamically when users adjust their operating system or browser font size preferences. Pixels (px) are fixed absolute units that often break user zoom settings.
What is the difference between rem and em?
rem (root em) is always relative to the root <html> element and never compounds in nested tags. em is relative to its direct parent element's font size and multiplies with each level of nesting.
What are Tailwind CSS font sizes in rem and px?
Tailwind CSS uses a standard 16px root scale: text-xs (12px / 0.75rem), text-sm (14px / 0.875rem), text-base (16px / 1rem), text-lg (18px / 1.125rem), text-xl (20px / 1.25rem), text-2xl (24px / 1.5rem), text-3xl (30px / 1.875rem), text-4xl (36px / 2.25rem).