Make WordPress Core

Opened 11 months ago

Closed 3 months ago

Last modified 3 months ago

#58603 closed defect (bug) (fixed)

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

Reported by: mikachan's profile mikachan Owned by: joedolson's profile joedolson
Milestone: 6.5 Priority: normal
Severity: normal Version: 6.3
Component: Bundled Theme Keywords: has-patch needs-testing needs-screenshots
Focuses: accessibility Cc:

Description

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

Attachments (2)

58603-65-beta1.png (145.7 KB) - added by poena 3 months ago.
XXL font size before PR. 83.6362px at 500px width (In Chrome, macOS)
58603-pr-4676.png (158.0 KB) - added by poena 3 months ago.
XXL font size with PR 4676. 110.364px at 500px width (In Chrome, macOS)

Download all attachments as: .zip

Change History (23)

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


11 months ago
#1

  • Keywords has-patch added

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

#2 @sabernhardt
11 months ago

  • Focuses accessibility added

#3 @mikachan
11 months ago

  • Keywords needs-testing added

#4 @mikachan
10 months ago

  • Type changed from enhancement to defect (bug)

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


10 months ago

#6 @joedolson
10 months ago

  • Keywords needs-screenshots added

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.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


10 months ago

#8 @poena
10 months ago

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

#9 @mikachan
10 months ago

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.

#10 @joedolson
9 months ago

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.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


7 months ago

#12 @joedolson
7 months ago

  • Milestone changed from Awaiting Review to 6.5
  • Owner set to joedolson
  • Status changed from new to accepted

#13 @poena
4 months ago

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

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


4 months ago

#15 @joedolson
4 months ago

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

#16 @poena
4 months ago

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.

#17 @poena
4 months ago

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...

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


3 months ago

#19 @poena
3 months ago

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
3 months ago

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

@poena
3 months ago

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

#20 @joedolson
3 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.