Clamped Font Size Property - tomhodgins/process-css-demo GitHub Wiki

A custom property that allows to express a scalable font size for an element using three numbers: a minimum size limit, an ideal scaling factor to aim for, and a maximum size limit.

This is similar to what font-size: clamp(min, mid, max) would do if there were element-based units you could use for the mid value. Unfortunately though clamp() is arriving in CSS soon, we won't be able to easily use it with element-based units natively soon so a custom property qill be required for us to support that ourselves

--clamped-font-size: <min>, <mid>, <max>;

• <min>, <mid>, <max> are any numbers JS understands, e.g 1, 1e3, or Infinity

You can use a clamped font size to express a scalable font size whose scaling factor is based on a percentage of the element's own rendered width on the page, while also specifying a minimum cutoff below which the number will never reach even if the scaling factor would make it smaller, and aa maximum size beyond which the font size will not be allowed to grow even if the scaling factor would ask for it. For example, to describe a font size that's always 10% of the element's width with no cutoff you could write the lower limit as 0 and the upper limit as Infinity:

h1 {
  --clamped-font-size: 0, 10, Infinity;
}

To express a font size that aims to be 10% of the element's rendered width, but shrinks no smaller than 12px, and grows no larger than 50px you could express that as:

h1 {
  --clamped-font-size: 20, 10, 50;
}