My designer spec is in pixels (24px). How do I write that in rem for CSS?

24px ÷ 16px = 1.5rem. Divide your pixel size by 16 to convert to rems (assuming 16px root). If your root is custom (e.g., 18px), divide by that instead.

What's the difference between rem and em?

em is relative to the element's parent font size. rem is relative to the document root. 1em in a 24px element = 24px; 1em in a 14px element = 14px. 1rem is always the root size (default 16px). Rems are preferred for consistency.

A user sets their browser font size to 18px. How does that affect my CSS rem values?

If you set html { font-size: 18px; }, then 1rem = 18px instead of 16px. All rem-based sizes scale proportionally. This is good—your design respects user accessibility preferences. Use rems, not pixels, for user-facing text.

Should I use rems or pixels in modern web design?

Use rems for typography and user-facing sizing. Rems scale with user preferences (accessibility). Use pixels only for fixed-size elements (borders, dividers). Most modern design systems default to rems for all text and spacing.

Rem to Pixel Converter

Enter a value to instantly convert between typography units.

From

Precision4 dp

1 Rem = 16 Pixel

Key Formulas

Point → Pica

pc = pt × 0.0833333

Point → Inch

in = pt × 0.0138889

Pica → Inch

in = pc × 0.166667

Formula

px = rem × 16

Rems (root em) scale relative to the document's root font size. Modern web design defaults to 16px root, making 1 rem = 16px. Rems enable accessible, responsive typography—if a user increases their default font size to 18px, all rem-based sizes scale proportionally. Unlike ems (which scale relative to parent font), rems always reference the root, providing consistency. Converting rems to pixels helps designers visualize sizes and communicate with developers accustomed to pixels. The conversion assumes a 16px root font size; custom root sizes require proportional adjustment.

Source: W3C CSS Values and Units Module Level 3

Frequently Asked Questions

Real-World Examples

1 rem = 16px (default). The browser default body text size, commonly used as the baseline for responsive design.

1 rem = 16 px

2 rem = 32px. A large heading size—double the root font, common for h2 or prominent text.

2 rem = 32 px

1.5 rem = 24px. A mid-level heading (h3, h4) or prominent subheading—150% of root.

1.5 rem = 24 px

0.875 rem = 14px. Small body text or captions—87.5% of root, common for secondary content.

0.875 rem = 14 px

points to picas points to type inches picas to type inches points to mm pixels to points ems to rems

Rem to Pixel Converter

Key Formulas

Formula

Frequently Asked Questions

Real-World Examples

Related Converters