Pixels to REM Converter

What is a REM unit?

If you are learning web design or CSS, you have probably seen `font-size: 16px` and `font-size: 1rem`. What is the difference?

• PX (Pixels): A static, absolute unit. 16px is always 16px, regardless of user settings.
• REM (Root EM): A relative unit. It is a multiple of the "Root" font size of the browser.

By default, most browsers (Chrome, Safari, Firefox) set the root font size to 16px. Therefore, 1rem = 16px.

Why Use REM instead of PX?

It comes down to one word: Accessibility.

Visually impaired users often change their browser settings to display text larger (e.g., "Large Text" mode).

• If you use PX: Your website ignores the user's preference and stays small. This is bad user experience (UX).
• If you use REM: Your website respects the user's setting. If they set their base size to 24px, your `1rem` text automatically scales up to 24px.

Google considers accessibility a ranking factor, so using REM units is actually good for SEO!

The "62.5%" Math Trick

Converting pixels to REMs mentally is hard. (e.g. What is 14px / 16? It's 0.875rem. Tough math).

To make this easier, developers use a CSS trick. By setting the HTML font size to 62.5%, the base size becomes 10px (because 62.5% of 16 is 10).

With this trick, you just move the decimal point one spot to the left. 14px becomes 1.4rem. 20px becomes 2.0rem. Easy!

Common Conversion Chart

If you are using the standard 16px base, here are the most common font sizes.