PT to PX Converter

What Is a PT to PX Converter?

A PT to PX converter translates typographic points into screen pixels, giving you exact values for whatever display or DPI you are targeting. Points come from print. Pixels live on screens. Bridging the two is something every designer and front-end developer has to do sooner or later.

The conversion is not a fixed ratio. It depends entirely on screen density. At 72 dpi (the old Mac standard), 1pt equals 1px exactly. At 96 dpi (the Windows default), 1pt equals roughly 1.333px. On a Retina display at 144 dpi, that same 1pt becomes 2px. Getting this wrong means type that looks right in Figma can render noticeably smaller or larger in the browser.

When do you actually need this?

• Translating font sizes from a print PDF or brand guide into CSS values
• Matching type specs from design tools that work in points (Illustrator, InDesign)
• Verifying sizes across standard and high-density screens
• Converting pt values to em or rem for scalable, accessible CSS

The formula

The math is straightforward: px = pt × (DPI ÷ 72). The base of 72 comes from the traditional typographic point standard. The table below shows how the same pt value shifts across common screen densities.

For web work, em and rem values are calculated against a 16px base font size, which is the browser default. If your project uses a different root size, adjust accordingly. The W3C CSS specification defines the relationship between absolute length units including pt and px.

What Is the Difference Between PT and PX?

PT and PX are both length units, but they measure completely different things. PT is tied to physical inches. PX is tied to screen resolution. Using them interchangeably without converting produces different visual results on almost every device.

What Is a Point (PT)?

PT is an absolute typographic unit equal to 1/72 of an inch, originating from metal-type printing presses in the 18th century. The unit survived into digital design because print tools like Adobe Illustrator, InDesign, and Microsoft Word default to it.

In CSS, PT is technically an absolute unit. It renders based on the screen's physical PPI. On a 72 PPI screen, 1pt = 1px. On a 96 PPI screen, 1pt = 1.333px.

PT also has a second life in iOS development. Apple's UIKit and SwiftUI use "points" as their layout unit, but those are not the same as typographic points. They're logical units that scale with device pixel density, a source of confusion in design handoffs.

What Is a Pixel (PX)?

Pixels are the most commonly used CSS unit because web design standards are built around them (DEV Community).

PX in CSS is a reference pixel, not a physical screen pixel. The W3C defines 1 CSS pixel as 1/96 of an inch at standard viewing distance. This reference holds constant regardless of the screen's actual pixel density.

On a standard 96 PPI Windows display, 1 CSS pixel maps to 1 physical screen pixel. On a 192 PPI Retina display, 1 CSS pixel maps to 4 physical pixels (2×2). The browser handles the scaling automatically, which is why PX-based layouts look sharp on both low and high-density screens.

Average desktop PPI increased to 105 in 2024 from 92 in 2020, meaning the gap between CSS pixels and physical pixels is widening (Gitnux, 2024).

Why the Two Units Are Not Directly Interchangeable

1pt does not equal 1px except on a 72 PPI screen. At every other resolution, the values diverge. The exact conversion depends entirely on the output device's pixel density.

Key difference: PT defines size in physical space. PX defines size in screen space. Pasting a PT value directly into screen CSS without converting is one of the most common reasons font sizes look off between a designer's print comp and the browser render.

Physical units like PT should only be used for print stylesheets, while PX should be used for screen (GitHub CSS Best Practices).

What Is the PT to PX Conversion Formula?

PX = PT × (PPI ÷ 72). That's the complete formula. PPI is the variable. Change the PPI, and the same PT value produces a different pixel output.

At 96 PPI (the web standard defined by the W3C CSS specification), the multiplier is 1.3333. That makes 12pt = 16px and 24pt = 32px, two of the most referenced type size conversions in web design.

Three common scenarios:

• 72 PPI: multiplier is 1.0 (1pt = 1px exactly)

• 96 PPI: multiplier is 1.3333 (1pt = 1.333px)

• 144 PPI: multiplier is 2.0 (1pt = 2px)

AppMySite confirms: 1 point equals 1.333 pixels on standard screens, while on high-resolution screens 1 point equals 2 or more pixels.

Sub-pixel results are a practical problem. At 96 PPI, 11pt converts to 14.667px. No browser renders 0.667 of a pixel cleanly. Most round up or down, which can cause slightly blurry text at smaller sizes. Always verify your converted values produce whole pixel numbers where possible.

PT to PX Conversion Chart for Common Values

Pre-calculated values at the 3 most common PPI settings, so you're not running the formula manually every time.

