PX to REM Converter
Convert pixels to rem and vice versa
| Píxeles | REM | Uso común |
|---|---|---|
| 10px | 0.625rem | Texto muy pequeño |
| 12px | 0.75rem | Texto secundario, captions |
| 14px | 0.875rem | Texto body pequeño |
| 16px | 1rem | Texto body (default) |
| 18px | 1.125rem | Texto body grande |
| 20px | 1.25rem | Subtítulos pequeños |
| 24px | 1.5rem | H4, subtítulos |
| 28px | 1.75rem | H3 |
| 32px | 2rem | H2 |
| 40px | 2.5rem | H1 pequeño |
| 48px | 3rem | H1, títulos grandes |
| 64px | 4rem | Títulos hero |
Conversor PX ↔ REM
REM (root em) es una unidad relativa basada en el tamaño de fuente del elemento raíz (html). Usar REM facilita crear diseños responsivos y accesibles. La fórmula es: rem = px / tamaño_base.
Online PX to REM Converter - Calculate Responsive CSS Units
Why use REM instead of PX in CSS?
Pixels are an absolute unit: 16px is always 16px. REM (root em) is relative to the font size of the root html element, which defaults to 16px. Why does that matter? Accessibility: users with impaired vision raise the base font size in their browser, and text set in px does not scale while rem does. Responsive design: changing the html font size scales everything defined in rem proportionally. Consistency: a type scale expressed in rem keeps harmonious proportions. Modern best practice uses rem for typography and spacing and px for borders and shadows.
The conversion formula and the base size
The conversion is simple: REM equals PX divided by the base size. With the browser default of 16px, 24px is 24/16 = 1.5rem and 14px is 14/16 = 0.875rem. This tool lets you set a different base if your project uses html { font-size: 62.5% }, which makes 1rem equal 10px for easier mental arithmetic, or any other configuration. Some designers prefer a base of 10 for simple maths, while others keep 16 to respect user preferences.
Generating consistent type scales
A harmonious type scale uses a mathematical ratio between sizes. Common ratios are 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth) and 1.618 (the golden ratio). Starting from a 1rem base at 16px with a 1.25 ratio you get small at 0.8rem (12.8px), body at 1rem (16px), h3 at 1.25rem (20px), h2 at 1.563rem (25px) and h1 at 1.953rem (31.25px). This tool can generate the scale for you, handing back rem values that keep pleasing visual proportions across the whole interface.
If you work with this tool, you will probably also find these useful Border Radius Generator, Gradient Generator, JSON to CSV, CSV to JSON.
Frequently asked questions
What is the difference between rem and em?
REM is relative to the root html font size, so its reference never changes. EM is relative to the parent font size, which causes compounding: an em inside another em multiplies, and the maths gets awkward fast. For most cases rem is more predictable. EM is useful for components that should scale with their own font size.
Should I convert everything to rem?
Not necessarily. Use rem for font-size, line-height, margin, padding and general spacing. Use px for borders, since a 1px border should stay 1px, for box-shadows that should not scale with text, and for elements that need a fixed size regardless of zoom. Media queries work fine with either unit.
Why do some people set font-size: 62.5% on html?
It is a trick: 62.5% of 16px is 10px, which makes 1rem equal 10px so 1.6rem is 16px and the mental maths is trivial. The downside is that if a user raises their base font size, your whole site renders 37.5% smaller than intended relative to their preference. The modern approach keeps 100% and uses a converter like this one, or CSS variables, instead.
How does rem interact with browser zoom?
Browser zoom scales everything proportionally, px and rem alike. The difference shows up in font size preferences: a user who sets a large default font size sees rem-based text grow while px-based text stays put. That is the main reason to use rem for typography, since it respects the accessibility choice the user made.