Em/Px Converter
Convert between CSS units: px, em, rem, pt, and %. Set your base font size and see all conversions instantly with a quick reference table.
Base Font Size
px(browser default: 16px)
Convert a Value
px
16em
1rem
1pt
12%
100Text Preview
The quick brown fox
Previewing at 16px
Quick Reference TableBase: 16px
| px | em | rem | pt | % |
|---|---|---|---|---|
| 8 | 0.5 | 0.5 | 6 | 50% |
| 10 | 0.625 | 0.625 | 7.5 | 62.5% |
| 12 | 0.75 | 0.75 | 9 | 75% |
| 14 | 0.875 | 0.875 | 10.5 | 87.5% |
| 16 | 1 | 1 | 12 | 100% |
| 18 | 1.125 | 1.125 | 13.5 | 112.5% |
| 20 | 1.25 | 1.25 | 15 | 125% |
| 24 | 1.5 | 1.5 | 18 | 150% |
| 28 | 1.75 | 1.75 | 21 | 175% |
| 32 | 2 | 2 | 24 | 200% |
| 36 | 2.25 | 2.25 | 27 | 225% |
| 40 | 2.5 | 2.5 | 30 | 250% |
| 48 | 3 | 3 | 36 | 300% |
| 64 | 4 | 4 | 48 | 400% |
| 72 | 4.5 | 4.5 | 54 | 450% |
| 96 | 6 | 6 | 72 | 600% |
All conversions happen entirely in your browser. No data is sent to any server.
How to Use Em/Px Converter
- 1Set your base font size (default 16px).
- 2Enter a value and select the input unit.
- 3See conversions to all other CSS units instantly.
- 4Use the reference table for common font sizes.
Zenovay
Privacy-first analytics for your website
Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.
Related Tools
Color ConverterConvert colors between HEX, RGB, HSL, and CMYK formats. Live preview with color picker.
Unit ConverterConvert between units of length, weight, temperature, area, volume, speed, and more.
Number Base ConverterConvert numbers between binary, octal, decimal, and hexadecimal bases.
Unix Timestamp ConverterConvert between Unix timestamps and human-readable dates. Show ISO 8601, UTC, local time, and relative time.
Frequently Asked Questions
What is the difference between em, rem, and px?▾
px (pixels) is an absolute unit — 16px always renders as 16 pixels regardless of context. em is a relative unit based on the font-size of the current element: if an element has font-size: 20px, then 1em = 20px within that element, so child elements using em inherit and compound that size. rem (root em) is also relative, but always based on the root <html> element font-size (typically 16px by default in browsers), making it predictable and non-compounding. Use px when you need fixed, precise sizes (borders, shadows). Use rem for scalable typography and layout. Use em when you want spacing to scale relative to the element's own font size.
When should I use each CSS unit?▾
px: borders, box-shadows, media query breakpoints, images with exact pixel dimensions, fine details that should not scale. rem: font sizes, spacing (padding/margin), layout widths — anything that should scale with the user's browser font-size preference. em: component-level padding and margin that should be proportional to the component's text size (e.g. button padding that scales with button font size), letter-spacing, line-height. pt: primarily for print stylesheets — 1pt = 1/72 inch. %: fluid layouts, widths relative to a parent container, responsive font scaling with viewport units.
What is the default base font size, and can I change it?▾
Most browsers default to 16px for the root font size. This means 1rem = 16px and 1em = 16px at the root level. However, users can change this in browser settings, and developers can set a custom root font size via html { font-size: 18px; } or similar. The "Base Font Size" input in this tool lets you model any custom base. A common pattern is html { font-size: 62.5%; } which sets the base to 10px, making rem math simpler (1.6rem = 16px). Be cautious with this approach as it can override user accessibility settings.
Which units are best for responsive and accessible design?▾
rem is generally the best choice for responsive, accessible typography and spacing. Because rem scales with the user's preferred base font size, text and layout will correctly enlarge when a user increases their browser's default font size — this is critical for accessibility (WCAG 1.4.4 requires text to be resizable up to 200% without loss of content). Avoid px for font sizes in accessible designs. em is useful for components where everything should scale together. For fluid layouts, combine rem with CSS clamp() for fluid typography: font-size: clamp(1rem, 2.5vw, 2rem).
What are the accessibility considerations for CSS units?▾
WCAG 2.1 Success Criterion 1.4.4 (Resize Text, Level AA) requires that text can be resized up to 200% without loss of content or functionality. Using px for font sizes bypasses the user's browser font-size preference, failing this criterion. rem and em respect the user's settings. Additionally, avoid relying on viewport units (vw, vh) alone for text sizes — very small viewports can make text too tiny. Use media queries or CSS clamp() to set a minimum. For users who need larger text (low vision, dyslexia), rem-based layouts ensure that increasing the browser default font size also scales spacing and container sizes, preventing overflow and horizontal scrolling.