Bold values are clean whole-number results at 96 PPI. Those are the PT sizes worth defaulting to in your type scale when targeting web output.

At 96 PPI, the values that produce exact pixel numbers are: 9pt, 18pt, 24pt, 36pt, and 72pt. Body text designers take note: 9pt (12px) and 12pt (16px) are the 2 most common base font sizes on the web.

For PX to PT conversions, divide the pixel value by 1.3333 at 96 PPI.

How Does Screen Resolution (PPI) Affect the PT to PX Conversion?

PPI is the only variable in the conversion formula. Change the PPI and the result changes. This is why the same PT value produces different pixel outputs on a Windows laptop, a Retina MacBook, and a 4K monitor.

The average smartphone PPI reached 420 in 2024, up from 350 in 2019 (Gitnux, 2024). That shift directly affects how designers think about PT-to-PX conversion for mobile targets.

Common PPI Values and Their Multipliers

Standard screens (72 PPI): 1pt = 1px. This was the original Mac display standard and why early web designers used PT and PX interchangeably. Almost no modern screen runs at 72 PPI.

Web standard (96 PPI): 1pt = 1.3333px. This is the CSS reference pixel baseline defined by the W3C. Windows displays and most web browsers use this as their default.

High-DPI screens (144 PPI): 1pt = 2px. Common on mid-range laptops and older Retina displays.

Ultra-high-density (192 PPI+): 1pt = 2.67px or higher. iPhones @3x, Samsung Galaxy flagships, and QHD laptop displays fall in this range. The Samsung Galaxy S24 Ultra runs at 505 PPI (Gitnux, 2024).

Device Pixel Ratio vs. PPI

PPI and device pixel ratio (DPR) are related but different. PPI measures physical pixels per inch. DPR measures how many physical pixels map to 1 CSS pixel.

A 192 PPI screen at 96-PPI CSS baseline has a DPR of 2.0. The browser renders CSS at 96 PPI but maps each CSS pixel to a 2×2 block of physical pixels for sharpness.

The Retina display debuted with the iPhone 4 in 2010, introducing the @2x DPR. @3x followed with the iPhone 6 Plus in 2014 (Wikipedia). Modern iPhones alternate between @2x and @3x depending on the model. This is why PT-based iOS specs always need a DPR multiplier before handing off to web teams.

How Is PT Used in CSS Compared to PX?

PT is rarely used in screen CSS. Its main valid use case is inside @media print stylesheets, where the output is a physical page and PT's inch-based measurement is appropriate.

Physical units like PT and CM should only be used for print stylesheets, while PX should be used for screen (GitHub CSS Best Practices, W3C specification).

PT in Screen CSS

Using PT in screen CSS produces technically valid output, but it's unpredictable. The browser converts PT to pixels based on the screen's reported PPI, and not all screens report PPI accurately.

On a 96 PPI Windows screen, font-size: 12pt and font-size: 16px render identically. On a 120 PPI screen, font-size: 12pt renders as 20px instead of 16px. That variance is why front-end developers avoid PT in screen CSS entirely.

PT in Print CSS

This is where PT belongs. Print stylesheets target paper output with a fixed, known physical size. At 72 DPI, 1pt = 1px, and physical measurements like PT, CM, and inches produce consistent, predictable results.

A standard @media print rule for body text looks like this: font-size: 10pt (roughly 13.3px on screen) maps to a legible 10-point print size, matching what a reader would see in a printed Word document or PDF.

PX in screen CSS:

• Default unit for font-size, padding, margin, border

• Renders consistently at 96 PPI baseline across browsers

• Scales with device pixel ratio on high-density displays

• Supported by all major CSS layout systems including Flexbox and Grid

PT in screen CSS:

• Technically valid but avoids it

• Output varies by screen PPI

• Use only in @media print rules

• Stick to PX, EM, or REM for all screen-based sizing

For PX to EM or PX to REM conversions, the base font size (usually 16px = 1em/1rem) becomes the reference point instead of PPI.

How Is PT Used in iOS and Apple Design Systems?

Apple's iOS design system is built on points, not pixels. This "point" is not the same as the typographic 1/72-inch point used in print. Apple's logical point is a resolution-independent unit that the system automatically scales to physical pixels based on the device's DPR.

Apple's iOS design guidelines state: design in points, then multiply by 2 for Retina screens (@2x) or by 3 for Retina HD screens (@3x) to get the pixel equivalent.

Points in iOS Are Not Typographic Points

Apple's points are logical units. 1 iOS point occupies the same visual space on a non-Retina screen as on a Retina screen, because the OS scales the rendering automatically.

