Px to Em Converter
Convert CSS sizes among pixels, ems, points, and percentages using a base font size you control.
Conversion inputs
Live equivalents
Conversion breakdown
| Unit | Converted value | Relationship |
|---|---|---|
| Pixels (px) | 32 | base size × em |
| Ems (em) | 2 | pixels ÷ base size |
| Points (pt) | 24 | pixels × 0.75 |
| Percent (%) | 200 | em × 100 |
How to use this Px to Em Converter
What this calculator does
This calculator expresses one CSS size in four equivalent forms: Pixels, Ems, Points, and Percentage. Its main purpose is to translate a size that you already know into the unit a stylesheet or design system expects. The relative em and percentage results depend on your chosen Base size; the px-to-pt relationship follows the CSS absolute-length ratio. It does not predict physical screen size, device-pixel density, or how a particular typeface will look. For the standards context behind these units, see MDN's guide to CSS length values and relative units.
When to use it
Use the converter when translating a pixel-based mockup into relative CSS, checking whether an em value matches an existing px token, converting print-oriented point values into CSS pixels, or confirming that an em-based component scale corresponds to the percentage you expect. It is especially useful when auditing a design system with a known parent font size.
How to calculate
- The calculator opens with a ready-to-use demonstration: Base size = 16 px, Object's size = 24, and Object unit = Points (pt). The results and a validated example XLSX are available immediately.
- Replace Base size with the pixel size that should represent 1 em in your context. Enter the size you want to convert under Object's size.
- Choose the matching Object unit. When you switch units, the current object value is converted so the represented size stays the same.
- Read Ems as the primary relative result, then compare Pixels, Points, and Percentage. The Conversion breakdown table repeats those values with the relationship used for each row.
- Select Download Excel to export the current inputs and typed results. Reset clears the demonstration/input data; after Reset, Excel export is disabled until both required numeric fields contain a complete valid state again.
Input guide
Base size is required, uses pixels, and accepts a positive decimal with a period as the decimal separator, such as 16 or 18.5. It must be greater than zero because em conversion divides by this value. A larger base makes the same fixed pixel size equal fewer ems and a lower percentage. Do not enter “16px”, commas, scientific notation, or a negative value in the field; the px unit is shown separately.
Object's size is required and accepts a non-negative decimal in the currently selected unit; 24 is the startup example. Zero is allowed and converts to zero in every unit. Higher values increase every equivalent proportionally. Enter only the number, because the unit is controlled separately. Object unit is required and can be Pixels (px), Ems (em), Points (pt), or Percent (%). Changing this selector converts the current numeric value rather than merely relabeling it, so a round trip preserves the represented size apart from displayed decimal precision.
Output guide
Ems measures the object as a multiple of the base font size; 1 em equals one base size in this calculator. Pixels is the canonical absolute CSS-pixel value used internally. Points applies the CSS ratio 1 px = 0.75 pt. Percentage is the same relative scale as em multiplied by 100, so 1 em corresponds to 100%. These are exact unit identities under the stated CSS model, not recommendations about an ideal font size. A zero input makes all four zero; a high em or percentage means the object is large relative to the chosen base, not necessarily large on a physical display.
In the Conversion breakdown table, Unit names each representation, Converted value reports the numeric equivalent, and Relationship shows how that row connects to the canonical pixel or em value. The summary pills at the top restate the current base, entered unit/value, and em scale for quick scanning.
Worked example
With the startup values, 24 pt is converted to pixels using the CSS point ratio: 24 ÷ 0.75 = 32 px. The em value is then 32 ÷ 16 = 2 em, and the percentage is 2 × 100 = 200%. Therefore the first-open result is 32 px = 2 em = 24 pt = 200%. Those same typed values are used in the on-screen breakdown and the startup workbook.
How the conversion model works
The model first resolves the entered object size to CSS pixels. Pixel inputs are already canonical. An em input is multiplied by the base size, a percentage input is divided by 100 and then multiplied by the base, and a point input is divided by 0.75. From that one canonical pixel value, the calculator derives the other units. This avoids chained display-rounding errors. The W3C specification defines the fixed CSS absolute-length relationship in which 96 px equals 1 inch and 72 pt equals 1 inch, which is why 1 px equals 0.75 pt.
em = px ÷ base px
pt = px × 0.75
% = em × 100
Choosing the right base size
For an em conversion, “base” means the font size that the em should be relative to in the CSS context you are modeling. When em is used in a font-size declaration, it is relative to the inherited font size; elsewhere, em generally resolves from the element's computed font size according to the property. A common browser default is 16 px, but real pages can establish different parent sizes. MDN's font-size reference explains how relative font sizes are resolved. Use the actual parent or design-token value when precision matters instead of assuming every context uses 16 px.
Common conversion mistakes
- Confusing CSS pixels with device pixels. The calculator works with CSS px, not a monitor's physical pixel grid or PPI.
- Using the wrong em base. The same 32 px is 2 em at a 16 px base but only 1.777778 em at an 18 px base.
- Reversing the pt ratio. In CSS, 1 px is 0.75 pt, so 24 pt corresponds to 32 px.
- Treating percent as an absolute length everywhere. Here the percentage is the font-size-style relative equivalent where 100% corresponds to 1 em; CSS percentage behavior can depend on the property.
- Pasting formatted numeric strings. Use a period for decimals and leave unit symbols out of numeric fields so invalid input is rejected rather than silently reinterpreted.