Gutenberg: Fluid Typography Option

[iamtakashi]

It'd be nice to allow to have fluid typography option so that design would look good on all viewports. This would open the door for designers to make a more bold visual expression that's difficult to do with fixed font size.

@mtias told me about clamp https://developer.mozilla.org/en-US/docs/Web/CSS/clamp, and that looks a pretty good solution.

Related #23323

[mtias]

This would be neat to consider — also cc @nosolosw @jorgefilipecosta for global styles and theme.json consideration.

[jorgefilipecosta]

Following the suggestion, I gave in https://github.com/WordPress/gutenberg/pull/24250#discussion_r470021463.

I think the attributes where we reference a fontSize, lineHeights, padding, margins, widths, etc... should all be strings (instead of multiple attributes one for values and other for units as we have now in some cases).
Then in some cases, we can parse the value e.g:"13px" and display a UI control for changing that value. In other cases, we may not be able to parse the value, e.g.: "clamp(1rem, 10vw, 2rem);" for this case, we would show a text input where the user can use a raw mechanism to change the value.
When we think some type of value should have an easier to edit interface, we implement a parser for the value and a UI to manage it. For example, we may then add a mechanism that allows setting and editing clamp values in a specific UI component for "clamp".

If tomorrow CSS allows a new font size computation e.g: "font-size: next-size-computation( 10px, 10rm, ...). Themes would be able to use that mechanism right away without us needing to change any line of code (the value would be shown as a raw value). In a future version, we may then include a UI to edit that type of value if we think it has a big usage of is useful for building themes and patterns.

[aristath]

I think the attributes where we reference a fontSize, lineHeights, padding, margins, widths, etc... should all be strings (instead of multiple attributes one for values and other for units as we have now in some cases).

+1 to that... I started working on a similar approach for column widths (see https://github.com/WordPress/gutenberg/pull/24711#issuecomment-678975911)
The context is different, but the implementation is pretty much the same: switched a control to string, allowing users to enter a value of their choosing with validation for the units they enter.
Personally on my themes & sites I like doing something like font-size:calc(14px + 0.25vw) to define the root font-size, and everything else is then in em units.
That calc() however would require a freeform text field in global styles, can't be done without it.