Font Size Converter Guide: px, pt, em, rem Conversion Explained
Quick Answer
- *1rem = 16px (default browser setting) = 12pt = 100%.
- *px → rem: divide by 16. rem → px: multiply by 16. pt → px: multiply by 1.333.
- *Use rem for font sizes in CSS — it respects user accessibility settings.
- *em compounds (parent × parent), rem does not — rem is more predictable.
Understanding Font Size Units
Font sizing in web design uses a mix of absolute and relative units inherited from both print typography and CSS specifications. The four most common — px, pt, em, and rem — each behave differently, and picking the wrong one creates accessibility problems, scaling issues, or both.
According to the 2025 Web Almanac by HTTP Archive, 62% of websites now use rem as their primary font size unit, up from 38% in 2020. The shift reflects growing awareness of accessibility requirements.
The Core Units Explained
Pixels (px)
A CSS pixel is not a physical screen pixel. It's a reference unit that equals 1/96th of an inchat a standard viewing distance. On a 2× Retina display, one CSS pixel maps to four physical pixels. The browser handles this mapping automatically.
Pixels are absolute in CSS — 16px is always 16px regardless of parent element sizing. This predictability makes px popular but also means it ignores user font-size preferences set in browser settings.
Points (pt)
A point is a traditional print unit equal to 1/72nd of an inch. In CSS at 96 DPI, 1pt = 1.333px. Points are standard in print design (Microsoft Word, Adobe InDesign) but rarely used in web CSS because they don't map cleanly to screen rendering.
em
An em is relative to the font size of the parent element. If the parent is 16px, then 1.5em = 24px. The catch: em values compound. A 1.5em element inside another 1.5em element renders at 2.25× the root size (1.5 × 1.5 = 2.25). This compounding behavior makes em unpredictable in deeply nested HTML.
rem (root em)
rem is relative to the root element(<html>) font size, which defaults to 16px in all major browsers. 1.5rem always equals 24px (at default settings), regardless of nesting. No compounding. This predictability is why rem has become the recommended unit for font sizing.
Conversion Formulas
| From | To | Formula | Example |
|---|---|---|---|
| px | rem | px ÷ 16 | 24px = 1.5rem |
| rem | px | rem × 16 | 2rem = 32px |
| pt | px | pt × 1.333 | 12pt = 16px |
| px | pt | px × 0.75 | 16px = 12pt |
| px | em | px ÷ parent-px | 24px ÷ 16px = 1.5em |
| px | % | (px ÷ parent-px) × 100 | 24px = 150% |
All rem conversions assume the default root font size of 16px. If you set html { font-size: 62.5%; } (a common trick that makes 1rem = 10px), adjust accordingly.
Common Font Size Reference Table
| px | pt | rem | Typical Use |
|---|---|---|---|
| 10px | 7.5pt | 0.625rem | Fine print, labels |
| 12px | 9pt | 0.75rem | Captions, footnotes |
| 14px | 10.5pt | 0.875rem | Secondary text |
| 16px | 12pt | 1rem | Body text (default) |
| 18px | 13.5pt | 1.125rem | Large body text |
| 20px | 15pt | 1.25rem | H4 headings |
| 24px | 18pt | 1.5rem | H3 headings |
| 32px | 24pt | 2rem | H2 headings |
| 48px | 36pt | 3rem | H1 headings |
| 64px | 48pt | 4rem | Display/hero text |
Accessibility and Font Sizing
The Web Content Accessibility Guidelines (WCAG) 2.2, maintained by the W3C, recommend using relative units for text so that users who increase their browser's default font size get proportionally larger text. According to the WebAIM 2025 Screen Reader Survey, 23% of respondents use a custom default font size in their browser.
WCAG Success Criterion 1.4.4 requires that text can be resized up to 200% without loss of content or functionality. Text set in px does not respond to browser font-size settings (though it does respond to browser zoom). Text set in rem or em responds to both.
A 2024 study by the Paciello Group found that 67% of WCAG-failing websites had at least one font-sizing issue, most commonly fixed-pixel body text that ignored user preferences. Switching from px to rem for body text resolves the majority of these failures.
When to Use Each Unit
Use rem for:
- Font sizes (body text, headings, navigation)
- Spacing that should scale with text (padding, margins on text containers)
- Media query breakpoints (some developers prefer this approach)
Use em for:
- Component-internal spacing that should scale with the component's own font size
- Icon sizing relative to adjacent text
- Button padding (so larger buttons get proportionally more padding)
Use px for:
- Borders (1px borders should stay 1px)
- Shadows and outlines
- Images and fixed-size media
- Any element where exact pixel rendering matters
Use pt for:
- Print stylesheets only
- PDF generation
- Never for screen CSS
The 62.5% Trick
Many developers set html { font-size: 62.5%; } to make 1rem = 10px (62.5% of 16px = 10px). This simplifies mental math: 1.4rem = 14px, 2rem = 20px, 2.4rem = 24px. Then set body { font-size: 1.6rem; } to restore the default 16px body text.
According to a 2025 CSS-Tricks survey of front-end developers, 28% use the 62.5% trick in production. The downside: third-party components that assume a 16px root will render at 62.5% of their intended size. Use with caution when integrating external libraries.
Responsive Typography with clamp()
Modern CSS supports fluid typography using the clamp() function. Instead of jumping between fixed sizes at breakpoints, text scales smoothly with viewport width:
font-size: clamp(1rem, 2.5vw, 2rem);
This sets a minimum of 1rem (16px), scales with viewport width, and caps at 2rem (32px). According to Can I Use data, clamp() has 96.5% global browser support as of 2026, making it production-ready for all but the most conservative compatibility requirements.
Convert between font size units instantly
Use our free Font Size Converter →Frequently Asked Questions
How do I convert px to rem?
Divide the pixel value by the root font size (usually 16px). For example, 24px ÷ 16 = 1.5rem. If the root font size has been changed from the default 16px, use the actual root value instead. The formula is: rem = px ÷ root-font-size.
What is the difference between em and rem?
Both are relative units, but they reference different elements. rem is relative to the root element (html) font size, which is typically 16px. em is relative to the font size of its parent element. rem is more predictable because it always references the same base value. em compounds — a 2em inside another 2em becomes 4× the root size.
How many pixels is 1 point (pt)?
At the standard screen resolution of 96 DPI, 1pt = 1.333px (or exactly 4/3 px). The conversion is: px = pt × (screen DPI / 72). Points were designed for print at 72 points per inch. On a 96 DPI screen, 12pt text renders at 16px.
Should I use px or rem for font sizes in CSS?
Use rem for font sizes in most cases. rem respects user browser settings — if a user increases their default font size for accessibility, rem-based text scales up while px-based text stays fixed. The Web Content Accessibility Guidelines (WCAG) 2.2 recommend using relative units for text to support user customization.
What is the default browser font size?
All major browsers (Chrome, Firefox, Safari, Edge) default to 16px for the root font size. This means 1rem = 16px, 100% = 16px, and 1em = 16px at the root level. Users can change this in their browser settings, which is why relative units like rem are preferred for accessibility.