Px to pt converter
freeConvert CSS pixels to typography points. 16px = 12pt exactly, per the CSS spec — independent of display DPI.
16px÷96/72=12pt
Also expressed as
base 16pxQuick reference
Convert pixels to points (the typography unit used in print and the OS clipboard). The CSS specification fixes 1pt = 96/72 px exactly, so this conversion is precise regardless of your display's DPI. Useful when matching CSS sizes to Figma / Sketch / print specs that quote in points.
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 px to pt?
Multiply by 72/96. CSS defines 1pt = 1/72 of a CSS inch, and 1in = 96 CSS pixels — so `1px × (72/96) = 0.75pt` and `16px = 12pt`. This conversion is exact and doesn't depend on display DPI; it's the CSS specification, not the physical pixel density of any particular screen.
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.