CSS Tool
Convert pixel values to rem (and back) with a customisable root font size. Includes bulk conversion mode and one-click CSS custom properties export — perfect for Bootstrap 5 and Canvas HTML Template workflows.
Enter any px value
= 16px at root 16px
Paste multiple px values separated by commas or new lines.
rem stands for “root em” — it is a relative unit based on the font size of the root <html> element. By default all browsers set this to 16px, so 1rem = 16px, 1.5rem = 24px, and so on.
The key advantage of rem over px is accessibility. When a user increases their browser’s default font size, everything measured in rem scales up proportionally. Pixel values are absolute — they ignore user preferences entirely. This is why Bootstrap 5 uses rem for nearly all typography, spacing and component sizes.
In the Canvas HTML Template, font sizes, section padding, and spacing utilities are all rem-based. When you customise Canvas with a <style> block or CSS variable overrides, using rem keeps your design consistent and accessible. This converter makes the arithmetic instant.
em behaves the same way as rem when your base size is consistent, but compounds with nested elements — a 1.2em font inside a 1.2em container becomes 1.44em of the root size. For layout and spacing, rem is almost always the safer choice.
Set your root font size (default 16px). Change this if your project sets html { font-size: 18px } or similar.
Enter a px value in the left field — the rem result appears instantly on the right.
Or enter a rem value on the right to see the equivalent px size.
For multiple values, use the Bulk Converter — paste a comma or newline-separated list of px values.
Click 'Copy all as CSS custom properties' to export your conversions as :root { --size-24: 1.5rem; } ready to paste into your stylesheet.
These are the most frequently used values in Bootstrap 5 and Canvas Template projects.
| px | rem | Common use |
|---|---|---|
| 12px | 0.75rem | Small labels, captions |
| 14px | 0.875rem | Secondary text, badges |
| 16px | 1rem | Base body text |
| 18px | 1.125rem | Lead paragraphs |
| 20px | 1.25rem | H5 / subheadings |
| 24px | 1.5rem | H4 / section subheadings |
| 32px | 2rem | H3 / major headings |
| 48px | 3rem | H2 / section titles |
| 64px | 4rem | H1 / hero headings |
| 80px | 5rem | Display / XL hero text |
rem (root em) is always relative to the font-size of the root <html> element. em is relative to the font-size of the nearest parent element that has a font-size set. This makes rem more predictable for layouts and spacing because it doesn't compound with nested elements the way em can.
All modern browsers default to 16px for the root font size. This means 1rem = 16px unless the user or stylesheet changes the html element's font-size. Some older CSS patterns set html { font-size: 62.5% } to make 1rem = 10px, but this is no longer recommended as it overrides user accessibility preferences.
Bootstrap 5 uses rem for font sizes, spacing utilities, and component sizing because rem respects the user's browser font-size preference. If a user sets their browser to a larger font size for accessibility, rem-based layouts scale correctly. Pixel values are absolute and ignore this setting, which can break accessibility for low-vision users.
Divide the pixel value by the root font size. With the default 16px root: 24px ÷ 16 = 1.5rem. For a custom root size of 18px: 24px ÷ 18 = 1.333rem. This tool handles all the arithmetic for you — just enter the px value and the result updates instantly.
Use px for borders, outlines, and hairlines. A 1px border should stay exactly 1px regardless of font size changes — scaling it with rem makes no sense visually. Use rem (or em) for font sizes, padding, margin, line-height, and gap, so they scale proportionally when users change their browser font-size preference.
Canvas Builder generates production-ready Canvas HTML Template pages in seconds — rem values, spacing and typography included.
Try Canvas Builder