Typography Converter

1. Enter the value you want to convert.
2. Choose the from unit and the to unit.
3. Set the base font size if you use em, rem or percent (default 16px).
4. Read the result, plus pixels and points.

Here is what each result means:

Typography and web design use several units to describe text and layout sizes. Some are absolute, with a fixed real-world size, and some are relative, scaling with a base font size. Knowing how they relate helps you move a design between print and screen, or between a mock-up in points and a stylesheet in pixels.

The absolute units are pixels, points, picas, inches, centimetres and millimetres. On the web these are tied together by a fixed reference of 96 pixels per inch, so 1 inch is 96 pixels, 1 point is one seventy-second of an inch, and 1 pica is 12 points. A point, the classic print unit, works out to about 1.333 pixels at this reference.

The relative units are em, rem and percent, and they depend on a base font size. At the common browser default of 16 pixels, 1em and 1rem are both 16 pixels, and 100 percent is also 16 pixels. Change the base and these scale with it, which is what makes them so useful for responsive, accessible designs that adapt to the reader's settings.

This converter bridges every unit through the pixel. It turns your value into pixels, using the base font size for the relative units, then into whichever unit you choose. Setting the right base font size is the key to getting em, rem and percent conversions to match your stylesheet.

It converts through the pixel, at 96 pixels per inch.

1. Your value is turned into pixels, using 96 per inch for absolute units.
2. For em, rem and percent, the base font size sets how many pixels each unit is worth.
3. Dividing by the target unit's pixel value gives the result.

For the number side, see the base converter and the cm to inches converter.

Convert 16px to points, at a 16px base.

Result: 16 pixels is 12 points, since a point is 1.333 pixels. At the same 16px base, 1em and 1rem are both 16 pixels, and 100 percent is 16 pixels too.

Absolute units are fixed at 96 pixels per inch.

A pica is 12 points, and a point is one seventy-second of an inch, so an inch holds 72 points or 6 picas. These print units map cleanly onto pixels through the 96-per-inch reference the web uses.

The two kinds of unit behave differently when the base size changes.

Absolute units stay the same size whatever the base, while relative units grow and shrink with it. That is why em, rem and percent are preferred for accessible design: if a reader increases their default text size, relative units scale up with it, and fixed pixel sizes do not.

The Two Units

The ratio between the from-unit and to-unit sets the result; absolute units are fixed at 96 DPI.

The Base Font Size

em, rem and percent all depend on the base, so setting it correctly is essential.

The 96-DPI Reference

The web assumes 96 pixels per inch; print at other resolutions would differ.

Web Design

Turn a design in points or pixels into em or rem for a stylesheet.

Print to Screen

Convert print sizes in points and picas into pixels.

Accessibility

See how a fixed pixel size compares with a relative one at a given base.

1. Forgetting the Base Size

em, rem and percent are meaningless without a base font size. Set it to match your CSS.

2. Confusing Em and Rem

Here both use the base you set. In real CSS, em is relative to the parent while rem is relative to the root.

3. Assuming a Different DPI

The web uses 96 pixels per inch. Print at 72 or 300 DPI would give different pixel counts.

4. Mixing Points and Pixels

A point is 1.333 pixels, not one. Treating them as equal distorts sizes.

5. Wrong Direction

Check which unit is the from and which is the to; swapping them inverts the result.

Conversions use the web standard of 96 pixels per inch and the base font size you set.

About 1.333 pixels, at the web standard of 96 pixels per inch. A point is one seventy-second of an inch, and an inch is 96 pixels.

Divide the pixel value by the base font size. At a 16 pixel base, 24 pixels is 24 divided by 16, which is 1.5em.

In CSS, em is relative to the parent element's font size, while rem is relative to the root. This converter uses the base you set for both.

16 pixels in most browsers, which is why 1rem is usually 16 pixels. You can change the base here to match your own stylesheet.

A pixel is 0.75 points, at 96 pixels per inch. Equivalently, a point is 1.333 pixels, and 16 pixels is 12 points.

It is a long-standing reference that ties CSS absolute units to pixels. It does not mean your screen is exactly 96 dots per inch, only that the units use that ratio.

A pica is a print unit equal to 12 points, or 16 pixels at 96 DPI. Six picas make an inch. It is used in typography and layout.

Relative units like rem scale with the reader's settings, which is better for accessibility. Pixels are fixed. Many designs use rem for text and px for fine details.

No. The calculation runs in your browser and nothing you enter is stored or sent anywhere, unless you choose Save, which keeps the result only on this device.

• CSS values and units (Wikipedia).
• Point (typography) (Wikipedia).
• Pixel (Wikipedia).