How to use the px to rem converter
Type a pixel value to see it in rem, or type rem to see pixels; the other box updates as you type. Change the root font size if your site sets one on the html element. For a whole stylesheet, paste it into the left box: every px value is converted to rem on the right, with 1px borders left alone by default. Values are rounded to four decimal places, which is far finer than a screen can show.
PX to REM conversion table (16px base)
| Pixels | rem | Typical use |
|---|---|---|
| 10px | 0.625rem | Captions, labels, fine print |
| 12px | 0.75rem | Captions, labels, fine print |
| 14px | 0.875rem | Body text |
| 16px | 1rem | Body text |
| 18px | 1.125rem | Lead paragraphs, small headings, spacing |
| 20px | 1.25rem | Lead paragraphs, small headings, spacing |
| 24px | 1.5rem | Lead paragraphs, small headings, spacing |
| 28px | 1.75rem | Headings, section spacing |
| 32px | 2rem | Headings, section spacing |
| 40px | 2.5rem | Headings, section spacing |
| 48px | 3rem | Display headings, large gaps |
| 64px | 4rem | Display headings, large gaps |
The 62.5% trick, and why it is falling out of favor
Setting html { font-size: 62.5%; } makes 1rem equal 10px, so 24px becomes an easy 2.4rem. It works, and it still respects user font-size preferences because it is a percentage. The catch is that every component then needs its own font size, since unstyled text inherits 10px, and third-party widgets that assume a 16px root come out tiny. With a converter at hand, keeping the default 16px root and dividing by 16 is usually less trouble.
For when to reach for px, rem, em or viewport units, read px vs rem vs em. To shrink the converted stylesheet for production, run it through the CSS Minifier, and check the text colors you are sizing with the Color Contrast Checker.