CSS units converter
What is a Css Units Converter?
CSS supports many length units, and converting between them by hand is error-prone, especially when designs arrive in pixels but your code uses rem. This converter translates between px, rem, em, pt and percent using a root font size you choose, 16 px by default.
How to use it
- Set the root font size, usually 16 px.
- Enter a value and its unit.
- Read the equivalent values in the other units.
Conversion rules
rem = px / root font size. With 16 px root: 24 px = 1.5rem.emis relative to the font size of the current element (or its parent for font-size), so its pixel value depends on context.pt = px × 0.75, since 1 pt is 1/72 inch and 1 CSS px is 1/96 inch. 16 px = 12 pt.% for font-size = px / parent font size × 100. 20 px in a 16 px parent = 125%.
Quick reference at 16 px root
- 12 px = 0.75rem
- 14 px = 0.875rem
- 18 px = 1.125rem
- 20 px = 1.25rem
- 32 px = 2rem
Why prefer rem?
Users can change their browser's default font size for readability. Sizes in rem scale with that setting; sizes in px do not. Using rem for font sizes, and often for spacing, makes layouts respect user preferences and helps meet accessibility guidelines. Use em when something should scale with its own component's text, like padding inside a button. Avoid setting html { font-size: 62.5% } just to make the math easy; it causes problems with third-party components.
Frequently Asked Questions
How many pixels is 1rem?
By default 16 pixels, because browsers use 16 px as the root font size. It changes if the user or your CSS sets a different root size.
What is the difference between rem and em?
rem is relative to the root element's font size, while em is relative to the font size of the current or parent element.
How do I convert px to pt?
Multiply by 0.75. For example, 16 px equals 12 pt.
Why use rem instead of px for font sizes?
rem respects the user's browser font-size setting, which makes text accessible to people who need larger text.