Make WordPress Core

Opened 19 months ago

Closed 12 months ago

Last modified 10 months ago

#57065 closed enhancement (duplicate)

Fluid typography: custom values should be set as maximum font size, sizes below minimum shouldn't be clamped

Reported by: ramonopoly's profile ramonopoly Owned by:
Milestone: Priority: normal
Severity: normal Version: 6.1
Component: Editor Keywords:
Focuses: css Cc:


For 6.1.1

When converting custom font sizes to fluid values, the fluid typography functions calculate the minimum and maximum font sizes either size of the given custom font size.

Depending on the viewport width, the resulting fluid value may have a maximum font size value larger than the original custom value.

This may contradict user expectations.

All custom values should act as the maximum value in a clamp() function.

For example, if 8px is the custom value provided, it would be the maximum as would 1000px.

As for the minimum size, wherever the typography functions calculate one, that is, a min font size is not specified by theme.json, do not clampify font sizes <=14px. This is to prevent generating tiny font sizes.

See original Gutenberg issue in

Related trac ticket that introduced fluid typography in 6.1:

Change History (6)

This ticket was mentioned in PR #3602 on WordPress/wordpress-develop by @ramonopoly.

19 months ago

  • Keywords has-patch has-unit-tests added

Backporting changes in

Trac ticket:

### Updates to the fluid typography rules:

  1. Where no fluid max values are set (e.g., single or custom font size values), the "size" value will act as the maximum value in a clamp() function.
  2. In the absence of any fluid min / max values, we will enforce the lower bound rule of >16px. This applies to custom values from the editor or single-value theme.json styles. Font sizes below this will not be clamped.
  3. In a preset, if a fluid.min value has been specified, the lower bound rule of >16px won't be enforced on this value. Presets with a fluid object therefore, give precedence to theme author's values.
  4. In a preset, if there is NOT a fluid.max but there is fluid.min, use the incoming "size" value as the max.
  5. In a preset, if there is NOT a fluid.min but there is a fluid.max, use size * min_size_factor as the min. Here we do enforce the lower bound rule of >16px, because Gutenberg is computing the min value. This is consistent with the way we calculate minimum sizes for single or custom values.

### Testing

Using theme 2023

Add some text blocks to the editor, apply presets and custom sizes, and ensure they appear as they should in the editor and frontend at various viewport widths.

The size value should act at the upper bound of any clamp value.

Custom font sizes <=14px will not be clamped.

Please test by playing around with:

  1. Font size presets in theme.json
  2. Global styles in theme.json (global, elements, blocks)
  3. Global styles in the site editor (global, elements, blocks)
  4. Typography block supports at the individual block level in the post/side editor

@ramonopoly commented on PR #3602:

19 months ago

Failing PHPUnit 7.1 tests look unrelated

annezazu commented on PR #3602:

19 months ago

@hellofromtonya might you be able to help with this?

#5 @ramonopoly
12 months ago

  • Resolution set to reported-upstream
  • Status changed from new to closed

This has been merged already.

#6 @desrosj
10 months ago

  • Keywords needs-testing has-patch has-unit-tests removed
  • Milestone Awaiting Review deleted
  • Resolution changed from reported-upstream to duplicate

Duplicate of #57075.

Note: See TracTickets for help on using tickets.