Twenty Twenty-Three: Update font sizes to ensure accessible responsive typography

[mikachan]

After seeing @ryokuhi's tutorial on how to calculate ​accessible responsive typography, I believe some of the font size presets should be updated in Twenty Twenty-Three to ensure that all typography is as accessible as possible.

@ryokuhi explains a simple formula to calculate the ratio between the min and max font size values to ensure the resulting size is accessible: [min font-size] / [max font-size] >= 0.61

I believe the xx-large font size presets in the following variations should be updated to follow this rule:

• Default variation
• Aubergine
• Block-out
• Pitch
• Whisper

This updates some of the font-size presets in Twenty Twenty-Three to ensure that all responsive typography is as accessible as possible.

I used the following calculation to find these values: [min font-size] / [max font-size] >= 0.61

For example, Twenty Twenty-Three's old xx-large font-size: 4rem / 10rem = 0.4.

Compared to the new xx-large font-size: 6.1rem / 10rem = 0.61

Many thanks to @Ryokuhi for providing a great explanation of ​accessible responsive typography, and ​an easy formula for working out accessible font size values 🙇

Please let me know if any of these values don't look correct!

Trac ticket: https://core.trac.wordpress.org/ticket/58603

[joedolson]

While we definitely would *like* to do this, we have some significant concerns about changing font sizing in an already released theme, and the impact that could have on user's existing designs.

If we can do enough testing to verify that these changes don't impact existing designs in the majority of scenarios, this might be feasible.

We definitely want to take this into consideration for a new theme variation and for future core themes, however.

[poena]

Are the default font size presets, the ones provided by core, accessible?

[mikachan]

While we definitely would *like* to do this, we have some significant concerns about changing font sizing in an already released theme, and the impact that could have on user's existing designs.

I understand; it's definitely not ideal to potentially impact so many existing designs with font size changes. The proposed changes only affect the XX-Large font size preset, so likely not the most popular size, but this still has the potential to impact existing designs at varying screen sizes.

Are the default font size presets, the ones provided by core, accessible?

Good point! I've just created a blank theme and enabled fluid typography, these are the font sizes I see:

Small: static 13px ✅
Medium: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.882), 20px): 14/20 = 0.7 ✅
Large: clamp(22.041px, 1.378rem + ((1vw - 3.2px) * 2.053), 36px): 22.041/36 = 0.61 ✅
X-Large: clamp(25.014px, 1.563rem + ((1vw - 3.2px) * 2.498), 42px): 25.014/42 = 0.59 ❌

So most of the presets are accessible fluid sizes apart from X-Large, which is just below the recommended 0.61 ratio.

[joedolson]

If we could bump the default x-large to 25.62, we'd meet the ratio. This seems like something worth doing; it's a pretty minor change to make.

[poena]

Can the default (core) X-Large font size be update as part of this ticket, or does it need a separate Gutenberg issue?

[joedolson]

@poena You're probably right that this should be reported upstream and fixed in Gutenberg. Can you do that?

[poena]

We need both a theme fix (the original issue tracked here) and an editor fix (new found issue).

I believe the calculations in the .json file changes are correct, and that the change is an improvement that justifies the change on live sites.

[poena]

I will open a new issue for the core font size as soon as I can figure out where it needs to be; I can only find these values in the tests...

[poena]

The PR applies cleanly for me on top of 6.5-beta1-57630.

I am not sure how how test this other than confirming that the calculations for the new sizes are correct.

[poena]

XXL font size before PR. 83.6362px at 500px width (In Chrome, macOS)

[poena]

XXL font size with PR 4676. 110.364px at 500px width (In Chrome, macOS)

[joedolson]

In 57690:

Twenty Twenty-Three: Update XX-large font-sizes for accessibility.

Update XX-large font-sizes so that the responsive typography meets the minimum ratio between the min and max font-sizes of 0.61 required for accessible responsive typography.

Props mikachan, ryokuhi, poena, dhruvishah2203, joedolson.
Fixes #58603.

In r57690