Pt to px converter
freeConvert points to CSS pixels. 12pt = 16px, 9pt = 12px — exact CSS-spec conversion regardless of display DPI.
1pt×96/72=1.3333px
Also expressed as
base 16pxQuick reference
Convert points to pixels. Designers often receive specs in `pt` (the typography unit native to print and most design tools). Type a pt value to get the exact CSS px equivalent — 12pt = 16px, 9pt = 12px, and so on. Everything runs locally.
Common use cases
- Migrating a px-only stylesheet to rem. Paste your existing CSS into the Bulk panel, pick `px → rem`, leave Hairlines preserved so 1px borders stay sharp, and copy the result. The diff view confirms only spacing and sizing values changed.
- Building a fluid type ramp without re-doing the math. Open the Clamp() builder, enter min size + min viewport and max size + max viewport, and the tool emits `clamp(1rem, …, 1.5rem)` with the algebra shown. Drag the preview slider to see the size at any viewport width.
- Quick px ↔ rem during code review. Type a value, see px / rem / em / pt / pc / % / in / cm / mm / vw / vh all at once. The reference table makes 16px ↔ 1rem and similar conversions a one-click affair. Tailwind scale badges flag when a value lines up with `space-N`.
- Auditing a project's root font-size. Paste any CSS into the Bulk panel. If a `:root { font-size: … }` declaration exists, the tool surfaces it and offers to switch the base font-size everywhere — so conversions match how the page actually renders.
Frequently asked
How do I convert pt to px?
Multiply by 96/72 (= 1.333…). CSS defines 1pt = 1/72 of a CSS inch and 1in = 96 CSS pixels, so `1pt = 1.333… px` and `12pt = 16px`. The conversion is exact and is fixed by the CSS specification — it doesn't change based on your screen's DPI.
What units are supported?
px, rem, em, %, pt, pc, in, cm, mm, vw, and vh. Conversions pivot through pixels, so converting any unit to any other only takes one step. rem and em share the same root font-size in this tool — that's the way they're used in 99% of real CSS; the parent-font-size cascade for em is something you can't infer from a calculator anyway.
How does the tool decide what counts as 1 rem?
Root font-size, which you control with the Base chip in the header (presets 10 / 12 / 14 / 16 / 18 / 20 + custom). 16px is the browser default. The 10px shortcut (`html { font-size: 62.5% }`) yields a base of 10, useful for easy math but make sure your real CSS matches the value you set here.
Is `dpi` a length unit?
No — `dpi` is a *resolution* unit used in media queries (`@media (resolution: 96dpi)`). For length conversions involving physical units, CSS defines `pt`, `pc`, `in`, `cm`, and `mm` (all included here). They convert via the fixed identity `1in = 96 CSS px`, regardless of the device's actual pixel density.
What does the 'Bulk' panel actually change?
It rewrites numeric+unit pairs inside CSS declarations: `padding: 16px` → `padding: 1rem`. The walker tracks comments, string literals, and `url(...)` payloads so they're never touched. You can scope the conversion to spacing/sizing only, typography only, or all properties — and the 'Keep 1px hairlines' checkbox preserves single-pixel borders for crisp dividers.
How does the clamp() builder work?
You give it four numbers: a min font-size, the viewport width at which the minimum should still apply, and the same pair for the maximum. It fits a straight line between those two points and emits `clamp(min, intercept + slope*vw, max)`. Below the min viewport you get the min size; above the max viewport, the max. Drag the preview slider to see what size the formula produces at any viewport width in between.
Why does a converted value show ≈ next to it?
Because the value doesn't round cleanly at your current precision setting. `17px / 16` is `1.0625rem` exactly — that's fine — but `15px / 16` is `0.9375rem`, which most designers don't want as a literal in their CSS. The badge lets you spot 'off-grid' values at a glance so you can nudge them to the nearest clean increment.
Does my CSS leave the browser?
No. All the math runs locally — there's no network call. Safe for proprietary stylesheets, design-system internals, or anything you wouldn't paste into a public formatter.
Are there keyboard shortcuts?
`⌘K` focuses the value input on the Convert tab. On any number field, ↑/↓ steps by 1, `⇧+↑/↓` steps by 10. Selecting a unit from the dropdown updates everything live — there's no Convert button to click.