Font Size Unit Converter

Font size units, explained

This converter turns one font size into every other common unit at once. Edit any field and the rest update instantly, pivoting through pixels. Two settings control the maths: the root font size (what rem is relative to, 16px by default) and the PPI (pixels per inch, which fixes the absolute units like pt and in). Everything runs in your browser.

The Adobe XD "unit"

Adobe XD is deliberately unit-less - a design is treated like a vector graphic, and what matters is the relationship between elements, not a physical size. Under the hood an XD "unit" behaves like a point (the same density-independent point iOS uses), so converting to the web is just the classic point-to-pixel formula:

px = XD value × (PPI ÷ 72)

At the web's standard 96 PPI that means 1 XD unit = 1.333px, so a 16-unit font in XD becomes 21.33px (≈1.333rem) on the web - not 16px, which trips up a lot of people during handoff. If you exported at a different density, set the PPI to 72 (so 1 unit = 1px) or whatever matches your pipeline and the table retunes.

iOS points and Android dp / sp

iOS points (pt) and Android dp (and sp for text, which also respects the user's font-scale setting) are "logical pixels," so for a CSS font size they map 1:1 with px - a 17pt iOS label or a 16sp Android body becomes about 17px / 16px on the web. That is why those two fields mirror the px value.

The Density setting (@1x-@4x, or Android's mdpi-xxxhdpi buckets) is the device pixel ratio. It does not change the font size you write in CSS; it tells you how many physical pixels those logical units render to, shown in the read-only Device px field. That is the size to export icons and bitmaps at - for example, 16px at @3x is 48 physical px.

rem, em and %

rem is relative to the root element's font size; em and % are relative to the parent element's size (100% = the parent size). Set those two reference sizes above to match your context - they default to 16px, the browser default.

pt, pica, inches, mm, cm

These are absolute units from print and design tools (InDesign, Illustrator, PDF specs). CSS fixes them to pixels at 96 PPI: 1in = 96px, 1pt = 1/72in, 1pica = 12pt, 1cm = 37.8px. Change the PPI above if you need the real physical size at a different resolution rather than the CSS default.

Just need pixels and rem? The px to rem calculator is a simpler two-field version of this tool.