Fluid typography: add font size constraints

[ramonjd]

Parent issue:

• https://github.com/WordPress/gutenberg/issues/44888

What problem does this address?

Where fluid typography is enabled, minimum and maximum font sizes in presets can be calculated according to defined min and max values, e.g.,

{
    "size": "2rem",
    "fluid": {
        "min": "2rem",
        "max": "2.5rem"
    },
    "slug": "medium",
     "name": "Medium"
 },

For the above preset, the font size, regardless of the viewport, will not be larger than 2.5rem and it will not be smaller than 2rem.

Where min and max values are not supplied, either in theme.json font size presets or as a custom font size in styles, the min and max values are calculated from the size itself, e.g., minFontSize * DEFAULT_MINIMUM_FONT_SIZE_FACTOR.

Where the size is itself very large or very small, this could lead to readability issues in certain viewports.

https://user-images.githubusercontent.com/6458278/195745240-71e50ce6-5912-49fb-a8f6-52129cc548a4.mp4

The use of em for example might also cause issues if the relative parent's font size is set very small.

What is your proposed solution?

Add default minimum (and maximum?) font size limits so that text does not become smaller than n1 or bigger than n2.

Proposed minimum font size is 14px/0.875rem/0.875em.

The default limits can be configurable to allow themers more control and added in conjunction with:

• https://github.com/WordPress/gutenberg/pull/42489

❗ What do we do with font sizes < 14px?

Users may define font-sizes that are smaller than 14px. IThe user-defined font size could be the minimum in a clamped value. For example if a user defines 9px for a block, then the minimum font size for that block will be 9px and a clamped value will be generated.

OR

Where users define font-sizes that are smaller than 14px in the editor or theme.json, and there is no specified minimum the value is not clamped (no fluidity).

cc @jasmussen @jffng

[jasmussen]

Oh yes, good issue. Let's get this bug fixed asap, it makes no sense to not have a size-floor for the default boolean fluid toggle, and the ability to customize this floor on a per-preset basis strikes a great balance.

[annezazu]

Added to the Core Editor triage board and noted in the 6.1 release leads channel.

[ramonjd]

Just to be clear, and to properly plan this task, do folks think this fix should be shipped with WordPress 6.1 or a follow up minor release, e.g., 6.1.1?

Thanks!

[annezazu]

I think 6.1 if we can make it :) I don't see a reason not to since it's definitely a bug.

[ndiego]

Yeah, I second a 6.1 inclusion if possible. Personally, I feel that Fluid Typography is a banner feature for 6.1 and it would be good to get it as polished as possible.

[ramonjd]

Interested to hear opinions on how we deal with user-defined font sizes that are smaller than the prescribed minimum. Discussion over on the PR: https://github.com/WordPress/gutenberg/pull/44993#issuecomment-1281537580

cc @mtias

[ramonjd]

Hi folks!

I have a Core backport here: https://github.com/WordPress/wordpress-develop/pull/3489

Any assistance you can provide to usher it along would be greatly appreciated. 🙇