PT to PX Converter

The PT to PX Converter turns points into pixels — and pixels back into points — for both screen and print work. Most converters give you a single number based on the fixed CSS ratio of 1pt = 1.3333px. That answer is correct in a browser and wrong almost everywhere else, because a point is a physical unit and the number of pixels inside it depends on the resolution of the output. This tool gives you both: the CSS value a browser will actually render, and the device-pixel value at 72, 150, 300, 600 or any custom DPI, plus the true physical size in millimetres and inches on a real ruler.

PT to PX Formula

One point is defined as exactly one seventy-second of an inch. One inch contains as many pixels as the output resolution says it does. Put those two facts together and the conversion falls out:

On the web the resolution is not a variable. The CSS specification pins 1in = 96px by definition, so the browser always uses 96 and the formula collapses to a constant:

That is why 12pt is 16px in every browser on every device, whether it is a 1× laptop panel or a 3× phone screen. The CSS pixel is a reference unit, not a hardware pixel.

One Inch, Three Names

The easiest way to keep the units straight is to remember that they all describe the same physical distance. Each bar below is exactly one inch wide:

PT to PX Conversion Table

The web column is the one you want for CSS. The 300 DPI column is the one you want when exporting a PDF to a raster image, laying out a print file, or sizing text in a bitmap that will be printed.

Why the Same Point Size Gives Different Pixel Counts

This is the single thing that trips people up, so it is worth stating plainly. The physical size never changes: 12pt is one sixth of an inch, always. What changes is how finely you are sampling that inch.

• 72 DPI — the historical Macintosh screen resolution, chosen precisely so that 1pt = 1px. Still the default in some legacy image pipelines, which is why 12pt text sometimes exports at a disappointing 12 pixels.
• 96 DPI — the Windows default and the reference resolution that CSS is defined against. This is the web answer and the one your browser uses.
• 150 DPI — draft print quality, or large-format work meant to be read from a distance.
• 300 DPI — the commercial print standard. A 12pt caption in a 300 DPI export needs 50 pixels of height, not 16.
• 600 DPI — fine line art, high-end press work, and laser output where hairlines matter.

If you have ever exported artwork at "the right size" and found the type came out soft and pixelated, this ratio is almost always the cause: the layout was measured in points and the raster was generated at 72 or 96 DPI instead of 300.

What a Point Size Actually Measures

A 12pt font is not 12 points of visible letter. The point size describes the em square — the invisible design grid a typeface is drawn on. How much of that square the letters occupy is entirely up to the type designer, which is why two fonts set at the same point size can look very different in scale.

Should You Use pt or px in CSS?

For screen styles, use px or rem. Points are an absolute unit in CSS, exactly like px, so they carry the same accessibility drawback: text sized in pt ignores the visitor's browser font-size preference. Using pt also invites confusion, because a colleague reading the stylesheet may assume it means physical points on the output device when it does not.

Where pt genuinely earns its place is a print stylesheet, because the output really is measured in inches:

@media print {
  body { font-size: 11pt; line-height: 1.45; }
  h1   { font-size: 24pt; }
  h2   { font-size: 18pt; }
  .no-print { display: none; }
}

Browsers map those points against the real paper size when generating the print job, so an 11pt body really does come out as 11pt on the page — the same size a word processor would produce.

Converting a Word or InDesign Document to the Web

1. Take the point sizes straight out of the document's style sheet — typically 11pt body, 16pt subheads, 24pt headings.
2. Paste them all into the values field at once, separated by commas, with the resolution left at 96.
3. Read off the CSS pixel column. 11pt becomes 14.67px, 16pt becomes 21.33px, 24pt becomes 32px.
4. Round to a clean scale before shipping. Print typography tolerates odd fractions; web type scales read better at whole or half pixels, so 14.67px usually becomes 15px or 16px.
5. Convert the final pixel values to rem if your design system uses relative units.

Related Absolute CSS Units

Points are one of a small family of absolute units that CSS defines against the same 96-pixel inch. Knowing the whole family makes conversions trivial:

• 1in = 96px = 72pt = 6pc = 25.4mm
• 1pc (pica) = 12pt = 16px
• 1cm = 37.795px ≈ 28.35pt
• 1mm = 3.7795px ≈ 2.835pt
• 1Q (quarter-millimetre) = 0.945px

How to Use This Converter

1. Pick a direction: pt → px or px → pt.
2. Enter your values: one number, or a whole type scale separated by commas or spaces (up to 20 at a time). Trailing units such as 12pt are accepted and ignored.
3. Set the output resolution: keep 96 DPI for CSS and web work, or tap a chip for 72, 150, 300 or 600 DPI.
4. Click Convert: read the result, the DPI comparison, the true-size type preview, the millimetre ruler and the reference ladder.
5. Copy the CSS: one button copies every font-size declaration with the source point value kept in a comment.

Frequently Asked Questions

How do I convert pt to px?

Multiply the point value by the output resolution and divide by 72, because one point is one seventy-second of an inch. On the web the resolution is fixed at 96 DPI, so px = pt × 1.3333. For example 12pt is 16px.

How many pixels is 12pt?

In CSS and in any browser, 12pt is exactly 16px. In a 300 DPI print or image file the same 12pt type is 50 pixels tall, and at 600 DPI it is 100 pixels, because the pixel count scales with the resolution while the physical size stays the same.

Is 1pt always 1.3333px?

It is always 1.3333px in CSS, because the CSS specification pins one inch to exactly 96 pixels. It is not true for raster output: at 300 DPI one point is 4.1667 device pixels, and at 72 DPI one point is exactly one pixel.

What is the difference between pt and px?

A point is a physical typographic unit equal to one seventy-second of an inch, used in print, word processors and desktop publishing. A pixel is a display unit. In CSS the pixel is also anchored to a physical reference of one ninety-sixth of an inch, which is why the two units convert by a fixed ratio on the web but not in image files.

Should I use pt or px in CSS?

Use px or rem for screen styles and reserve pt for print stylesheets. Points are an absolute physical unit, so type set in pt ignores the visitor's browser font-size preference. Inside an @media print block, pt is the natural unit because the output really is measured in inches.

What DPI should I use for print?

300 DPI is the standard for commercial print and photo-quality output, 150 DPI is acceptable for drafts and large-format work viewed from a distance, and 600 DPI is used for fine line art and high-end press work. Set the resolution field to the value your printer or export dialog expects.

Why is 12pt text not 12 points tall on screen?

The point size describes the em square of the font, which is the design grid the letters are drawn on, not the height of any individual glyph. Cap height is typically about 70% of the em size and lowercase x-height about 50%, so 12pt capitals measure roughly 8.4pt tall.

Does device pixel ratio change the pt to px conversion?

No. On a 2× or 3× display the browser still reports 12pt as 16 CSS pixels and then renders those 16 CSS pixels using 32 or 48 hardware pixels. The CSS pixel is a reference unit, so your stylesheet numbers never change — the extra hardware pixels only make the same size look sharper.

Additional Resources

• CSS length units - MDN
• Absolute lengths - W3C CSS Values