A 44pt touch target (Apple's minimum recommended tappable size per the HIG) measures 44px on a non-Retina screen, 88px on @2x devices, and 132px on @3x devices. The designer specifies 44pt once. The system handles the rest.

Tapptitude confirms: PT stands for points, a simpler method than pixels for calculating element dimensions across iOS devices. Design for the smallest screen your target audience uses.

PT to PX Mapping on Apple Devices

Apple recommends designing at 390pt (iPhone 15/16 frame width) as the base, then verifying at larger widths like 430pt. Learn UI Design confirms: designs scaling down from narrower screens work more reliably than those scaling up.

The Retina display has since expanded to all major Apple product lines including iPhone, iPad, MacBook, iMac, and Apple Watch displays (Wikipedia).

One thing worth noting: Figma's iOS design frames default to point-based dimensions exactly matching Apple's logical coordinate system. So when a Figma frame reads 390×844, those are iOS points, not pixels. The @2x export produces a 780×1688 PNG.

What Are the Common PT to PX Mistakes in Web and App Design?

5 specific conversion errors show up repeatedly in design handoffs and CSS codebases. Each one has a direct fix.

The most common error is assuming a 1:1 ratio regardless of screen density, which leads to inaccurate values on high-resolution and low-resolution displays alike (Elementor, 2025).

Mistake: Using Print PT Values Directly in Screen CSS

The issue: A designer pulls a font size from an InDesign or Word file (12pt) and drops it straight into a CSS font-size rule.

On a 72 PPI screen that's fine. On a 96 PPI web browser, 12pt renders as approximately 16px, which may or may not match the intended design. On a 120 PPI screen, it becomes 20px.

PT varies greatly between different browsers and screens when used in screen CSS (Blueprint Digital).

Mistake: Ignoring PPI During the Conversion

The second-most common error. Developers run the formula but don't account for the output screen's actual PPI setting.

• Web default: 96 PPI (W3C CSS reference pixel standard)

• MacOS default: 72 PPI logical, then scaled by Retina DPR

• Print standard: 72 DPI (where 1pt = 1px exactly)

Always confirm the target PPI before converting. A converter tool that hardcodes 96 PPI without disclosure produces wrong results for print workflows.

Mistake: Confusing iOS Logical Points with Typographic Points

Both are called "pt." They are not the same unit.

iOS points are logical units tied to the device pixel ratio. 1 iOS point at @2x = 2 physical pixels. 1 typographic point = 1/72 of a physical inch, period.

Pasting iOS handoff values (e.g., 44pt touch target) into a print stylesheet without understanding this difference produces completely wrong physical dimensions.

Mistake: Sub-Pixel Results in Body Text

At 96 PPI, most PT values don't convert to clean whole pixels. 11pt = 14.667px. 13pt = 17.333px.

Browsers round or interpolate fractional pixel values. The result at small text sizes: slightly blurry glyphs, particularly on non-Retina displays where sub-pixel anti-aliasing is limited (Yellow Ball, 2024).

Stick to PT values that produce whole numbers at 96 PPI: 9pt (12px), 12pt (16px), 18pt (24px), 24pt (32px), 36pt (48px).

When Should You Use PT vs. PX in Design and Development?

The choice comes down to output medium and unit behavior. PT is physical. PX is screen-relative. Each belongs to a specific context.

Use PX for Screen Design

PX is the right unit for web UI layouts, screen typography, padding, margins, and border widths.

It maps to a consistent reference pixel across browsers, renders predictably at any DPR, and is the baseline unit that Flexbox, Grid, and all major CSS layout systems use internally.

Blueprint Digital recommends PX for screen layouts because its fixed-size nature produces accurate, pixel-perfect renditions of web designs.

Use PT for Print and Apple Native Contexts

2 cases where PT belongs:

• @media print CSS rules targeting paper output

• iOS/macOS development in UIKit and SwiftUI (Apple's logical point system)

Content Powered rates PT as better suited to print workflows than screen, noting it is awkward and inconsistent in screen CSS due to PPI variance across devices.

Use EM or REM Instead of Either for Responsive Typography

PX and PT are both absolute units. Neither adapts to the user's font size preferences or browser zoom settings automatically.

For body text that needs to scale with user accessibility settings, REM (relative to root font size, default 16px) is the correct choice. EM scales relative to the parent element.

Freecodecamp's 2024 CSS guide recommends REM for font sizes and either REM or EM for margin and padding in responsive layouts.

The REM to PX conversion (1rem = 16px at browser default) and EM to PX conversion both use the same base: the current font size in context.

How Do Online PT to PX Converter Tools Work?

Every online PT to PX converter applies the same formula: PX = PT × (PPI ÷ 72). What separates good tools from basic ones is which inputs they expose and what defaults they assume.

Most tools default to 96 PPI without disclosing it. That's fine for web work but wrong for print or iOS targets. A reliable converter lets you change the PPI setting manually.

Required Inputs and Default Assumptions

Standard converter inputs:

• PT value (required)

• PPI setting (often defaulted to 96, sometimes adjustable)

• Device pixel ratio (available in advanced tools only)

The industry-standard conversion factor used by most tools is 1pt = 1.3333px at 96 PPI, confirmed by Elementor's converter documentation (2025).

Tools like Figma's Dev Mode inspect panel and Zeplin generate these conversions automatically during design handoff. They use the document's defined frame resolution to apply the correct PPI multiplier without any manual input.

What PT to PX Tools Cannot Account For

Not everything is calculable at the tool level.

Browser zoom level changes the effective pixel density at render time. A layout set to 96 PPI with 12pt text converting to 16px will render differently at 150% browser zoom, where the effective PPI scales up proportionally.

3 things no converter tool handles automatically:

• Browser zoom (user-controlled, changes effective DPR)

• OS-level display scaling (Windows 125%, 150% settings affect render)

• Font hinting differences between operating systems (Apple vs. Microsoft sub-pixel rendering philosophies differ at the glyph level)

For cross-platform precision, test your converted PX values on both Windows (Chrome, Edge) and macOS (Safari) after conversion. The same 16px font can look noticeably different between the two due to divergent font rendering approaches.

Related conversion tools for complete unit coverage: PT to CM for print dimensions, PX to Inches for physical size verification, PX to MM for metric print output, and CM to PX for moving from physical measurements back to screen values.

For color-related conversions in the same workflow, tools like the RGB to HEX Converter and the color contrast checker handle the color side of screen design precision.

FAQ on Pt To Px Converter

How do you convert PT to PX?

Multiply the PT value by 1.3333 at the web standard of 96 PPI. The full formula is PX = PT × (PPI ÷ 72). At 72 PPI, 1pt equals 1px exactly. At 96 PPI, 1pt equals approximately 1.333px.

What is 12pt in pixels?

At 96 PPI, 12pt converts to 16px. This is the most referenced conversion in web typography because 16px is the default browser font size. At 72 PPI, 12pt stays at 12px.

Is 1pt equal to 1px?

Only on a 72 PPI screen. On standard web displays running at 96 PPI, 1pt equals 1.333px. The two units are rooted in different measurement systems: PT is physical, PX is screen-relative.

Why does PT look different on screen vs. print?

Screen and print use different PPI baselines. Print defaults to 72 DPI, where 1pt equals 1px. Web screens default to 96 PPI. The same PT value produces a larger pixel output on screen than on paper.

Should I use PT or PX in CSS?

Use PX for screen CSS. PT belongs in @media print stylesheets only. PT varies across browsers and screen densities when used for screen output, making it unreliable for web layouts and typography.

What is the PT to PX conversion at 96 DPI?

At 96 PPI, the conversion factor is 1.3333. Multiply any PT value by 1.3333 to get the pixel equivalent. Common results: 9pt = 12px, 12pt = 16px, 18pt = 24px, 24pt = 32px, 36pt = 48px.

How does iOS use PT differently from web design?

Apple's iOS points are logical units, not typographic points. On Retina (@2x) devices, 1 iOS pt equals 2 physical pixels. On @3x devices, 1 iOS pt equals 3 pixels. The system scales automatically based on device pixel ratio.

What causes blurry text after converting PT to PX?

Sub-pixel results. At 96 PPI, many PT values convert to fractional pixels (11pt = 14.667px). Browsers round or interpolate these values, causing slight blurriness at small sizes on non-Retina displays.

How do Figma and Sketch handle PT vs. PX units?

Figma uses PX as its native unit but outputs PT values in iOS design handoff specs. Sketch uses logical points natively for iOS canvases. Copying PT values from Sketch into web CSS without converting produces incorrect screen sizes.

What PT values produce clean whole pixels at 96 PPI?

Nine PT values convert to exact whole pixels at 96 PPI: 9pt (12px), 12pt (16px), 18pt (24px), 21pt (28px), 24pt (32px), 36pt (48px), 48pt (64px), and 72pt (96px). Use these for pixel-perfect typography.