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.