[chrismorgan]

My strong recommendation is to stick to 1 browser em (~16px) on mobile-sized displays, and not to exceed 1.25 browser ems (~20px) on large displays. The formula provided in this article starts you at around ~17px, and exceeds ~20px on viewports wider than 1600px (quite common). That is: it’s too big.

I’d suggest instead something like ~16px at 360px viewport width, and ~20px at 1600px viewport width, and clamping at these values. Slightly different curve, and capped a little more sensibly, in my opinion. (Personally, I tend to stop shy of ~20px, going more for ~18px.)

With these specific values, a verbose expression of the font-size is:

  /* 1rem @ 22.5rem, 1.25rem @ 100rem */
  clamp(1rem, 1rem + ((1.25 - 1) / (100 - 22.5) * (100vw - 22.5rem)), 1.25rem)

I author fluid clamps in this form, and leave it to build tools like Lightning CSS to simplify the calc expression. For the specific values shown here: 22.5rem = ~360px, 100rem = ~1600px. You can definitely comfortably play fast and loose with the actual numbers.