Em Conversion Tool - Convert Em to Any Typography Unit
Convert Em to Other Units
Quick Conversions
Convert Other Units to Em
Quick Conversions
Related Typography Units
Em Conversion Table
This comprehensive em conversion table shows how various typography units relate to em, the relative unit based on font size. Use this reference for quick conversions between em and other common typography units.
| Conversion | To Unit | Multiplier |
|---|---|---|
| Em to points | Points | 16 |
| Em to picas | Picas | 1.3333 |
| Em to en | En | 2 |
This em conversion reference table provides accurate conversion factors for typography units. All values are based on the standard 16px browser default where 1em equals 16px (or 12pt). Note that em values are relative and can change based on parent element font sizes.
What is an Em?
The em (pronounced like the letter "M") is a relative unit of measurement in typography, equal to the currently specified font size. Originally based on the width of the capital letter "M" in old typography, the em is now defined as relative to the font size of the element itself. For example, if an element has a font size of 16px, then 1em equals 16px.
The em is particularly valuable in responsive web design as it scales relative to its parent element. Our typography conversion tool helps you easily convert between em and other units. For example, 1 em equals 16 points (at the standard 16px browser default) or 1.333 picas.
How is Em Defined in CSS?
In CSS, the em unit is relative to the font-size of the element itself. If a CSS rule sets the font-size to 20px, then 1em = 20px. If you set the font-size to 1.5em, it becomes 1.5 times the font size of the parent element:
- 1em = 16px (at browser default)
- 1em = 12pt (at browser default)
- 1em = 1.333 pica (at browser default)
- 1em = 2 en
For web developers, understanding em conversion is essential for creating accessible, scalable designs that adapt to user preferences and device sizes.
What is Em Used For?
Em units are used extensively in web development and responsive design. As relative units, they allow elements to scale proportionally, making designs more flexible and accessible:
Responsive Web Design
Creating layouts that adapt to different screen sizes. For example, setting padding to 1.5em makes it always 1.5 times the element's font size, regardless of viewport.
Accessibility
Ensuring text scales when users change their browser's default font size. For example, when a user sets their default to 20px, 1em becomes 20px instead of 16px.
Component Sizing
Creating modular design systems where components maintain their proportions. For example, a button with 1em font size, 1.5em padding, and 2em border radius scales harmoniously.
Typography Hierarchy
Establishing consistent spacing and sizing relationships. For example, headings at 2em, subheadings at 1.5em, and body text at 1em create a clear visual hierarchy.
Etymology and History
The term "em" originates from the width of the capital letter "M" in traditional typography, which was often the widest letter in a font. In metal type, each letter was cast on a block of metal, and the width of the "M" block became the standard unit of measurement for horizontal spacing.
With the advent of digital typography, the em was redefined as relative to the font size of the element rather than a physical letter width. This evolution made it ideal for scalable digital media. The current definition in CSS makes the em a fundamental unit of responsive web design, allowing text and layouts to adapt to user preferences and device characteristics.
Frequently Asked Questions
Why is em called em?
The term "em" comes from the width of the capital letter "M" in traditional metal typefaces. The "M" was typically the widest letter in a font, making it a convenient standard for measurement. In digital typography, the em has been redefined as relative to font size rather than physical letter width.
How do I convert em to px?
At the standard browser default of 16px, 1em equals 16px. To convert em to pixels, multiply by the element's font size in pixels. For example, if an element has a font size of 20px, then 1.5em = 30px. Our em conversion calculator handles these calculations automatically.
What's the difference between em and rem?
The em is relative to the element's own font size, while the rem (root em) is relative to the root (html) element's font size. This means em values can compound when nested, while rem values remain consistent throughout the document. Both are essential for responsive design.
How do I convert em to pt?
At the standard browser default, 1em equals 12pt. To convert em to points, multiply by 12. For example, 2em = 24pt. Use our em conversion tool for instant conversion between em and points with different base sizes.
When should I use em over px?
Use em for scalable, relative measurements that should adapt to font size changes, especially for responsive design and accessibility. Use px for fixed, absolute measurements that should remain constant regardless of user preferences. Our em converter helps you understand these relationships.
Is 1em always 16px?
Only when the element's font size matches the browser default of 16px. If an element has a font size of 20px, then 1em = 20px for that element and its children. This relative nature makes em powerful for responsive design but requires careful consideration in nested elements.
How accurate is em conversion?
Our em conversion tool uses the standard 16px browser default (1em = 16px = 12pt) for maximum accuracy. Note that actual pixel values depend on the element's own font size, which our tool accounts for in calculations. For precise responsive design, always test em-based layouts across different devices.
Can I use em for all CSS properties?
Yes, em can be used for most CSS properties including font-size, padding, margin, border-radius, and more. This creates scalable, proportional designs. For example, setting padding to 1em makes it always equal to the element's font size, maintaining visual harmony as text scales.