Logo

MonoCalc

/

Typography Unit Converter

Converter
Used only in the ready-to-paste declaration

Font & viewport context

em, rem, %, ex, ch and the viewport units have no fixed size — they resolve against these values.

The value of 1rem
Basis for em, %, ex, ch
For device-pixel output
Font metric behind 1ex
Font metric behind 1ch

12 pt equals

16 px

font-size: 16px;
Comfortablefactor × 1.333316 px resolved16 device px @ 96 DPI

Within the usual range for body copy through to subheadings.

Live specimen

The quick brown fox 0123456789

Rendered at 16 px. Screen rendering also depends on your device scale factor.

Ruler comparison

025pt025px

Both scales are drawn at the same physical size. The shaded band is 16 px wide.

All units

UnitSymbolValueBasis
Pixeltargetpx16fixed length
Pointpt12fixed length
Picapc1fixed length
Root emrem1context-dependent
Emem1context-dependent
Percent%100context-dependent
Ex (x-height)ex2context-dependent
Ch (zero width)ch2context-dependent
Inchin0.1667fixed length
Centimetercm0.4233fixed length
Millimetermm4.2333fixed length
Quarter-millimeterQ16.9333fixed length
Twiptwip240fixed length
Didot pointdd11.2619fixed length
Cicerocc0.9385fixed length
Viewport widthvw1.1111context-dependent
Viewport heightvh1.7778context-dependent
Viewport minimumvmin1.7778context-dependent
Viewport maximumvmax1.1111context-dependent

Device pixels by resolution

72 DPI96 DPI150 DPI300 DPI600 DPI
12162550100

The same physical size rendered at different output resolutions. CSS itself always assumes 96 DPI.

Step-by-step working

1 pt = 1.3333 px (postscript point standard)

12 pt × 1.3333 = 16 px

At 96 DPI: 16 px ÷ 96 × 96 = 16 device px

Nested em cascade

An em font size applied at every level of nesting compounds. This is why 1.2em three levels deep is not 1.2 times the root.

Depth 0 1× root = 16 px

Depth 1 1.2× root = 19.2 px

Depth 2 1.44× root = 23.04 px

Depth 3 1.728× root = 27.648 px

Reference cheat sheet

1 in = 96 px = 72 pt = 6 pc = 25.4 mm

1 pt = 1/72 in = 1.3333 px = 20 twip

1 pc = 12 pt = 16 px

1 mm = 3.7795 px = 4 Q

1 Q = 0.25 mm = 0.9449 px

1 dd = 0.3759 mm = 1.0657 pt

1 cc = 12 dd = 4.5108 mm

1 rem = root font size, 16 px by default

About This Tool

Typography Unit Converter – px, pt, rem, em, Pica and More

Type gets measured differently depending on where it lives. A stylesheet talks in px, rem and vw; a print specification talks in points, picas, didots and ciceros; a Word document stores everything internally as twips; and Japanese print CSS uses Q. This typography unit converter puts all nineteen of those units on one page, converts any of them into any other, and shows the working so the answer is verifiable rather than magic.

How the Conversion Works

Every value is first resolved into CSS pixels, then converted out into the target unit. That single pivot is what makes an all-units table possible from one input. The anchor is the CSS reference pixel: 1 in = 96 px = 72 pt = 6 pc = 25.4 mm. From there the rest falls out — a point is 96 / 72 = 1.3333 px, a pica is twelve of those at 16 px, a twip is 1/1440 in, a Q is a quarter millimetre, and a didot point is 0.3759 mm. Converting 12 pt to pixels is therefore 12 ÷ 72 = 0.1667 in × 96 = 16 px, which the step-by-step panel prints in full.

Relative Units Need Context

Half the units here have no fixed size at all. rem resolves against the root font size; em, %, ex and ch resolve against the font size of the containing element. That is why the tool asks for a root font size and a parent font size instead of silently assuming 16 px. Set the parent to 20 px and 1.5em becomes 30 px — which is 1.875rem, not 1.5rem. That gap between em and rem inside a nested container is the single most common typography bug in CSS, and the nested-em cascade panel shows it compounding level by level.

ex and ch are font metrics, not constants
1ex is the real x-height of the loaded typeface and 1ch is the advance width of its zero glyph. Both vary by font, so the converter exposes them as editable ratios defaulting to 0.5. Enter the true metrics from your font file for a production-accurate answer.

