Pt to Px Online: Convert Points to Pixels Without Guessing the DPI

CodexFuse Team · 2026-11-04T08:05:31.142Z · 11 min read min read

Convert pt to px accurately: px = pt x DPI / 72, so 12 pt = 16 px at 96 DPI, with a worked print-to-web example and the free CodexFuse tool.

Pt to px conversion turns a point size from a print document into the pixel size a screen actually renders. A point is a physical unit, defined as 1/72 of an inch, while a pixel is a display unit whose physical size depends on the screen and the DPI setting you assume. That mismatch is why the same "12 pt" text can look correct in a PDF and wrong on a website.

If you copy a point size straight into CSS as pixels, you are guessing. This guide shows the exact formula, the DPI values that change the answer, and a worked example that takes a print brief all the way to a stylesheet. You can check every number below with the free Pt to Px converter in seconds.

What Is Pt to Px Conversion?

Pt to px conversion is the calculation that translates a font or length measured in points into pixels, using the formula px = pt x DPI / 72. At the web standard of 96 DPI, 12 pt becomes 16 px, 18 pt becomes 24 px, and 24 pt becomes 32 px. The DPI value is not optional detail; it is the whole conversion.

Points come from print, where an inch is fixed. Pixels come from screens, where density varies. When a designer hands over a print file and a developer builds the web version, pt to px is the bridge between those two worlds.

Why Do Points and Pixels Disagree?

Points and pixels disagree because one measures physical size and the other measures screen rendering, so the same number means different things in each system. A point is always 1/72 inch, but a pixel only gains a physical size once a DPI value is chosen, which is why 12 pt equals 12 px at 72 DPI and 16 px at 96 DPI.

Three things cause most of the confusion:

• Different origins: points were built for paper, where an inch is fixed; pixels were built for screens, where density varies wildly.
• Hidden DPI assumptions: design tools, browsers, and printers each assume a DPI, and they do not always assume the same one.
• Rounding: many conversions produce fractions, such as 11 pt at 96 DPI giving 14.67 px, and rounding too early shifts layouts.

Always state the DPI alongside any pt to px result. A bare answer like "12 pt = 16 px" is only true at 96 DPI.

How Do You Convert Pt to Px?

To convert pt to px, multiply the point value by the DPI and divide by 72, using the formula px = pt x DPI / 72. For web work at 96 DPI this simplifies to px = pt x 1.333, so you multiply any point size by 1.333 to get its CSS pixel equivalent.

Work through it once by hand so you trust the tool:

1. Note the point size: take the size from the brief, for example 18 pt for a subheading.
2. Pick the DPI: use 96 for screens and CSS, 72 for a one-to-one print reference, or 300 for high-resolution print output.
3. Apply the formula: at 96 DPI, 18 x 96 / 72 = 24 px.
4. Round last, not first: keep two decimal places through the calculation, then round only the final pixel value.

In the 96 DPI column, every point size grows by a third — so 12 pt body text becomes a comfortable 16 px on the web.

Worked Example: From a Print Brief to a Web Stylesheet

Consider a clearly fictional scenario. A freelance designer, Sara, receives a two-page brand sheet from a small consultancy. The brief specifies headings at 24 pt, subheadings at 18 pt, body text at 11 pt, and captions at 8 pt. Her job is to rebuild the same hierarchy as a landing page, and the client wants the web version to feel identical to the print version.

Sara converts each size at 96 DPI, the CSS reference:

• Headings: 24 pt x 96 / 72 = 32 px.
• Subheadings: 18 pt x 96 / 72 = 24 px.
• Body text: 11 pt x 96 / 72 = 14.67 px, rounded to 15 px.
• Captions: 8 pt x 96 / 72 = 10.67 px, rounded to 11 px.

She then checks the results in the Pt to Px tool, which also shows the centimetre, millimetre, and inch equivalents in the same view. Her final stylesheet reads: headings 32 px, subheadings 24 px, body 15 px, captions 11 px, with line heights set to 1.5 for body text. The client approves the page on the first review, because the relative hierarchy survived the move from paper to screen intact.

The discipline matters more than the arithmetic: Sara used one DPI throughout, rounded only at the end, and kept the ratios between levels intact.

What Changes When You Change the DPI?

Changing the DPI changes the pixel result proportionally, because the formula multiplies by DPI, so doubling the DPI doubles the pixels. A 12 pt font is 12 px at 72 DPI, 16 px at 96 DPI, and 50 px at 300 DPI, which means the same point size describes three very different pixel values depending on context.

Use this decision rule:

• 96 DPI for the web: this is the CSS reference and the right default for stylesheets, mockups, and browser work.
• 72 DPI for a baseline: useful when you want a direct one-to-one comparison, since 1 pt equals exactly 1 px here.
• 150 or 300 DPI for print: use these when exporting images or layouts that will actually be printed, not when writing CSS.

