Convert between PX, REM, and EM for CSS with a custom base font size. Includes a live typography preview and a full quick-reference table.
The root font size is the font size set on the <html> element. Browsers default to 16px. All REM values are calculated relative to this number. Adjust it here to match your project.
Type any value into any field. The other two update instantly. REM is relative to the root font size above. EM is relative to the parent element font size (set below).
Absolute unit. Fixed screen pixels. Not affected by user browser settings - bad for accessibility.
Root relative. Always relative to the <html> root font size. Consistent and predictable.
Parent relative. Relative to the parent element font size, not the root. Set parent size below.
See how your font size actually looks on screen as you type. The sample text below updates in real time.
Common font sizes converted to REM and EM based on your current base font size. The table recalculates instantly when you change the root or parent size above.
| Pixels (PX) | REM (root: 16px) | EM (parent: 16px) | CSS (rem) | CSS (em) |
|---|
Everything UI developers need to know about choosing the right CSS unit for typography and spacing.
In CSS, a pixel (px) is an absolute unit. It represents a fixed number of device pixels on the screen and does not change based on any other setting. When you write font-size: 16px, that element will always render at exactly 16 pixels, regardless of what the user has set as their preferred browser font size or what the parent element looks like. This makes pixels predictable, but also inflexible.
A REM (Root EM) is a relative unit. The "root" refers specifically to the <html> element at the very top of the document. If the <html> element has a font size of 16px (the browser default), then 1rem = 16px, 2rem = 32px, and 0.5rem = 8px. Crucially, the REM value never changes based on where in the DOM you use it - it always refers back to that single root value.
An EM is also a relative unit, but it is relative to the font size of its immediate parent element, not the root. If a parent <div> has font-size: 20px, then a child element with font-size: 1.5em will render at 30px. This context-sensitivity makes EM powerful for components that need to scale with their container, but it can also cause unexpected results when elements are nested, since EM values compound on each other.
Web accessibility refers to designing websites so that all users, including those with visual impairments or cognitive disabilities, can use them effectively. One important browser feature is the user's ability to set a preferred default font size. Most browsers let users increase their default from 16px to 20px, 24px, or even larger, through their browser settings.
When you set font sizes in pixels, you override and completely ignore that user preference. A user who has configured their browser to display text at 24px for readability will see your 14px pixel-based text stay at 14px - too small for them to read comfortably. This creates a poor experience and can even violate accessibility guidelines like WCAG (Web Content Accessibility Guidelines).
When you use REM units instead, your text respects the user's browser setting. If they have set their default size to 20px, your 1rem text will display at 20px, your 1.5rem heading at 30px, and so on. The entire typographic scale adjusts proportionally, keeping your design intact while respecting the user's needs. This is a core reason why modern CSS best practices strongly favor REM for font sizes.
Responsive design means making a website look correct and readable on screens of any size, from a small mobile phone to a large desktop monitor. CSS Media Queries are rules that apply different styles depending on the screen size - for example: "if the screen is narrower than 768px, use smaller font sizes."
When your entire typographic system is built with REM units, you can scale the whole design up or down by changing just one value: the root font size. Instead of writing dozens of overrides in your media queries to resize each heading and paragraph, you simply write one rule that adjusts the <html> font size, and every element scaled in REM responds proportionally. For example:
html { font-size: 14px; } for mobile, and html { font-size: 16px; } for desktop. Every single rem value in your entire stylesheet scales perfectly with that one change. This makes maintaining consistent typographic hierarchies across breakpoints dramatically simpler.
The 62.5% trick is a popular developer technique that makes the mental math of working with REM values much easier. The standard browser default font size is 16px, which means 1rem = 16px. That means to get 14px in REM you need to calculate 14 / 16 = 0.875rem - a cumbersome number to remember.
The trick is to set the root font size to 62.5% of the browser default: html { font-size: 62.5%; }. Because 62.5% of 16px equals 10px, this resets 1rem = 10px. Now the mental math becomes trivial: 14px becomes 1.4rem, 24px becomes 2.4rem, 48px becomes 4.8rem. Clean, readable numbers throughout your stylesheet.
The important caveat: because you reset the root size, you must also reset the body font size back to a readable default, typically with body { font-size: 1.6rem; } (which equals 16px). Without this, your base text will render at 10px. You can use the Base Size control above - set it to 10px - to simulate exactly how your REM values will convert when using this technique.
EM units shine in scenarios where you want a property to scale relative to the element's own font size, rather than the global root. The classic use case is padding and margin on buttons or form controls. If you write padding: 0.5em 1em on a button, and then change the button's font size, the padding automatically scales to match. The component stays visually balanced at any size without any additional code.
Another great use for EM is in reusable UI components or design-system widgets that need to be self-contained. Since EM values are relative to the component's own declared font size (which you control), the component will scale predictably in any context it is placed in, without being tethered to the global root.
As a general rule: use REM for global typography (headings, body text, base spacing scales) where consistency and accessibility matter most. Use EM for component-level spacing (padding, margin, line-height) where you want the spacing to be proportional to the text inside that specific component. Avoid using EM for nested font sizes, as the compounding effect can produce hard-to-debug scaling issues.