32px → REM
32px to REM - 2rem at 16px Base
At the default browser root size of 16px, 32px equals
2rem. Formula: rem = px ÷ 16.
Last reviewed:
CSS snippet
.example {
font-size: 2rem; /* 32px at 16px root */
padding: 2rem;
} PX to REM formula
rem = px ÷ root font size
32px ÷ 16px = 2rem Worked example: To convert 32px at a 16px root,
divide 32 by 16.
32 ÷ 16 = 2. Write font-size: 2rem;
instead of font-size: 32px; so text scales when users enlarge their browser default font size.
Common use cases at 32px (2rem)
| Category | Tailwind / design use | CSS property example |
|---|---|---|
| Font size | text-3xl (1.875rem–2rem range) | font-size: 2rem; |
| Spacing | p-8, gap-8 | padding: 2rem; |
| Gap / margin | p-8, gap-8 | gap: 2rem; |
Nearby pixel conversions
Also see 30px to rem
and 36px to rem
.
32px to REM FAQ
How do you convert 32px to rem?
Divide 32 by the root font size. At the default 16px base: 32 ÷ 16 = 2rem. Formula: rem = px ÷ root font size. Paste font-size: 2rem; into your CSS so typography scales when users change their browser default font size.
What is 32px in rem at 16px base?
At a 16px root font size, 32px equals exactly 2rem. This is the browser default unless your project or the user changes html { font-size }. If your root differs, scale with rem = 32 ÷ yourRootPx before shipping production styles.
Should I use 2rem or 32px in CSS?
Use 2rem for typography and spacing that should scale with the user's root font-size preference - important for accessibility. Reserve 32px for fixed values like 1px borders or bitmap image dimensions. Prefer rem for layout rhythm so zoom and OS font settings do not clip text.
How do I convert 2rem back to pixels?
Multiply 2rem by 16: 2 × 16 = 32px. Reverse formula: px = rem × root font size. Use that when a design tool exports rem tokens and you need pixel sizes for image assets, canvas drawing, or developer handoff docs.
Where is 32px commonly used in web design?
32px (2rem) maps to text-3xl (1.875rem–2rem range) in typical design systems. For Tailwind spacing, see p-8, gap-8. Check the use-case table on this page for CSS property examples covering font-size, padding, and gap so you can pick a consistent token across components and breakpoints.
Full converter
PX to REM Converter - any value, custom base
Cheat sheet
PX to REM cheat sheet - 12px through 64px