Tracking: fluid typography

[ramonjd]

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

[eric-michel]

@ramonjd I have a quick question regarding #49815.

Is there a way to independently specify the maximum viewport width for fluid font size calculations? The change in 49815 will significantly reduce the width at which our font sizes will begin shrinking, and could break certain layouts on legacy sites. Going forward, I definitely support using settings.layout.wideSize as the maximum viewport width, but I would like to keep 1600px as the max value for existing sites just to avoid any possible issues.

If this is something I can set in theme.json right now on those older sites in anticipation of this PR becoming active in WP core, that would be super helpful.

edit: Looking at the theme.json schema, I don't see a setting for this. I think it would be very useful to make both values (the max and the min) for the calculation independently customizable for those who wish to do so.

[ramonjd]

Thanks for the question @eric-michel

This is something I wanted to do much earlier on. See comment and commit history of:

• Fluid typography: add configurable settings for minimum font size to theme.json #42489

You're right, it's not possible to configure at the moment, unless you fiddle with the layout width.

I think it should be possible for theme authors to configure both the min and the max in theme.json. I've added a PR here to remind myself to come back to it 😄

• Fluid typography: add min and max viewport width configurable options #53081

[porg]

Please integrate #53525 to section "Wishlist"

[briceduclos]

@ramonjd Are there any plans to add the minimum font size factor as a configurable option in theme.json?

$minimum_font_size_factor     = min( max( 1 - 0.075 * log( $preferred_font_size_in_px, 2 ), $default_minimum_font_size_factor_min ), $default_minimum_font_size_factor_max );
$calculated_minimum_font_size = round( $preferred_size['value'] * $minimum_font_size_factor, 3 );

The min and max viewport width configurable options are a great improvement. Adding the min size factor would offer precise control over the responsiveness of font sizes. For my website, the current factor makes the curve move towards the minimum too slowly at the beginning and too quickly at the end.

[ramonjd]

Are there any plans to add the minimum font size factor as a configurable option in theme.json?

Thanks for the ping.

Allowing more config options was something that I explored in a previous, now closed, PR..

scaleFactor is definitely something that may be useful to tweak as it controls how fast the font sizes change between min and max limits.

Another idea, and something I'd like to pursue, is leveraging filters to override some things.

It was decided to move slowly with this sort of stuff to provide room for more testing as every change as the potential to affect existing sites implementing the fluid font size system.

It's on the wishlist in the description of this tracking issue 👍🏻

[annezazu]

Wanted to note adding this to the mix: #58135

[ramonjd]

I'm going to close this tracking PR, as the main feature has been implemented since WordPress 6.1.

Subsequent bugfixes and stability updates are complete.

The outstanding issues can stand on their own.

• Fluid typography: pass theme.json settings to override merged theme data #58362 is close to completion
• Fluid typography: Numerical values shall support "ref" data type for better design synchronization e.g. typography.fluid.maxViewportWidth = "ref": "settings.layout.contentSize" #53525 might be feasible if the above PR merges
• Typography: Casting float value to string makes it comma separated in some locales (PHP version < 8) #57607 is a wider PHP issue and not isolated to fluid typography