This simple online pixel (PX) values to EM units converter tool calculate precise EM values from pixels for better CSS scaling and accessibility. In CSS, pixel and em are units used to define sizes for elements dimensions, fonts and layout structure.
- Pixels (px) are a fixed unit of measurement, which represent the exact number of dots on a screen. It does not adapt to other elements on the page or user display settings.
- Em units (em) are relative units based on the font size of the element or its parent element. It is used in responsive and flexible layouts. One em unit is equal to current font-size.
Pixel to Em Conversion Formula
Following is formula to convert pixel to em.
em = px / font-size
For example, if base font-size is 16px, then setting an element to 1.5 em will make it 24px ( 1.5 * 16 ). This way em units ensure responsiveness.
Pixel to Em Converter
Following is a digital converter for converting pixel to em and vice-versaFont Size (px):Pixels:EM:
Note: Default font-size is 16px. So while converting the px to em, you need to select your base value (default is 16) for the pixel and use it in the formula to calculate.
Benefits of Using EM Units
- Responsive Scaling: Em units are based on fontsize of parent, So any adjustments to the base fontsize will automatically resize all em based elements.
- Consistent Proportionality: When we set entire layout in em units, changing base font will proportionally adjust all the sizes in page.
- User Accessibility: Some visually impaired user may increase font-size in browser settings for better visibility, in this cases our layout defined in em units will also scale accordingly.
To learn about units in CSS, checkout article on CSS measurement units.
CSS PX to EM Conversion Table
Following table shows the corresponding em values to px values, considering the base pixel value as 16px:
| PX | EM |
|---|---|
| 5px | 0.3125em |
| 6px | 0.3750em |
| 7px | 0.4375em |
| 8px | 0.5000em |
| 9px | 0.5625em |
| 10px | 0.6250em |
| 11px | 0.6875em |
| 12px | 0.7500em |
| 13px | 0.8125em |
| 14px | 0.8750em |
| 15px | 0.9375em |
| 16px | 1.0000em |
| 17px | 1.0625em |
| 18px | 1.1250em |
| 19px | 1.1875em |
| 20px | 1.2500em |
Leave a Reply