mooie workbench

CSS Generator

Type scale

Fluid modular scales for editorial typography.

Configure a base size, viewport range, and scale ratios. The tool generates clamp() rules and renders each step at scale. Save scales to the bench or share a configuration by URL.

Why your h1 needs to know the window size

Pick an h1 size. Say 48px.

On a laptop, it may look right. On a phone, it can take over the screen. On a large monitor, it can feel too quiet.

The problem is not the number. The problem is that an h1 is not just a measurement. It is a relationship. It needs to read as the most important text on the page, and that relationship changes with the viewport.

Media queries solve this in steps: one size at small, another at medium, another at wide. That works until you repeat it across a full heading system. Then every step in the scale needs breakpoints, and the page grows in jumps.

Fluid type is smoother. Pick a comfortable small size, pick a stronger large size, and let the browser interpolate between them. One declaration handles the range.

That is what clamp() gives you, and that is what this tool generates.

What "fluid" actually means

CSS gives you clamp(min, preferred, max): a floor, a preferred value, and a ceiling. 

font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);

The size never drops below 1.125rem and never grows beyond 1.5rem. Between those bounds, it follows the preferred value. Because that preferred value includes vw, it responds to viewport width.

A modular scale applies the same idea across headings. Start with body text, multiply by a ratio, and each step gets larger. Step 0 is body. Step 1 might be 1.25 times larger. Step 6 is much larger.

A single ratio rarely works everywhere. A ratio that gives a desktop page enough drama can feel oversized on a phone. So the tool lets the ratio change too: tighter at narrow widths, more expressive at wide widths.

The default is deliberately modest: ratioMin = 1.125, ratioMax = 1.25. It keeps mobile calm and lets desktop headings open up.

Viewport vs container

The generated CSS is viewport-fluid. That means vw follows the browser window, not the column where the text appears.

That matters. A heading inside a 600px article column on a 1400px screen still sizes itself against the 1400px viewport. In a full-page layout, that is often right. Inside a narrow component, it can be too much.

For component-level type, use container query units like cqi or cqw. They behave like viewport units but resolve against a container instead of the whole window.

This tool outputs the viewport version because it is the right default for editorial pages, marketing pages, and most full-page typography. If you need a container-fluid scale, the same math applies. Swap the frame of reference from vw to cqi.

The important part is knowing what your scale is responding to.

Picking ratios

Ratios have a feel.

  • 1.067, minor second — almost flat. Useful for dense documentation and interfaces where layout carries the hierarchy.
  • 1.125, major second — quiet and polite. Good for long-form editorial.
  • 1.2, minor third — a gentle ramp. Clear hierarchy without much drama.
  • 1.25, major third — classic editorial. The workbench default.
  • 1.333, perfect fourth — confident without shouting. Common in product and SaaS work.
  • 1.5, perfect fifth — dramatic. Better for landing pages and hero-led layouts.
  • 1.618, golden ratio — expressive and a little self-conscious. Use intentionally.
  • 2.0 and above — usually a display system, not a body-to-heading scale.

The reason the tool asks for min and max ratios is simple: phones want restraint, wide screens can handle more emphasis.

Start with 1.125 / 1.25. Push the max to 1.333 if the page needs more presence. Avoid going past 1.5 unless the h1 is meant to be the centerpiece.

Pairing with line-height and measure

A type scale only sets size. The rest of the typography still matters.

Large text usually wants tighter line-height. Small text needs room. A 60px headline at 1.5 feels loose. A 14px caption at 1.2 feels cramped.

A useful range:

  • Headlines: 1.1 to 1.2
  • Body: 1.5 to 1.65
  • Subheads: somewhere between

Measure matters too. Paragraphs are most comfortable around 60 to 75 characters per line. Past 90, reading gets tiring. Under 45, the rhythm can feel choppy. max-inline-size: 65ch is a dependable starting point for body text.

This tool does not generate line-height or measure rules. That is intentional. Font-size clamps are the part that benefits most from generation. Line-height and measure are design decisions you set around the scale.

Common mistakes

Too many steps. Five steps handle most sites: h1, h2, h3, body, caption. Nine steps create a system you have to remember instead of one the page can use. If you keep reaching for another step, ask what problem the new size solves.

Ratios that are too aggressive on mobile. A desktop scale can break a phone layout fast. Keep the narrow ratio close to 1.0 or 1.125 unless you have a strong reason not to.

Ignoring weight. A 60px Cormorant 400 and a 60px Inter 700 do not carry the same visual weight. Size, weight, and typeface work together. Treat the scale as one variable, not the whole typography system.

Browser support

clamp() is supported across current browsers and has been safe for modern production work for years.

Container query units shipped later but are also supported in current browsers. Use them when the scale should respond to a component instead of the viewport.

Related tools

  • Contrast — check whether the type you sized still reads at the intended color pair.
  • Palette — use saved palette colors to test real type surfaces.
  • Gradient — pair fluid display type with generated background treatments.
  • Shadow — preview type inside elevated cards and panels.

Workbench tools share a bench. Save the scale once, then reuse it wherever the next design decision depends on type.