Why can I only see part of my text on each row?

Because each row truncates with an ellipsis. Without it, a long sample at 96px would push the following rows off the screen and the ladder would stop being a ladder. Every row carries the full sample as its title, so hovering reveals the rest, and for a full read the sample belongs in a single-size preview instead.

How many sizes can the ladder hold?

Fourteen, and each is clamped to 300 pixels. That is enough for a type scale with a step per role plus a few display sizes. Values that do not parse, or that fall outside the range, are dropped silently, which is why the sizes-rendered readout is worth checking after pasting a long list.

Why is the weight the same for every row?

Because a waterfall compares sizes, and mixing weights would introduce a second variable. A face is usually heavier at small sizes and lighter at large ones, so the interesting interaction is between size and weight; that is explored by setting one weight, reading the ladder, then setting another and comparing the two passes.

Can I use the reference output as a stylesheet?

Not directly. It writes the family stack and a comment per size, so it records what the ladder contained rather than declaring rules. The size steps themselves are the useful part, and they belong in the type scale where they can be turned into proper classes with the leading each one needs.

Why start the default ladder at 12px?

Because a waterfall is most useful when it spans the whole range a face is used across. Twelve pixels is the lower end of what appears in a real interface, 96 is a display heading, and the steps between are the common ones. Replacing the list with a project's own scale is the intended use.

Waterfall Font Preview

Specimen

Font family

Sample textSize ladder (px, comma-separated)Weight

Sizes rendered10

Range12 – 96px

Family kindsans

Font loadingwebfonts preloaded by this domain's layout

Waterfall

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

20pxThe quick brown fox jumps over the lazy dog

24pxThe quick brown fox jumps over the lazy dog

32pxThe quick brown fox jumps over the lazy dog

40pxThe quick brown fox jumps over the lazy dog

56pxThe quick brown fox jumps over the lazy dog

72pxThe quick brown fox jumps over the lazy dog

96pxThe quick brown fox jumps over the lazy dog

Reference

.waterfall-inter {
  font-family: 'Inter', sans-serif;
  /* 12px */
  /* 14px */
  /* 16px */
  /* 20px */
  /* 24px */
  /* 32px */
  /* 40px */
  /* 56px */
  /* 72px */
  /* 96px */
}

You Might Also Need

Font Size Preview

Preview a font at multiple sizes

Type Scale Generator

Generate a modular type scale

Font Previewer

Preview any font with custom text and sizes

Font Line Height Tester

Dial in the perfect line height

The waterfall font preview renders the same sample down a size ladder, so fit, weight and rhythm can be judged at every size on one screen. The ladder is editable, which is what lets it match a real type scale rather than a generic one.

What is Waterfall Font Preview?

The waterfall font preview takes a sample, a face, a weight and a comma-separated list of sizes, then renders the sample once per size down the size ladder, each row labelled with its pixel value.

The default ladder is 12, 14, 16, 20, 24, 32, 40, 56, 72 and 96 pixels, which covers a caption through to a display heading.
The editable size list is typed rather than chosen, so any set of sizes can be tested, including the exact steps of a project's type scale.
Up to fourteen values are rendered, each clamped to a maximum of 300 pixels, and values that cannot be parsed are dropped rather than breaking the ladder.
Weight is chosen from five values between 300 and 700, applied to every row at once.
The readouts report how many sizes were rendered, the range they span, and the classification of the family being previewed.

Rendering every row at a single weight is the point: a waterfall is about how one setting behaves as it grows, so holding weight, tracking and leading constant is what makes the rows comparable. Each row uses a line height of 1.15 and truncates with an ellipsis, which keeps the ladder's rhythm even when the sample is long, and every row carries the full sample as a title so the truncated text can still be read by hovering. The reference panel writes the family stack followed by a comment for each size in the ladder, which is a record of what was tested rather than a usable stylesheet. That distinction matters: the ladder is a comparison instrument, and the sizes it renders come from what you type rather than from any scale the tool derives.

Truncated rows mean a long sample cannot be compared end to end at every size in the ladder; only the first part of the string is visible.
Fourteen sizes are the ceiling, which is enough for a ladder and not enough for a full specimen.
The ladder shares one weight for every row, so the interaction between size and weight has to be explored in two passes.
Sizes above 300 pixels are dropped silently, as are values that do not parse.
The reference output is a comment block rather than CSS, and it names the family rather than giving you declarations to paste.

Use it when a face has to hold up across a project's whole scale rather than at one size, when a type scale has been proposed and the sizing needs checking in the real face, or when a display face is being considered for smaller sizes and the question is where it stops working. Type the scale's own steps into the ladder so the preview matches the design. Where the face needs testing at different weights as well, the variable font sliders vary two axes at once, and where several faces need the same ladder, the multi-font comparison stacks them. The font size preview answers the size question for a single face, the type scale generator derives the steps to test, and the font previewer is the display-oriented sibling with its own fixed ladder.

How to use Waterfall Font Preview

Choose the family and weight, then replace the default ladder with the exact size steps your scale uses, comma-separated.
Set a sample long enough to show the face's rhythm but short enough to read comfortably on each row.
Read the ladder from the bottom up, since a face that holds at 72px and collapses at 14px is the usual finding.
Check the sizes-rendered and range readouts to confirm the ladder parsed as typed, then keep the reference block as a record of what was tested.

When to use Waterfall Font Preview vs related tools

Reach for it when a face is being considered for a whole type scale, when a proposed scale needs checking in the real face before it is committed to a design system, or when the question is where a display face stops working as the size drops. It answers that faster than changing one previewer's size slider ten times. Where several faces are being compared on the same ladder, the multi font comparison stacks them, the font-specimen sheet gives the full character set, and the font line height tester covers the leading each row in the ladder would need.

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.