A related conversion trips up many people: DPI and PPI are often used interchangeably in casual conversation, but they describe different things in strict terms. If you need to untangle them, the DPI to PPI converter walks through the distinction with its own worked numbers.

Common Mistakes That Make Text Look Wrong

Most pt to px errors are assumption errors, not maths errors:

• Copying points into CSS unchanged: writing font-size: 12pt in a stylesheet is valid CSS, but it renders differently from 12 px and confuses anyone maintaining the file later.
• Mixing DPI values mid-project: converting headings at 96 DPI and body text from a 72 DPI export silently compresses the hierarchy.
• Forgetting line height and spacing: point sizes in print include leading; converting only the font size and keeping web defaults can make text feel cramped or loose.
• Trusting screenshots for size: a screenshot's pixel dimensions depend on the device that captured it, so measuring text from a screenshot is unreliable.

Preview converted sizes in a real browser first — the free font previewer shows them in different system fonts with copy-ready CSS.

When Should You Not Rely on a Pt to Px Conversion?

You should not rely on a pt to px conversion when the output will be viewed on high-density screens, printed at an unknown resolution, or sized responsively, because a single fixed pixel value cannot capture those cases. In those situations the conversion is a starting point for testing, not a final answer you can trust blindly.

Be honest about the limits:

• Retina and high-DPI screens: a CSS pixel is not a device pixel, so text can render sharper but not physically larger; test on a real device, not only on a desktop monitor.
• Responsive layouts: a fixed 32 px heading that looks right on desktop may overwhelm a phone screen; use relative units or breakpoints alongside your converted sizes.
• Print unknowns: if the printer's DPI is not specified, the pixel count for a print file is a guess, and you should confirm it before exporting final artwork.
• Accessibility: users who scale text in their browser will override your pixel sizes, which is correct behaviour; design the hierarchy so it still reads well at 125% or 150% scaling.

For general font-size work beyond points, the font size converter covers px, em, rem, and percent in one place, and the image DPI checker helps verify whether an image will actually print cleanly before you commit to it.

How to Use the Free Pt to Px Tool

The tool page keeps the workflow to three steps, which match the live page exactly: enter the point value, choose the DPI, and read the pixel result. Below the result, the page shows the equivalents in other units and a quick reference table, so one conversion answers the follow-up questions too.

1. Enter pt: type the point size from your brief into the input field.
2. Choose DPI: pick 96 for web and CSS work, 72 for a one-to-one reference, or a print DPI for print output.
3. See px: read the converted pixel value plus its cm, mm, and inch equivalents instantly in your browser.

The tool is free and unlimited according to its FAQ, but the page prompts you to log in or create a free account — worth knowing before you share the link with a client.

Frequently Asked Questions

How many pixels is 12 pt?

At the web standard of 96 DPI, 12 pt equals 16 px. At 72 DPI it equals 12 px, and at 300 DPI it equals 50 px. Always check the DPI before quoting a number, because the DPI is what decides the answer.

What is the pt to px formula?

The formula is px = pt x DPI / 72. For web work at 96 DPI it simplifies to px = pt x 1.333. So 18 pt becomes 24 px, and 10 pt becomes 13.33 px.

Is 1 pt always equal to 1.333 px?

No. That ratio only holds at 96 DPI. At 72 DPI, 1 pt equals 1 px exactly, and at 300 DPI, 1 pt equals about 4.17 px. The ratio follows the DPI, not the point.

Should I use pt or px in CSS?

Use px, em, or rem in CSS for screen work. Points are a print unit, and using pt in a stylesheet makes the code harder to maintain and harder to predict across devices. Convert points to pixels first, then write the stylesheet in pixels or relative units.

Why does my converted text still look different on screen?

Font rendering, line height, letter spacing, and screen density all affect how text looks, not just its size. A correct conversion preserves the intended size, but you still need to check the result in the actual browser and font before signing it off.

Is the CodexFuse Pt to Px tool really free?

Yes, according to the tool page FAQ the converter is free and unlimited. The page asks you to log in or create a free account to use it, so keep that step in mind when sharing the Pt to Px converter link with clients or teammates.

Convert It Once, Then Build on It

Pt to px conversion is a small job that causes outsized trouble when done carelessly. State the DPI, apply px = pt x DPI / 72, round only at the end, and check the result in a real browser.

If the site behind that stylesheet is also eating your time — separate hosting bills, email that fails, security patches you never get to — move it to CodexFuse. Sign up, bring your hosting, business email, security, and backups onto one fully managed platform on credits, with no subscriptions and no server babysitting, and get back to the design work itself. Start today at CodexFuse and let the platform handle the infrastructure while you handle the work.