Switch to clamp for (most) responsive font sizes

[kjellr]

PR Summary:

This PR converts some (most) of Dawn's breakpoint-based font sizes to use clamp() instead. This provides a more natural set of font sizes for devices using a middle viewport.

The PR takes the font sizes currently used for large and small breakpoints, and uses those values as the min and max inputs for clamp() instead. The "preferred" middle values are generalized just to show the effect. We'd need to fine-tune them if we actually wanted to implement this.

Before

Note that there's an abrupt change in font sizes around 750px.

13-19-huvwo-0gy4m.mp4

After

Note that the abrupt change is gone, and font sizes transition fluidly from the large font size down to the smaller one.

13-20-8zctp-wqlho.mp4

Testing steps/scenarios

1. Log into the demo site.
2. Find the try/responsive-type-sizes branch in the theme library.
3. Preview the theme, try a variety of viewports.

[ludoboludo]

I love this 😍
Something that helped me just now visualize more what 4vw can represent is this article from Smashing. I like thinking of it as 4vw = 4% of the viewport width and having a table with our current breakpoints to show what is the applied value in terms of pixels will help anyone reviewing/trying to understand how it works.

Here is what I found super useful in that article mentioned above

I think you mentioned the tool brought up in the article before but I finally understand a bit better 😅
It also mentions some drawback in terms of accessibility and zooms and recommends using this technic for more titles and less for the body text.

Maybe we could start by only applying that approach to our titles and see where else it could be useful/needed.

[kjellr]

Yes, having a table like that definitely helps visualize the impact!

And also yes, I agree that it's most useful for headings. The main benefit is just scaling down text that's too big, and the biggest text usually tends to be headings. In general, body text shouldn't really need to change much across screen sizes anyway. 🙂