How to convert a CSS font size
Enter the numeric size you already have, choose whether it is px, em, pt or %, and set the reference font size in pixels. Then choose Convert font size. The result panel shows the same computed font size in all four supported units. Each row includes a copy button, so you can paste a value such as 1.5em or 18pt directly into a stylesheet.
The reference field matters for em and percentage conversions. It is the pixel size that this page treats as 1em and 100%. If a parent has font-size: 20px, use 20 as the reference when converting a child font-size expressed in em or %. If your project uses another parent size, change the reference and convert again. The px-to-pt relationship does not change when the reference changes.
What the converter calculates
Every input is first resolved to a pixel value. A px input is already resolved. An em input is multiplied by the reference size. A percentage input is multiplied by the reference and divided by 100. A point input uses the CSS absolute-unit relationship: 1in equals 96px and 72pt, so 1pt equals 96 ÷ 72px. The pixel value is then expressed in each target unit.
The formulas are px = em × reference, px = % × reference ÷ 100, and px = pt × 96 ÷ 72. The reverse formulas divide by the same factors. Calculations retain their internal precision, while displayed and copied values use a practical rounded form without floating-point residue such as 0.30000000000000004. Very small non-zero values remain visible instead of becoming zero.
Two checked conversion examples
Example 1: enter 24, choose px, and leave the reference at 16px. The results are 24px, 1.5em, 18pt and 150%. The em result comes from 24 ÷ 16, the point result from 24 × 72 ÷ 96, and the percentage result from 24 ÷ 16 × 100. Converting 1.5em with the same 16px reference returns 24px.
Example 2: enter 125, choose %, and set the reference to 20px. The result is 25px, 1.25em, 18.75pt and 125%. Change only the reference to 16px and convert again: the same 125% now resolves to 20px, 1.25em and 15pt. This demonstrates why a relative value cannot be converted accurately without stating its font-size context.
When this tool is useful
Use the converter when translating a design handoff in pixels into relative CSS, checking a typography token against a parent font size, or converting a print-oriented point value for a web stylesheet. It is also useful when reviewing inherited CSS: enter the computed parent size as the reference to see what an em or percentage declaration resolves to.
The tool deliberately keeps the context visible instead of assuming that every project uses 16px. Sixteen pixels is a common browser starting point, but authors and users can change font settings. Record the reference alongside the converted value when another developer needs to reproduce the calculation.
Limits and common mistakes
This is a font-size converter, not a general CSS parser. It does not read calc(), clamp(), variables, stylesheets, rem, viewport units, container units or inherited DOM styles. For em, the relevant reference depends on how the CSS property defines it; this page uses the explicit pixel reference you provide. It does not inspect the actual parent element.
Percentage values also depend on the property. This page interprets % only as a font-size percentage, where 100% equals the stated reference size. Do not use its percentage result as a conversion for width, height, transforms or another property with a different containing block. Negative font sizes and a zero reference are rejected because they cannot represent a valid font-size conversion here.
Point conversion follows CSS units, not the pixel dimensions of text in an image editor or a printer’s device pixels. A glyph’s visible height also depends on the font metrics, line-height and rendering. Equal computed font-size values therefore do not promise identical-looking letter shapes across fonts.
Using the copied output
Copy the unit that matches your stylesheet strategy, then test it in the real component and at enlarged browser text settings. Relative units can support scalable typography, but conversion alone does not guarantee accessible contrast, line length, wrapping or zoom behavior. Keep the original value or design token available when a rounded CSS value needs review.
All conversion math runs in this browser. The page does not need an account or send the values you enter as analytics parameters. A blocked clipboard does not lose the result: select the visible value and copy it with your browser or keyboard command.
All supported CSS font-unit conversion directions
| Conversion direction | Formula at a 16px reference | Example |
|---|---|---|
| Pixels to Em (px to em) | em = px × 0.0625 | 1px = 0.0625em |
| Pixels to Points (px to pt) | pt = px × 0.75 | 1px = 0.75pt |
| Pixels to Percent (px to %) | % = px × 6.25 | 1px = 6.25% |
| Em to Pixels (em to px) | px = em × 16 | 1em = 16px |
| Em to Points (em to pt) | pt = em × 12 | 1em = 12pt |
| Em to Percent (em to %) | % = em × 100 | 1em = 100% |
| Points to Pixels (pt to px) | px ≈ pt × 1.333333333 | 1pt ≈ 1.333333333px |
| Points to Em (pt to em) | em ≈ pt × 0.08333333333 | 1pt ≈ 0.08333333333em |
| Points to Percent (pt to %) | % ≈ pt × 8.333333333 | 1pt ≈ 8.333333333% |
| Percent to Pixels (% to px) | px = % × 0.16 | 1% = 0.16px |
| Percent to Em (% to em) | em = % × 0.01 | 1% = 0.01em |
| Percent to Points (% to pt) | pt ≈ % × 0.12 | 1% ≈ 0.12pt |
CSS font unit converter FAQ
Is 16px always equal to 1em?
Only when the relevant font-size reference is 16px. If the reference is 20px, 1em resolves to 20px. Enter the actual reference for the element you are working with.
Why does changing the reference affect em and % but not pt?
Em and font-size percentages are relative to a font-size context. CSS px and pt use a fixed absolute-unit ratio, so their relationship stays 96px = 72pt regardless of the reference field.
Can I use the % result for width?
No. The converter defines % as a font-size percentage. Width percentages resolve against a containing block and require a different reference and layout context.
Why can the copied value be rounded?
The interface follows the site’s practical display rule and removes unnecessary decimal noise. The converter calculates from the unrounded value; test the copied value in the target component if an unusually fine typographic scale is critical.
Does this convert rem too?
No. This page is intentionally limited to px, em, pt and font-size %. A rem value uses the root element’s computed font size, whereas em can use another context.