Fluid Typography: Derived clamp() calculation for min font size should be based on layout contentSize but instead seems hardcoded against 320px

[porg]

Description

As I understood it, the fluid typography feature in theme.json allows one to just set a min and a max per each fluid enabled font size definition at settings → typography → fontSizes , and the system derives/calculates the necessary clamp() function by correlating the min/max values against: settings → layout: contentSize + wideSize.

→ https://css-tricks.com/fluid-typography-wordpress-block-themes/#aa-declaring-fluid-type-in-a-wordpress-block-theme

---

I checked the calculated font size at different viewports both in Safari, Chrome:

• ❌ When narrowing the viewport the font min size (1rem = 16px) is not reached when reaching contentSize (650px in my TT3) but instead only when reaching 320px.
  • 💡 Suspicion: The calculation which derives/creates the clamp() function is falsely correlating the min value against the hardcoded value of 320px (a small mobile viewport, e.g. iPhone SE) instead of being based on contentSize.
• ✅ The font max size is indedd reached when reaching wideSize (well almost, forgiving some decimal precision)
  • At wideSize (1200px in my TT3) it is not exactly the maximum (1.125rem = 18px) but is 17.997px.
  • Only at viewport width 1202px it reaches the 18px.
  • I guess this is a normal CSS precision/rounding problem of the formula behind it.

Step-by-step reproduction instructions

theme.json

• settings → layout:

  {"contentSize": "650px","wideSize":"1200px"},

• settings → typography → fontSizes:

  {"fluid": {"max": "1.125rem","min": "1rem"},"size": "1.125rem","slug": "medium"},

Derived CSS

var(--wp--preset--font-size--medium): 
clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.227), 1.125rem);

Screenshots, screen recording, code snippet

Spreadsheet calculations/observations: fluid-typography.xlsx

Environment info

• WordPress 6.2.2
• Gutenberg plugin 15.9.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[t-hamano]

Hi @porg,

At the time you reported this issue, the wideSize was indeed taken into account in the fluid typography calculation, but I believe the small viewport width was a fixed value.

However, #53081 would allow you to define minimum and maximum viewport widths. This should be included in Gutenberg plugin 16.5, so please give it a try when that version is released.

I would like to close this issue, but if I have missed something, please comment.

[porg]

Yes the linked PR fixes the main aspects of my issue.

I also left a comment there on my remaining open concern that:

it should be possible that minViewportWidth and maxViewportWidth can take variable values like contentSize and wideSize or the defined breakpoint variables to have a synchronized design experience with no need to manually update numerical values in multiple places.

Please tune into that last open discussion point there. Thanks.