Typography Unit Converter

Pixels, points, em, and rem — the units behind every font size

Typography units are essential for anyone doing web design, print layout, or UI development, and they don't all measure the same kind of thing. Pixels (px) are a fixed, absolute unit tied to screen resolution. Points (pt) come from print typography, historically tied to physical measurement, and remain the default unit in word processors and PDF/print design software. Em and rem are relative units, scaling based on a font size elsewhere in the document, which makes them powerful for responsive, accessible web design but occasionally confusing to reason about compared to a fixed pixel value.

The difference between em and rem

An em is relative to the font size of its own element's immediate parent — so if you nest elements with different font sizes, an em value's actual rendered size compounds based on that nesting, which can cause unexpected scaling if you're not tracking the hierarchy carefully. A rem ("root em") is always relative to the root HTML element's font size, regardless of nesting, which makes it more predictable for most web design work — a 1.5rem value means the same computed size everywhere on the page, no matter how deeply nested it is. This tool assumes the common default root font size of 16px for both em and rem conversions, which matches most browsers' un-overridden default, but keep in mind that if a project has explicitly changed its root font size, actual rendered sizes will scale proportionally from that new base rather than from 16px.

Points, picas, and the print connection

A point is defined, for digital purposes, as 1/72 of an inch, and at the standard 96 DPI (dots per inch) assumption used across modern browsers and operating systems, that works out to exactly 1.333 pixels per point — which is why a 12pt font in a word processor renders at 16px on a typical screen. A pica, less commonly seen outside of print and publishing software, is 12 points, or 1/6 of an inch. This tool includes both, using the same 96 DPI digital-standard assumption, so you can move between a designer's print-oriented spec and a developer's pixel-based CSS.

Why this matters for accessibility

Using rem instead of fixed pixel values for font sizes in CSS allows a website's text to scale properly when a user increases their browser's default font size for accessibility reasons — a common need for users with low vision. A design built entirely in fixed pixels won't respond to that browser-level accessibility setting, while one built with rem (or em, with careful nesting) will scale correctly. This is one of the more practical, unglamorous reasons rem has become the recommended default unit for font sizing in modern web development guidance.

Using this converter

Web and UI designers translating a Figma or Sketch mockup's pixel-based measurements into CSS rem values for development handoff, developers converting a print-oriented brand style guide's point sizes into web-appropriate pixel or rem equivalents, and students learning CSS and responsive design who want to build intuition for how these units relate all benefit from having every common typography unit in one place, with the standard 16px/96dpi assumptions clearly stated rather than hidden.