Design
px → rem / em Converter
Convert pixels to rem and em (and vice versa) with a configurable base. Essential for fluid typography and responsive layouts.
px
Browser default is 16px (1rem = 16px). Change it if your CSS redefines the html font-size — for example, html { font-size: 62.5%; } makes 1rem = 10px — or if your framework or CMS uses a different base.
px → rem / em
Type the pixels — results are calculated instantly.
px
rem / em → px
Enter a rem or em value — the px equivalent is calculated instantly.
rem/em
px
Quick reference table
Base: 16px
| px | rem | em |
|---|
Key concepts
rem (root em) is a unit relative to the
font-size of the root element (<html>). With a 16px base, 1rem = 16px. Changing the document font-size scales all rem values proportionally, simplifying global responsive design.
em is relative to the
font-size of the parent element (or the element itself when used for font-size). This can create compounding effects in nested elements. rem avoids that problem by always being relative to the root. For spacing and sizing within self-contained components, em can be preferable.
Pixels are fixed and do not respect the user's font size preference in the browser. With
rem, if the user increases their browser's base font size, all content scales correctly, improving accessibility. WCAG 1.4.4 also recommends that text can be scaled up to 200% without loss of functionality.
Some projects use the trick of setting
html { font-size: 62.5%; } so that 1rem = 10px, making mental math easier. Other frameworks or CMS platforms may use a different base. Use the base field to adapt the converter to your specific project.
Beyond
rem and em, CSS offers viewport units: vw (1% of width), vh (1% of height), vmin and vmax. Modern CSS adds container query units (cqi, cqb) and the clamp() and calc() functions that mix units. For fluid typography that scales automatically, clamp(1rem, 2.5vw, 2rem) creates sizes with a defined minimum and maximum — no media queries needed.
Use rem for: global font sizes, main layout spacing and any value that should scale with the document. Use em for: internal spacing of self-contained components (buttons, badges, tooltips) that should scale with the component's own text. The practical rule:
rem if you want something to scale with the root document; em if you want it to scale with the component it lives in. Mixing both strategically gives great flexibility to the design system.
Bootstrap 5 defines its breakpoints in
em (not rem) so media queries respond to browser zoom: the md breakpoint is @media (min-width: 48em), equivalent to 768px at a 16px base. Spacing utilities (p-3, m-2, etc.) are defined in rem, so they automatically respect the user's browser base font size. This makes Bootstrap accessible out of the box when using its spacing classes.
Front-end developers use it constantly to convert pixel values from Figma or Sketch designs into rem before writing CSS, ensuring that typography and spacing adapt to the user's font size preference. Web designers with coding knowledge consult it to understand the equivalence between the visual metrics in a prototype and the relative CSS units used in production. Teams using CSS frameworks like Tailwind or Bootstrap need to convert their design values to the rem-based spacing scales these frameworks use internally. Web accessibility specialists use it to make sure minimum font sizes (typically 16px base / 1rem) comply with WCAG recommendations and respect browser zoom. Web development students use it as a learning reference to solidify the relationship between px and relative units.
On desktop, press Ctrl + D (Windows/Linux) or Cmd + D (Mac) in Chrome, Firefox, or Edge to add this page to your bookmarks instantly. In Safari for Mac, use Cmd + D or go to Bookmarks → Add Bookmark. On mobile with Chrome (Android), tap the three-dot menu (⋮) and choose "Add to Home screen" or "Add to bookmarks." On mobile with Safari (iPhone/iPad), tap the share button (□↑) and then "Add to Home Screen." Many developers keep it pinned in their browser's bookmarks bar alongside their most-used coding tools.