Typography Converter

Type a font size in any of seven units and this converter shows it as pixels, points, em, rem, centimeters, millimeters and inches at once, against a base you control.

What is the Typography Converter?

Web and print type are measured in different currencies, and this tool converts between them: px, pt, em, rem, cm, mm and in. Everything routes through pixels using the CSS reference resolution of 96 pixels per inch, which is why one inch equals 96px, one point equals 96/72 of a pixel, and the default 16px comes out as exactly 12pt. The em and rem results are calculated against the Base font size box, which starts at 16 because 16px is the size nearly every desktop browser applies to body text unless the reader changes it.

Key Features

• Seven units: px, pt, em, rem, cm, mm and inches
• Editable base font size drives every em and rem result
• Quick Conversions panel lists all seven units for the current value
• Swap button flips the From and To menus in place
• Results carry four decimal places, enough for a stylesheet or print spec

Common Use Cases

• Translating a print designer's 10pt body copy into a pixel value for CSS
• Rebuilding a pixel-based type scale in rem so it respects reader settings
• Checking how a 1.5em heading resolves when the parent is not 16px
• Sizing type for a PDF or poster where millimeters and inches rule

How to Use the Typography Converter

1. Enter your size in the Value box, which opens at 16.
2. Pick the From unit and the To unit from the two dropdown menus.
3. Set Base font size if your em and rem should resolve against something other than 16px.
4. Read the converted number and its unit name in the highlighted result panel.
5. Scan the Quick Conversions grid for the same size in all seven units, or press the swap button to reverse the direction.

Tips for Best Results

• Set the base to the parent element's computed size before converting em; rem always resolves against the root instead.
• This tool gives em and rem the same value, so treat its em output as a single-level result.
• Leave the base at 16 when writing site-wide CSS; that is the browser default users may have changed.
• Round px to whole numbers for crisp rendering, but keep rem values fractional, like 1.125rem.

Why Use WiserWork's Typography Converter?

Print software thinks in points and inches, browsers think in pixels, and accessible CSS thinks in rem, so one type scale often has to exist in three languages at once. Converting by hand invites the classic 96-versus-72 slip that makes every heading a third too large. Keeping the base font size visible while it works turns the invisible assumption behind every em and rem into something you set on purpose.

Who Uses the Typography Converter?

Front-end developers translating a design file into CSS use it most, along with designers handing print layouts to the web and back again. Accessibility specialists reach for it when auditing a stylesheet full of hard-coded pixels. Students learning CSS units use it to see what changing the root size actually does to a page.

Frequently Asked Questions

Which units does the converter support?

Seven: pixels, points, em, rem, centimeters, millimeters and inches. Percentages are not offered, though a rem value multiplied by 100 gives the equivalent percentage of the root size.

Why is 16px equal to 12pt?

CSS defines one inch as 96px and one point as one seventy-second of an inch, so a point works out to 1.3333px. Sixteen pixels divided by that comes to exactly 12 points.

What is the difference between em and rem?

In real CSS, em is relative to the font size of the element's parent, so nested em values compound and drift. Rem is always relative to the root html element and cannot stack, which makes it the safer unit for a type scale.

Does this tool calculate em and rem differently?

No. Both are divided by the single Base font size value, so the em figure is accurate for one level of nesting where the parent matches the base you entered. For deeper nesting, enter the parent's computed size as the base.

Why is 16px the default base?

Because that is the size browsers apply to body text out of the box. It is also the value a reader raises when they increase the default font size in their browser settings, which is the whole reason rem-based sizing is worth using.

Does using rem help accessibility?

Yes. A size written in rem scales with whatever root font size the reader has chosen, so someone who sets their browser to 20px gets larger text everywhere. Hard-coded pixel sizes ignore that preference entirely.

Can I use it for print work?

Yes. Points, inches, centimeters and millimeters are all included and related through the same 96 pixels per inch reference, so a 12pt body size converts cleanly to 4.2333mm.

How precise are the results?

Values are shown to four decimal places with trailing zeros stripped, so 1em at a base of 16 reads as 1, while 13px converted to points reads as 9.75.

What does the Quick Conversions grid show?

It converts whatever you typed into all seven units at the same time, using the same base font size, so you can read off the pixel, point and rem equivalents without touching the To menu.

Do cm and mm make sense for screen type?

Not really. On screen they are converted through the fixed 96 pixels per inch reference rather than your monitor's real physical resolution, so treat them as print units that happen to be available here.

Type sizing goes wrong at the seams, where a print spec meets a stylesheet or a pixel value meets a reader who enlarged their default text. Converting the number and naming the base you assumed keeps both sides honest.