Base Font Size (px)
Input Value
CSS Output
PX to REM Converter
Pixel values are fixed, but modern CSS increasingly relies on REM for typography, spacing, and layout tokens. Converting px to rem by hand means dividing by your root font-size every time. That gets tedious and error-prone fast across a large stylesheet. Design handoffs from Figma almost always arrive in pixels, leaving developers to translate every value before it ships.
This converter handles both directions instantly, with no page reload and no manual formula required. Enter a pixel value to get its rem equivalent, or convert rem to px in one click. You can also set a custom base font-size instead of relying on the default 16px. Every calculation runs client-side in your browser, so no value you enter is ever sent to a server.
Quick Reference: PX and REM Values (16px Base)
Pixels (px) | REM (16px base) |
|---|---|
| 1px | 0.0625rem |
| 2px | 0.125rem |
| 3px | 0.1875rem |
| 4px | 0.25rem |
| 5px | 0.3125rem |
| 6px | 0.375rem |
| 7px | 0.4375rem |
| 8px | 0.5rem |
| 9px | 0.5625rem |
| 10px | 0.625rem |
Understanding PX and REM
In web development, Pixels (px) are fixed-size units, meaning they do not scale with the user's font size settings. REM (Root EM) is a relative unit, where 1 REM is equal to the font size of the root HTML element (usually the html tag). This makes REM units ideal for creating responsive designs that adapt to user preferences and different screen sizes.
Converting between REM and Pixels is a common task for front-end developers to ensure consistency and responsiveness across their projects. The same multiply-or-divide logic applies to other everyday conversions, like the Weight Converter for recipes or shipping calculations.
Why Use REM Over Pixels for Responsive Design?
- Accessibility: REM units respect the user's browser font size settings, allowing users with visual impairments to scale text up or down as needed.
- Responsiveness: By setting a base font size on the html element, you can easily scale all REM-based measurements across your entire website by changing a single value.
- Maintainability: Easier to manage typography and spacing across large projects.
How PX to REM Conversion Works
Converting a pixel value to rem uses one formula: divide by your base font-size in pixels. The reverse direction, rem to px, multiplies the rem value by that same base font-size. Most browsers default to a 16px base font-size unless a page overrides it.
This tool's Base Font Size field lets you override the 16px default before converting. Change it to match your project's root font-size, and every result recalculates instantly. If you need the pixel equivalent of a REM-based line-height instead, try the Line Height Calculator.
PX to REM Worked Examples
These five examples cover the conversions you will hit most often, from a clean 1:1 match to the 62.5% base font-size trick. Each row shows the formula, the result, and what to do with it.
Setting html {'{'} font-size: 62.5%; {'}'} shrinks the root font-size from the browser default of 16px down to 10px. Because 62.5% of 16px equals 10px, every 1rem then equals 10px instead of an awkward fraction, matching the 24px to 2.4rem example above.
Type | Input | Base Font-Size | Calculation | Result | What It Means |
|---|---|---|---|---|---|
| Simple case | 16px | 16px | 16 ÷ 16 | 1rem | A perfect 1:1 match at the default base — no mental math needed. |
| Complex/decimal case | 14px | 16px | 14 ÷ 16 | 0.875rem | Use this for slightly smaller text, like secondary labels or captions. |
| Edge case | 1px | 16px | 1 ÷ 16 | 0.0625rem | Common for hairline borders, where a fraction of a pixel still renders sharply. |
| Real-world (62.5% technique) | 24px | 10px* | 24 ÷ 10 | 2.4rem | With the 62.5% technique active, 2.4rem maps cleanly to a 24px heading. |
| Reverse walkthrough | 1.5rem | 16px | 1.5 × 16 | 24px | Confirms a 1.5rem heading renders at exactly 24px on a standard 16px base. |
Using Your PX to REM Output in CSS
Design specs from Figma or Sketch almost always list font sizes in pixels, but production CSS should ship in rem. Take the pixel value from your design file, convert it with the tool above, then paste the rem value into your stylesheet.
Tailwind CSS's spacing, typography, and sizing utilities are rem-based by default, assuming the standard 16px root font-size. If your project sets a different root font-size, Tailwind's classes scale relative to that value everywhere except inside media query breakpoints.
/* Figma spec: font-size: 24px; */
font-size: 1.5rem;Security & Privacy
This converter operates entirely client-side within your browser. Your input values are never sent to a server, so every calculation stays private while you work.
Handling Errors and Edge Cases
This converter handles a few inputs differently than a simple positive number. Understanding these edge cases helps you trust the result instead of second-guessing it.
If you regularly convert between other technical units with their own rounding quirks, the Data Converter covers bytes, kilobytes, and beyond.
Input | Behavior |
|---|---|
| Negative pixel or rem value | Converts normally using the same formula — valid for CSS properties like margin or transform that accept negative numbers. |
| Base font-size of zero | Invalid. Division by zero has no defined result, so the tool requires a base font-size greater than zero. |
| Non-numeric input | Ignored. The result clears until a valid number is entered. |
| Very small or repeating decimals | Rounded to 4 decimal places for rem and 2 for px, then trimmed of trailing zeros for a clean CSS-ready value. |
REM vs PX vs EM Comparison
Choosing between rem, px, and em comes down to whether a value should respect the user's font-size preferences. If you also need to convert absolute length units like inches or centimeters, the Length Converter handles those separately.
The table below compares how each unit behaves across zoom, accessibility settings, and everyday use cases. One exception matters for responsive design: rem units inside a CSS media query always resolve against the browser's default font-size, ignoring any custom root font-size on the page.
Aspect | REM | PX | EM |
|---|---|---|---|
| Responsiveness | Scales with the root font-size | Fixed regardless of settings | Scales with the parent element's font-size and compounds when nested |
| Full-page browser zoom | Scales with the page, same as px and em | Scales with the page, same as rem and em | Scales with the page, same as rem and px |
| Text-size accessibility setting | Grows or shrinks with the setting | Unaffected — stays fixed | Grows or shrinks with the setting |
| CSS media queries | Resolves against the browser default, ignoring custom root font-size | Unaffected — always literal pixels | Resolves against the parent context, ignoring page overrides |
| Typical use case | Typography, spacing, layout that should respect user preferences | Borders, icons, anything that must stay a fixed size | Component-scoped scaling, like nested badges or buttons |
Frequently Asked Questions (FAQ)
Frequently Asked Questions