An overview issue to track fluid typography follow ups and enhancements.

Related:

• Typography Tools: Tracking #34345
• Responsive blocks & intrinsic web design #34641

Fluid typography base functionality

• Fluid Typography Option #24480
  • Block supports: add fluid typography #39529
  • Fluid typography: migrate fluid typography algorithm to JS for site editor #42688
  • Typography: add explicit bypass for fluid font size calculation #42757
• Fluid typography: custom font sizes should be converted to fluid font sizes values #44758
  • Fluid typography: convert server-side block support values #44762
  • Fluid Typography: Fix bug in global styles where fluid clamp rules were not calculated for custom values #44761
  • Fluid typography: convert font size inline style attributes to fluid values #44764
  • Make custom font sizes appear fluid in the block editor when fluid typography is enabled #44765
  • Fluid typography: covert font size number values to pixels #44807
  • Fluid typography: ensure fontsizes are strings or integers #44847
  • Search block: ensure font sizes values are converted to fluid in the editor #44852
• Fluid typography: add font size constraints  #44957
  • Fluid typography: add font size constraints #44993
• Fluid typography: custom values should be set as maximum font size #45504
  • Fluid typography: adjust font size min and max rules #45536
• Fluid typography: add configurable settings for minimum font size to theme.json #42489
• Global styles: convert preset font size values to CSS vars  #44967
• Fluid typography: use logarithmic scale factor to calculate a min font size #49707
• Fluid typography: use layout.wideSize as max viewport width #49815
  • Fluid typography: ensure max viewport width is used in the editor #51146
  • Fluid typography: extract logic to derive fluid typography settings #51188
  • Fluid typography: custom font-sizes should use max viewport width #51516
• Fluid typography: add min and max viewport width configurable options #53081
  • Fluid typography: rename viewport variables #53082
• Fallback to default max viewport if layout wide size is fluid. #53551
  • Add tests for fluid layout + typography #53554
• Fluid typography: do not calculate fluid font size when min and max viewport widths are equal #57866

Current improvements, fixes and extensions

• Fluid font size application is dependent on the global state #58135
  • Fluid typography: pass theme.json settings to override merged theme data #58362
• Fluid typography: Numerical values shall support "ref" data type for better design synchronization e.g. typography.fluid.maxViewportWidth = "ref": "settings.layout.contentSize" #53525
• Typography: Casting float value to string makes it comma separated in some locales (PHP version < 8) #57607
• Regression: clamp calculations are broken in the editor since Block editor: hooks: avoid getEditWrapperProps #56912 (comment)

Wishlist

• Add further config values. See comment and previous implementation. Or more control through filters. Max and min viewport have been already implemented in Fluid typography: add min and max viewport width configurable options #53081

Bugs, tasks, and issues not covered here

For bug reports and smaller tasks, we can use the [Feature] Typography issue label for tracking and visibility.

Closed unfixed

• Fluid typography: UI controls to enable/disable fluid font sizes for custom values #45502