Font Size Calculator

Convert between px, rem, em, pt, vw, vh, and % — with configurable root and context sizes.

Input Value: 16 pxCalculated Px: 16pxBase Rem Size: 16pxViewport Size: 1440x900

Presets & Samples

Value

Unit

Root size (rem base)

Context (em/% parent)

Viewport width (vw)

Viewport height (vh)

Conversions (16 px)

Unit	Value	Copy
px	16px
rem	1rem
em	1em
pt	12pt
vw	1.11111vw
vh	1.77778vh
%	100%

CSS font size units explained

px is an absolute unit — always the same regardless of parent or settings. rem is relative to the root (html) font size (default 16 px). em is relative to the current element's inherited font size — so 1.5em inside a 20px context = 30px. pt is a print unit: 1pt = 96/72 px ≈ 1.333px. vw / vh are percentages of the viewport width/height.

For responsive typography that blends viewport and fixed sizes, try the CSS Clamp Calculator. For px↔rem with more context see px to rem Converter and CSS Unit Converter.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Converting a font size between px, rem, em and pt.
Working out what an em value resolves to inside a nested element.
Converting a print point size for a screen mockup.
Checking a size against a type scale before hard-coding it.
Converting viewport-relative sizes at your actual breakpoints.

Frequently Asked Questions

What is a comfortable body size?: 16px is the browser default and a reasonable floor for body text on screen; 18–20px reads better for long-form. Anything below 16 on mobile also triggers automatic zoom on iOS form fields, which is a layout bug rather than a preference.
How should line height relate to size?: Around 1.5 for body text and tighter as size grows — a 48px heading wants roughly 1.1. The same multiple that reads comfortably at 16px opens distracting gaps at display sizes, so line height is a curve rather than a constant.
What is the ideal line length?: 45–75 characters, with about 66 as the classic target. `max-width: 65ch` expresses it directly and adapts when the font changes — a measure much beyond 75 makes the eye lose its place returning to the next line.
Why is px risky for font sizes?: Because it ignores the user's browser setting entirely. A visitor who has raised their default to 20px still sees 14px text, which fails WCAG 1.4.4's requirement that text be resizable to 200%. rem inherits that setting by construction.
What is x-height and why does it matter more than point size?: The height of a lowercase `x`, which varies enormously between typefaces at the same nominal size. That is why 16px in one font looks noticeably larger than 16px in another, and why type sizes have to be judged visually rather than numerically.

Common errors and gotchas

Assuming a 16px root, which a user or a stylesheet can change and which is the whole point of rem.
Confusing em with rem, where one compounds through nesting and the other does not.
Setting font size in px, which stops respecting a user's browser text-size preference.
Treating pt as a screen unit, when it is a print measure.
Using viewport units for body text without a clamp, which becomes unreadable on small screens.