Why does the rem value depend on the root font size?

Because a rem is one root em, so the pixel equivalent changes if a user or a stylesheet changes the root size. At the default 16px root, a 24px size is 1.5rem, and at a 20px root the same 1.5rem would render at 30px. That dependence is also the advantage: a size expressed in rem scales for readers who set a larger base size.

How are points calculated here?

At 0.75 points per pixel, which is the ratio that follows from 96 pixels per inch and 72 points per inch. So a 16px setting is 12 points, which is the familiar body size in print. The ratio is a CSS and print convention rather than a measurement of any particular screen or paper.

What is the line box column for?

It multiplies each size by 1.5 to show the vertical space the step would occupy at a typical text leading. On a ladder, the column makes the relationship between size and height visible, so it is easy to see that moving from 24px to 30px adds nine pixels of line box rather than six.

Why would two adjacent sizes look identical?

Because a step of one or two pixels is often within the difference a face can express, particularly at larger sizes. Reading the ladder is how a scale is trimmed: if 16px and 18px are indistinguishable in the chosen face, one of them is not doing work, and the ratio between the steps is usually the thing to adjust.

Can I set a size in rem rather than pixels?

The ladder is authored in pixels because that is the unit sizes are discussed in, and the conversion table reports the rem equivalent. To author in rem, take the rem column and use it in the stylesheet, remembering that the value depends on the root size you entered rather than on a fixed ratio.

Font Size Preview

Settings

Font family

Sample textSizes (px, comma-separated)Root font sizepxWeight

Preview

12pxThe quick brown fox jumps over the lazy dog

14pxThe quick brown fox jumps over the lazy dog

16pxThe quick brown fox jumps over the lazy dog

18pxThe quick brown fox jumps over the lazy dog

21pxThe quick brown fox jumps over the lazy dog

24pxThe quick brown fox jumps over the lazy dog

30pxThe quick brown fox jumps over the lazy dog

36pxThe quick brown fox jumps over the lazy dog

48pxThe quick brown fox jumps over the lazy dog

60pxThe quick brown fox jumps over the lazy dog

Unit conversion

px	rem	pt	1.5× line box
12px	0.75rem	9pt	18px
14px	0.875rem	10.5pt	21px
16px	1rem	12pt	24px
18px	1.125rem	13.5pt	27px
21px	1.3125rem	15.75pt	31.5px
24px	1.5rem	18pt	36px
30px	1.875rem	22.5pt	45px
36px	2.25rem	27pt	54px
48px	3rem	36pt	72px
60px	3.75rem	45pt	90px

rem assumes a 16px root font size. pt is the CSS print unit (1pt = 1/72in).

You Might Also Need

Type Scale Generator

Generate a modular type scale

Waterfall Font Preview

See a font at every size at once

Modular Scale Calculator

Calculate ratios for type

CSS Clamp Calculator

Calculate clamp() values

The font size preview renders a ladder of sizes and converts each one into the units a stylesheet needs. Pixels are the authoring unit, rem is what the browser resolves against the root font size, and points are the print unit, so all three are reported together.

What is Font Size Preview?

The font size preview renders one sample down an editable ladder of sizes and prints the unit conversion for each step alongside the rendered row.

The default ladder is 12, 14, 16, 18, 21, 24, 30, 36, 48 and 60 pixels, which spans a caption through to a large heading.
The root font size is an input rather than an assumption, because rem values only mean something relative to it, and it defaults to 16px.
Each row is labelled with its pixel size and rendered at that size at a fixed line height, with the sample wrapping rather than truncating.
The conversion table reports each size in pixels, in rem calculated against the root, in points at 0.75 per pixel, and as a 1.5 times line box in pixels.
Weight and family are selectable, so the ladder can be read in the face the project actually uses rather than in a default.

The conversions are the substance of the tool. A pixel size is what a designer thinks in, and a rem value is what a browser actually applies once the root font size is known, so a size ladder authored in pixels has to be converted before it can be expressed responsively. Points are the third unit, and the 0.75 ratio between pixels and points at 96 dots per inch is the same conversion the print tools use, which is what lets a size survive the trip from a screen design to a print specification. The line box column multiplies each size by 1.5, which is the leading a text setting usually wants, so the column doubles as a reminder of how much vertical space each step will take.

Sizes are taken as typed and filtered to the range from 1 to 300 pixels, so a value outside that is dropped rather than clamped.
The point conversion assumes 96 dots per inch, which is the CSS reference ratio rather than a particular device or printer resolution.
The line box column uses a fixed 1.5 multiplier, so it describes one common setting rather than the leading you have chosen.
The rem column depends entirely on the root font size entered, so a project that changes the root must update it before relying on the figures.
The ladder has no limit on the number of entries, and a long list is rendered in full rather than paginated.

Use it when a type scale is being authored in pixels and the rem values are needed for the stylesheet, when a size has to be quoted in points for a print job, or when a ladder needs reading in the face a project actually uses rather than a default. Where the scale itself has to be derived rather than converted, the type scale generator and the modular scale calculator produce the steps. The type scale generator derives the ladder from a ratio, the waterfall font preview shows the same face down that ladder for judgement, and the modular scale calculator compares the ratios a scale could be built on.

How to use Font Size Preview

Type the size ladder you want to check, either your own scale or the default list, and set the root font size the project uses.
Choose the family and weight so the rendered rows show the face the sizes will actually be applied to.
Read the ladder to judge whether each step is distinguishable from the one below it at the size it will be used.
Copy the rem and point values from the conversion table into the stylesheet and the print specification respectively.

When to use Font Size Preview vs related tools

Reach for it when a scale authored in pixels has to become rem values, when a size needs quoting in points for print, or when a set of steps has to be checked for whether adjacent sizes look different at their real sizes. It is the conversion step between a design and a stylesheet. For deriving the steps in the first place, the type scale generator and the modular scale calculator do that work, while the waterfall font preview judges how the face behaves across the same range.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.