How do I convert points to pixels for the web?

CSS defines one pixel as one ninety-sixth of an inch and one point as one seventy-second of an inch. So one point equals 96 divided by 72, which is about 1.333 pixels, and one pixel equals 0.75 points. A 12pt font is therefore 16px on the web.

What is the difference between em and rem?

Both are relative units. A rem is always relative to the root font size set on the html element, so it stays predictable across the page. An em is relative to the font size of the current element, which can compound when nested elements each scale up or down.

Why is the default base font size 16 pixels?

Browsers default the root font size to 16 pixels, so 1rem equals 16px and 100 percent equals 16px unless you change it. Setting other sizes relative to this base keeps layouts scalable and respects users who change their default text size for accessibility.

How do I convert pixels to rem?

Divide the pixel value by the base font size. With a 16px base, 24px is 24 divided by 16, which equals 1.5rem. Using rem instead of fixed pixels lets the whole layout scale if the user or designer changes the root size.

Are point sizes in CSS the same as in word processors?

They are close but the rendering context differs. CSS points are tied to the 96 pixel per inch reference, while print points map to physical inches on paper. For screen typography, working in pixels or rem is usually more reliable than points.

What is the Font Size Conversion Chart?

Convert typographic point sizes to CSS pixels, em, rem, and percentage. Set a base font size and get every equivalent unit at once, with a chart of common heading and body text sizes. It runs free in your browser on Gera Tools, with nothing uploaded.

Font Size Conversion Chart

Name: Font Size Conversion Chart
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Typography spans print and screen units that all mean slightly different things. This converter turns any font size into points, pixels, em, rem, and percentage at once, so you can move between a design tool, a stylesheet, and a print spec without guessing.

Why there are so many units

Typography has multiple measurement systems because it evolved across different contexts: print, traditional digital displays, and modern high-density screens.

Points (pt) originated in metal type and survive in design software (Figma, Illustrator, InDesign) and office applications. A typographic point is defined as 1/72 of an inch and maps predictably to physical dimensions in print.

Pixels (px) are the CSS reference unit for screen layouts. The CSS specification defines a pixel as 1/96 of a CSS inch, which creates the fixed 4:3 ratio between pixels and points. On a 1× screen, one CSS pixel corresponds to one physical screen pixel. On high-DPI (Retina) screens, the browser handles the mapping — CSS pixels still work the same.

Rem and em are scaling units. They allow type to grow or shrink relative to a base, which is essential for accessible design: a user who increases their browser default font size from 16px to 20px will see rem-based text grow accordingly, while pixel-locked text stays the same. This is a real accessibility consideration — many users with low vision increase their default text size.

Percent is functionally identical to em but expressed as a multiplier out of 100 rather than a decimal. 150% and 1.5em are the same instruction.

How it works

The two absolute units are linked by the CSS reference resolution. CSS defines 1px as 1/96 inch and 1pt as 1/72 inch, which gives the fixed relationship:

1pt = 96 / 72 px = 1.3333… px
1px = 72 / 96 pt = 0.75 pt

The three relative units depend on a base. rem is relative to the root font size (the <html> element), em is relative to the current element’s font size, and percent is em expressed out of 100. With the common 16px base:

1rem = 1em = 100% = base px
px   = rem × base
rem  = px / base

The tool first converts your input to absolute pixels, then derives every other unit from there using the base you set.

Worked example and a common conversion

With a 16px base, a 24px heading converts to:

18pt
1.5rem
1.5em
150%

All of these describe the same rendered size. Change the base to 20px and that same 24px becomes 1.2rem instead, which is why rem-based layouts scale cleanly when you adjust the root.

A frequently needed conversion is a design-tool measurement to a stylesheet value. For example, a designer specifies a 14pt body text in Figma. That is 14 × 96/72 ≈ 18.67px, which on a 16px root is 18.67 / 16 ≈ 1.167rem. Rounding to 1.2rem or keeping the pixel value both work; rem is preferred for accessibility.

When to use which unit

Unit	Best for
px	Borders, shadows, fixed-size icons
rem	Font sizes, spacing, most layout values
em	Padding/margin that should scale with the element’s own text
pt	Print stylesheets, design handoff specs
%	Font size overrides that scale from the parent

Prefer rem for page-level sizing so a single root change rescales everything. Reserve em for values that should track their local context, like padding that grows with its element’s text. Avoid deep nesting of em values — they multiply and drift quickly.