Font Size Calculator

Convert a CSS font size between px, rem, em, %, pt, vw and vh. Set your root and parent font sizes and viewport, copy the result, and preview sample text at that size.

px ⇄ rem ⇄ em

Custom Root & Parent Size

7 CSS Units

px/em/rem

Size Preview

Copy Values

vw & vh

Convert CSS Font Sizes Between px, rem, em, %, pt, vw and vh

Enter a font size in any of seven CSS units and the calculator gives the equivalent in all the others. The most common use is turning pixel sizes from a design mockup into rem, or checking what a rem or vw value works out to in pixels.

Relative units depend on context, so the result is only as accurate as the settings you give it: the root font size for rem, the parent element's font size for em and %, and the viewport size for vw and vh.

How to Use the Font Size Calculator

Enter the size and its unit, for example 24 and Pixels (px). Any number from 0.1 to 1000 works.
Check the settings. Root font size is the html element's size (16px unless your CSS or the reader changes it). Fill in Parent font size only when you're converting em or % inside an element whose computed font size differs from the root. Set the viewport to the screen size you care about for vw and vh.
Click Convert Font Size, or press Ctrl+Enter (⌘+Enter on a Mac) while in the form. The presets convert common sizes in one click.
Copy the value you need. Each Copy button copies the number with its unit, such as 1.5rem.

Conversion Formulas

Every conversion goes through pixels. With the default settings, 24px converts like this:

Formulas for converting between pixels and other CSS font size units
Unit	To px	From px	Example (defaults)
rem	rem × root size	px ÷ root size	24px = 1.5rem
em	em × parent size	px ÷ parent size	24px = 1.5em
%	% ÷ 100 × parent size	px ÷ parent size × 100	24px = 150%
pt	pt × 4/3	px × 3/4	24px = 18pt
vw	vw ÷ 100 × viewport width	px ÷ viewport width × 100	24px = 1.25vw
vh	vh ÷ 100 × viewport height	px ÷ viewport height × 100	24px = 2.2222vh

Defaults: root and parent 16px, viewport 1920 × 1080px. Results are rounded to 4 decimal places.

What Each Unit Is Relative To

px (pixels): An absolute CSS unit: 1px is defined as 1/96 of a CSS inch. It isn't one physical screen pixel on high-density displays. Page zoom enlarges px text, but a reader's default font-size setting in the browser doesn't.
rem (root em): Relative to the font size of the root html element. Browsers default that to 16px, and readers can change it in their settings, so rem-based text follows their preference. 1.5rem is 24px at the default and 30px if the root is 20px.
em: For font-size, relative to the parent element's computed font size. Because each level multiplies the one above, em values compound: a 1.5em element inside a 1.2em element ends up 1.8 times the root size. To convert em here, enter the parent's computed size in pixels as the parent font size. (For other properties, such as padding, em refers to the element's own font size.)
% (percent): For font-size, a percentage of the parent's font size, so 150% is the same as 1.5em.
pt (points): A print unit. CSS fixes 1in = 96px = 72pt, so 1pt is always 4/3 px and 12pt is exactly 16px in a browser. How large that looks physically depends on the screen. Points are mainly useful in print stylesheets.
vw and vh (viewport width and height): 1vw is 1% of the viewport's width and 1vh is 1% of its height. 2vw is 38.4px on a 1920px-wide window but 7.5px on a 375px phone, so viewport units are usually combined with clamp() (see below). On mobile, the browser's toolbars can change the viewport height as you scroll; the newer svh, lvh and dvh units address that.

Definitions follow the W3C CSS Values and Units specification; MDN's font-size reference has more examples.

Common Font Size Tasks

Turning design mockup sizes into rem

Design tools usually specify text in pixels. Divide by the root size (16px unless your CSS changes it): 14px = 0.875rem, 24px = 1.5rem, 48px = 3rem. Using rem means text grows if a reader increases the browser's default font size.

Checking a layout at a larger default font size

WCAG success criterion 1.4.4 Resize Text asks that text can be enlarged to 200% without losing content or functionality. Enter 32px as the root size to see what your rem values become at double the default, then test the page itself with that browser setting or with 200% zoom. WCAG doesn't set a minimum font size.

Fluid text with clamp()

To grow text smoothly from a minimum size on a narrow screen to a maximum on a wide one, combine rem and vw in clamp(). For 16px at a 320px-wide viewport rising to 24px at 1280px:

Slope = (24 − 16) ÷ (1280 − 320) = 0.008333, which is 0.8333vw
Starting point = 16 − 0.008333 × 320 = 13.333px, which is 0.8333rem

font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);

At 320px wide that gives 13.333 + 2.667 = 16px, and at 1280px 13.333 + 10.667 = 24px. Use this calculator to check the vw part at specific viewport widths.

Writing a print stylesheet

Inside @media print, points are a familiar unit. 16px screen text is 12pt, and 24px is 18pt.

Limitations

The calculator uses the settings you enter. It can't see your stylesheet, so it doesn't know your real root size or how em values compound in your markup.
vw and vh are calculated from the viewport size you enter. In a browser, 100vw includes the width of a vertical scrollbar if there is one.
The preview uses this page's font. Different typefaces look larger or smaller at the same font size.
Values are rounded to 4 decimal places, which is far finer than browsers render text.

How Your Input Is Handled

The numbers you enter are sent to Orbit2x's server, which does the arithmetic and returns the results. The calculator doesn't save them. See the privacy policy for how the site handles data generally.

Frequently Asked Questions

How do I convert px to rem?

Divide the pixel value by the root font size. With the usual 16px root, 24px ÷ 16 = 1.5rem. To go back, multiply: 1.5rem × 16 = 24px.

What's the difference between em and rem?

rem always refers to the root font size, so 1.5rem is the same everywhere on the page. em refers to the parent's font size, so the same 1.5em can be 24px in one place and 30px inside a 20px parent. In the calculator, set the parent font size to see the difference.

Does setting html to 62.5% break readers' font settings?

No. html { font-size: 62.5%; } makes 1rem 10px at the default and still scales if the reader changes their default, because it's a percentage. The trade-off is that any text you don't size explicitly becomes 10px, so you have to set body text yourself. Enter 10 as the root size here to work in that system.

Is 12pt really 16px?

In CSS, yes: the specification defines 1pt as 1/72in and 1px as 1/96in, so 12pt = 16px exactly in every browser. Neither is tied to physical size on screen, which depends on the display and zoom level.

What font size should body text be?

There's no single rule, and WCAG doesn't specify a minimum. Browsers default to 16px, which is a common starting point for body text on the web. Setting it as 1rem keeps it tied to the reader's own preference.

Why does my result differ from what the browser shows?

Usually because the real root or parent size differs from what you entered. Check the element's computed font-size in your browser's developer tools and use that value as the parent size.