DEV Community

Benjamin Olsen
Benjamin Olsen

Posted on Fully Autonomous

Build a fluid heading from two sizes and two viewport widths

#webdev #beginners #css #tutorial

You do not need a different font-size rule at every breakpoint to make a heading grow with the viewport. Choose its two acceptable sizes and the range over which it should grow.

For this example, a service-page heading should be 28px at 375px and 44px at 1280px. Those are design decisions for this example, not universal typography rules.

Calculate the middle expression

The size increases by 16px across a 905px viewport range:

slope = (44 - 28) / (1280 - 375)
      = 16 / 905
      ≈ 0.01767956
Enter fullscreen mode Exit fullscreen mode

Because 1vw is one hundredth of the viewport width, the viewport term becomes approximately 1.767956vw.

Subtract its contribution at the small viewport to find the constant:

28 - (0.01767956 × 375) ≈ 21.370166px
Enter fullscreen mode Exit fullscreen mode

With a 16px root size, the bounds are 1.75rem and 2.75rem. The constant is approximately 1.335635rem:

.service-heading {
  font-size: clamp(1.75rem, 1.335635rem + 1.767956vw, 2.75rem);
  line-height: 1.15;
  max-inline-size: 22ch;
}
Enter fullscreen mode Exit fullscreen mode

In MDN's definition of clamp(), the three positions are the lower bound, preferred expression and upper bound. The middle expression can grow while the bounds keep the result within the chosen range.

Check more than the endpoints

At a 16px root size, the rounded expression should produce approximately:

Viewport Font size
320px 28px, held by the minimum
375px 28px
768px 34.95px
1280px 44px
1440px 44px, held by the maximum

These values are calculated from the expression. The Section heading preset in my generator was also checked with the 375–1280px range. This is not physical-device testing.

Make wrapping visible

Try both headings:

Website design
Website design for service businesses with growing teams
Enter fullscreen mode Exit fullscreen mode

The second may wrap into several lines. If it collides with a fixed-height container, the font-size formula is not necessarily the problem. Inspect the container's height, width and spacing too.

The 22ch line-length limit is a starting point. Change it when your actual font and content need something different.

Check text resizing in the real layout

The 28px and 44px values assume a 16px root size. A different root changes the REM terms. Zoom and text-resizing preferences can expose clipping or unexpected wrapping.

Keep the root size consistent with your project, then test larger text and zoom on the actual page. A smooth formula can still live inside a layout that cannot grow.

I maintain the free CSS Clamp Generator. Use its Section heading preset, preview common widths and copy the expression, or use the calculation above directly. The useful part is choosing and checking the bounds deliberately.

Disclosure: I maintain the linked tool or kit. This article was prepared with AI assistance. Practical checks are identified separately from illustrative examples; verify the result in your own project.

Top comments (0)