What is Fluid typography?

Fluid typography replaces a ladder of font sizes per breakpoint with one expression that grows continuously with the viewport. A hero headline that is 2rem on a phone and 4rem on a desktop monitor, with every size in between on the screens in between, is written once with clamp(): a minimum, a preferred value that includes a viewport unit, and a maximum. The headline never looks too small on a tablet or too large on a small laptop, and there are no breakpoint jumps to tune.

The formula

h1 {
  font-size: clamp(2rem, 1.2rem + 2.5vw, 4rem);
}
.card-title {
  font-size: clamp(1rem, 0.8rem + 1.5cqi, 1.5rem);
}

The preferred value is a line. At a 320px viewport, 1.2rem + 2.5vw is 1.2rem plus 8px, about 1.7rem, so the 2rem minimum wins; at 1440px it is 1.2rem plus 36px, about 3.45rem; past about 1790px it would exceed 4rem, where the maximum takes over. To derive the line from two chosen points, say 2rem at 480px and 4rem at 1280px, take the size difference over the width difference as the slope, solve for the intercept, and convert to rem and vw. Tools such as Utopia do the arithmetic and generate a whole type scale.

Accessibility

The rem term is not optional. A value like font-size: 3vw ignores the user's browser zoom and font size preference, because viewport units do not grow when the user zooms, and that fails WCAG 1.4.4, which requires text to be resizable to 200 percent. Mixing in a rem-based term keeps zoom working; keep the rem part large enough that zooming to 200 percent still roughly doubles the text. Check the result at 320px and at 400 percent zoom, and keep body text at a fixed or barely fluid size. Fluid sizing is for headings and display text, where the visual range matters.

Viewport or container

vw scales with the window, which is right for a hero that spans the page. Inside components that can land in columns of different widths, use container query units such as cqi instead, so a card title scales with the card. Line height should tighten as size grows; a unitless line-height with a slightly smaller value for the largest sizes, or a second clamp(), handles that.

In Tailwind CSS and MiniDev

Tailwind accepts the expression as an arbitrary value, text-[clamp(2rem,1.2rem+2.5vw,4rem)], or as a theme token in @theme so it has a name:

@theme {
  --text-display: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
  --text-display--line-height: 1.05;
  --text-display--letter-spacing: -0.03em;
}
/* <h1 class="text-display">...</h1> */

MiniDev UI uses a stepped scale for most text: Heading and Text map h1 through h6 to fixed sizes, and page titles step once at the sm breakpoint, the way the glossary page title goes from 2.25rem to 3rem. Fluid sizing is reserved for marketing surfaces where a headline spans the full width: HeroAurora sizes its title with clamp(1.75rem, 3.5vw + 1rem, 3rem). The clamp() entry covers the function itself.