About px ↔ rem / em converter
CSS lets you size things in pixels, rem or em. rem and em scale with font size, which makes layouts friendlier to users who change their browser text size.
How they work
- rem is relative to the root (html) font size, usually 16 px.
- em is relative to the font size of the element itself or its parent.
- At a 16 px root, 1 rem = 16 px, so 24 px is 1.5 rem.
When to use each
Use rem for font sizes, spacing and breakpoints so they respect user settings. Use em for sizes that should scale with the local text, such as button padding. Use px for hairlines like 1 px borders.
A worked example
With a root size of 16 px, a heading of 32 px is 2 rem and body text of 18 px is 1.125 rem. If a user raises their browser's default text size to 20 px, rem-based text grows to 40 px and 22.5 px automatically, while px values stay the same.
A common trick
Some stylesheets set html { font-size: 62.5% } so that 1 rem equals 10 px, which makes the maths easier. It works, but remember to reset body text to a readable size.
