When writing CSS, web developers choose from several units for font sizes and spacing: px (pixels), rem (root em), em, and pt (points), among others. Each unit has a specific purpose, but rem has become the preferred choice for font sizes and many layout measurements in modern web development. Understanding why requires understanding how different units respond to the browser environment — and what happens when a user adjusts their browser's default text size.
The central argument for rem is accessibility. Users can set their browser's default font size larger or smaller than the standard 16px to accommodate visual needs. A stylesheet built entirely with px ignores that preference. A stylesheet built with rem respects it automatically, everywhere on the page.
What Is px?
A CSS pixel (px) is an absolute unit referenced to a device-independent pixel at 96 dots per inch. When you write font-size: 16px, the text renders at 16px regardless of the user's browser font-size preference. px is precise and predictable — which makes it ideal for elements that should never scale with text: border widths, box shadows, fine decorative details, and pixel-accurate image dimensions.
The limitation of px for font sizes is that it overrides the user's preference. If someone has set their browser default to 20px because small text is hard to read, text sized in px will not change. This affects readability and also breaks accessibility tools that rely on font-size scaling as an adaptive mechanism.
What Is rem?
rem stands for 'root em' — it is relative to the font size of the root HTML element (the <html> tag). Browsers default to a 16px root font size, so 1rem = 16px by default. If a user changes their browser's default font size to 20px, then 1rem = 20px — and every element sized in rem scales accordingly, without any changes to the CSS.
This behavior makes rem naturally responsive to user preferences. A user who needs larger text for readability can set their browser default once, and a rem-based layout respects that choice throughout the entire site. No JavaScript is needed, no media queries — the CSS units do the right thing inherently.
em vs. rem: What Changes?
The em unit is similar to rem but relative to the font size of the element's parent, not the root. This creates compounding: if a parent element is 1.2em and a child within it is also 1.2em, the child's effective size is 1.2 × 1.2 = 1.44× the root. Useful for components that should scale proportionally to themselves, but hard to reason about globally.
rem avoids this compounding by always referencing the root. 1rem means the same thing regardless of how deeply nested the element is. This consistency is why rem is preferred in design systems and large-scale UI work, where predictable sizing across dozens of components is essential.
px ↔ rem Conversion
Default browser root font size: 16px px → rem: rem = px ÷ 16 rem → px: px = rem × 16 Common values at 16px root: 12px = 0.75rem 14px = 0.875rem 16px = 1rem 18px = 1.125rem 20px = 1.25rem 24px = 1.5rem 32px = 2rem 48px = 3rem If user sets root to 20px: 1rem = 20px • 0.875rem = 17.5px • 1.5rem = 30px
When to Use pt
The point (pt) is a print unit: 1 inch = 72 points at standard print resolution. pt is appropriate in print stylesheets (@media print) and when specifying font sizes for documents, PDFs, or design tools. Figma, Illustrator, and InDesign all use points for print typography by default.
For on-screen web design, pt is generally inappropriate. Its relationship to on-screen pixels varies with display DPI and browser rendering settings, making it less predictable than rem or px for web typography. Stick to rem for screen, pt for print.
Quick Tips
- ✓
Set html { font-size: 100%; } rather than a px value — this ensures your root respects whatever the user has configured in their browser.
- ✓
Use rem for font-size, margin, padding, and gap values that should scale with text. Use px for borders, outlines, box shadows, and pixel-precise decorations.
- ✓
A Figma design spec in px? Divide by 16 to get the rem equivalent at the browser default.
- ✓
Avoid overriding the root with a px value like html { font-size: 14px } — it defeats user accessibility scaling and is the main way rem-based layouts become inaccessible.
Frequently Asked Questions
What is the default font size in browsers?
All major browsers — Chrome, Firefox, Safari, Edge — default to a 16px root font size. This means 1rem = 16px, 0.75rem = 12px, and 1.5rem = 24px out of the box. Users can change this in browser settings under Accessibility or Appearance.
Does using rem affect SEO?
Not directly — search engines do not rank pages based on CSS unit choices. rem does, however, improve accessibility scores (Lighthouse, WCAG), which can indirectly affect user engagement metrics and Core Web Vitals assessments that Google uses as ranking signals.
Should I ever use px for font sizes?
Occasionally — for elements that must remain fixed regardless of text scaling, like a UI label that must fit within a pixel-constrained container. But these cases are exceptions. The default choice for body text, headings, and any text users should be able to scale should be rem.
What about vw for responsive typography?
The CSS clamp() function combines a minimum rem value, a fluid vw-based size, and a maximum rem value — giving you both user-preference-respecting scaling and viewport-responsive sizing. Example: font-size: clamp(1rem, 2.5vw, 2rem) is the current best practice for large display headings.
Try the Typography Converter
🔤 Open Typography Converter →Related Converters
Related Articles
All conversion results are provided for general informational purposes only. Read our full disclaimer.