50px → REM
50px to REM — 3.125rem at 16px Base
At the default browser root size of 16px, 50px equals
3.125rem. Formula: rem = px ÷ 16.
Last reviewed:
CSS snippet
.example {
font-size: 3.125rem; /* 50px at 16px root */
padding: 3.125rem;
}PX to REM formula
rem = px ÷ root font size
50px ÷ 16px = 3.125rem Worked example: To convert 50px at a 16px root, divide 50 by 16.
50 ÷ 16 = 3.125. Write font-size: 3.125rem;
instead of font-size: 50px; so
text scales when users enlarge their browser default font size.
Common use cases at 50px (3.125rem)
| Category | Tailwind / design use | CSS property example |
|---|---|---|
| Font size | Display / hero text | font-size: 3.125rem; |
| Spacing | — | padding: 3.125rem; |
| Gap / margin | — | gap: 3.125rem; |
Nearby pixel conversions
Also see 48px to rem
.
50px to REM FAQ
How do you convert 50px to rem?
Divide 50 by the root font size. At the default 16px base: 50 ÷ 16 = 3.125rem. Formula: rem = px ÷ root font size.
What is 50px in rem at 16px base?
At a 16px root font size, 50px equals exactly 3.125rem. This is the browser default unless your project or the user changes html { font-size }.
Should I use 3.125rem or 50px in CSS?
Use 3.125rem for typography and spacing that should scale with the user's root font-size preference — important for accessibility. Reserve 50px for fixed values like 1px borders or bitmap image dimensions.
How do I convert 3.125rem back to pixels?
Multiply 3.125rem by 16: 3.125 × 16 = 50px. Reverse formula: px = rem × root font size.
Where is 50px commonly used in web design?
50px (3.125rem) maps to Display / hero text in typical design systems. For Tailwind spacing, see —. Check the use-case table on this page for CSS property examples.
Full converter
PX to REM Converter — any value, custom base
Cheat sheet
PX to REM cheat sheet — 12px through 64px