Which Point Are You Using?

"Point" is not one unit. CSS, PDF and every modern design tool use the PostScript point of exactly 1/72 inch. Classical typesetting and TeX keep the older printer's point of 1/72.27 inch. Continental European print uses the Didot point of 0.3759 mm, roughly 6.6% larger. The point-standard selector switches the whole table between them, so a specification written in Paris in 1960 and one written in Figma yesterday can be compared honestly.

Print Output and DPI

CSS always assumes 96 DPI, but a press does not. A 10 pt heading is 0.1389 in tall, which is 13.33 px on screen and 41.67 device pixels in a 300 DPI export. The device-pixel strip shows the same size at 72, 96, 150, 300 and 600 DPI at once — useful when preparing artwork for print, checking a PDF export, or sizing raster assets for a high-density display.

Type Scales and Fluid Type

Beyond one-off conversions, the tool builds a modular type scale from a base size and a ratio — size(n) = base × ratioⁿ — with named ratios from Minor Second (1.067) through Major Third (1.25) to the Golden Ratio (1.618). Every step is rendered in px, rem and pt, with a copyable block of CSS custom properties. The fluid mode solves the other half of the problem: given a minimum and maximum size and the viewport range they should span, it derives the linear interpolation and wraps it in clamp(), then charts the flat-ramp-flat curve the rule actually produces.

Choosing Units Well

For screen work, prefer rem for font sizes. Browsers expose a font-size preference that changes the root size, so rem-based type scales with the reader while px-based type ignores them outright. Reserve px for values that genuinely must not scale, such as hairline borders. Avoid chained em font sizes, which compound through nesting. And keep a clamp() rule's bounds in rem: a middle term of pure vw can stop responding to zoom entirely and fail WCAG 1.4.4. The legibility badge flags any result that lands below the roughly 12 px / 9 pt comfortable-reading threshold, or above 200 px where a unit mix-up is the likelier explanation.

Batch Work

Porting an existing stylesheet rarely means converting one number. Paste a whole list — 12px, 14px, 16px, 24px, 32px — and the batch mode parses each token, honours any per-token unit suffix, converts everything against the same context, and exports the result as CSV. Tokens it cannot parse are listed back with a reason rather than quietly dropped.

Frequently Asked Questions

Is the Typography Unit Converter free?

Yes, Typography Unit Converter is totally free :)

Can I use the Typography Unit Converter offline?

Yes, you can install the webapp as PWA.

Is it safe to use Typography Unit Converter?

Yes, any data related to Typography Unit Converter only stored in your browser (if storage required). You can simply clear browser cache to clear all the stored data. We do not store any data on server.

How does this typography unit converter work?

Every unit is first resolved into CSS pixels using the reference equality 1 inch = 96 px = 72 pt, then converted out into the target unit. That single pivot is why the tool can fill an entire 19-unit table from one input, and why the step-by-step panel can print the exact multiplication chain it used.

Why do I need to enter a root and parent font size?

Because em, rem, %, ex and ch are not fixed lengths. rem is measured against the root font size, while em, %, ex and ch are measured against the font size of the containing element. Without those two numbers there is no single correct answer, so the tool asks for them instead of quietly assuming 16 px.

Is a point 1/72 of an inch or 1/72.27?

Both, depending on the standard. CSS, PDF and every modern design tool use the PostScript point of exactly 1/72 inch. Classical typesetting and TeX use 1/72.27 inch, and continental European print uses the Didot point of 0.3759 mm. Pick the standard in the font context panel and the pt, pc and derived values update accordingly.

How accurate are the ex and ch conversions?

They are estimates. 1ex is the real x-height of the loaded font and 1ch is the advance width of its zero glyph, both of which vary by typeface. The tool exposes both ratios as editable inputs defaulting to 0.5, so you can enter the true metrics from your font and get an exact answer for that typeface.

What is a twip, and why does it show up in the table?

A twip is one twentieth of a point, or 1/1440 inch. It is the internal measurement unit of Microsoft Word and the RTF file format, so anyone reading or writing Word documents programmatically ends up converting to and from it. It is defined against the inch directly, so the point-standard selector does not change it.

Should I size text in px or rem?

Prefer rem for font sizes. A browser's font-size preference changes the root size, so rem-based type scales with the reader's setting while px-based type ignores it. Use px where a value genuinely must not scale, such as hairline borders, and avoid chained em font sizes, which compound through nesting.