🦀 clamp() battle

[zarahzachz]

The design system currently has a small selection of responsive font-sizes being used (mostly for large headings, Drawer, and StepList).

We’re hoping in our next major release to bundle all font changes in that release, so this seems a prime opportunity to figure out if we want to go all in on responsive font-sizing, or if we want to move away from that pattern and adopt the UKGOV solution of flat sizing across viewports.

🟢 Pro-Clamp (expanding responsive font-sizes)

clamp() is a new CSS function that allows you to define ideal minimum and maximum sizes, and scale between those values based on the viewport size.

E.g., say you want the text within a button to be the equivalent of 14px on mobile, but 18px on desktop; it would look something like font-size: clamp(14px, 5vw, 18px). The middle value in that function represents the ideal font-size and must be a responsive value (5% of the device viewport width, or vw, in this case).

There are several reasons clamp() is cool:

• Reduces amount of CSS needed to be written
  • Currently, the design system has to use media queries targeting specific device widths to define font-sizes
  • clamp() is a one-line solution that empowers the browser to handle the math to create responsive font sizes
• Decouples the idea of “pixel perfect” design from production code
  • Design no longer needs to specify font sizes in layouts across a myriad of viewports, instead they can specify their ideal smallest and largest font sizes and the browser will fill everything in between
• Using clamp() provides coverage for more devices, preventing any weird “jumps” in font-size when the viewport is resized

We can implement clamp() today on the few responsive font sizes we have with little to no noticeable change, but if we’re doing the work we might as well look at how we’re scaling font-size across the entire system while we’re at it.

Responsive font-sizing is good because:

• Providing 16px-ish font sizes for mobile, and variable font sizes on desktop is a fairly standard practice
• The design system has thicc fonts that need to adjust on smaller viewports
• Product and design like having stylistic options for different viewports

🔴 Anti-Clamp (remove responsive font-sizes)

Alternatively, we could remove the few responsive font sizes we use from the design system, again, following UKGOV's lead.

Removing responsive sizing has the following benefits:

• Predictable sizing from one viewport experience to the next
• Reduces amount of code (if we don't adopt clamp(), we can remove the media queries)
• Per UKGOV, "it’s no longer standard for smaller screens to use a smaller font size than on a desktop, as this negatively impacts those with visual impairments"

It's worth noting some of our larger fonts might be less legible on smaller viewports if responsive sizing is removed. Also, if we remove our responsive sizing, we would need to reevaluate the purpose our responsive utility classes serve.