Free · Tech and electronics converters 💾

CSS Pixels, em, Points & Relative Percentage

Convert a positive CSS size to em, points and percentage using an explicit pixel basis.

  • Formula & worked example
  • Private in your browser
  • No signup
Go to tool

Calculator inputs

Loading calculator…

How to use this calculator

  1. Enter the known values in the units shown. Results update as you type.
  2. Where results are editable, change one to solve backwards. Lock a value to hold it fixed.
  3. Use the worked example to check the method. Reset restores the starting fields.

Private by default

Inputs and results stay in this browser tab. Bookify does not upload or store the values you enter.

Formula and method

With a 16 px basis, 24 CSS px equals 1.5 em, 18 pt and 150% of the basis.

em = px ÷ basis; pt = (3/4)px; percentage = 100 × px ÷ basis

Worked example

Enter these known values and leave the other values blank.

Reference size in CSS pixels
16 px
Size in CSS pixels
24 px
Relative size in em
1.5 em
Size in CSS points
18 pt
Percentage of the reference size
150 %

Assumptions and limitations

  • All sizes and the reference basis must be positive in this model. Zero and negative lengths, although valid in some CSS contexts, are outside its retained input domain.
  • CSS fixes 1 inch at 96 px and 72 pt, so one CSS pixel is 0.75 pt. A CSS pixel need not equal one physical display pixel.
  • The reference basis is supplied explicitly. The meaning of em and percentages depends on the CSS property and context; this tool does not inspect computed browser styles.
  • For font-size, an em or percentage commonly refers to the inherited font size. Other properties may use another reference; rem refers to the root font size and is not automatically inferred.

Common questions

Does 16 CSS px always occupy 16 screen pixels?

No. Device pixel ratio, zoom and rendering scale can change the physical pixel count while the CSS size stays the same.

What should I enter as the basis?

Enter the pixel size of the reference required by the property you are converting. A numeric conversion alone cannot determine that context.

References

Bookify stores the CSS percentage field in percentage points because its equations already divide by 100; this corrects the captured factor-of-100 percentage error.

Explore tech and electronics converters 💾 or browse all conversion calculators.