Investigate Dynamic Type to improve accessibility for iOS users

[hannalaakso]

This came out of the work on #858.

We currently don't support adjusting the base font size on iOS devices due to iOS constraints.

However @36degrees spotted that Dynamic Type could solve this issue.

We should investigate this as it would be great to support iOS users who needs to adjust their base font size.

Who needs to know about this

Developers, Tim or Joe

[NickColley]

I believe it would require us to not use the GOV.UK font?

[36degrees]

From what I can tell, font: -apple-system-body; is doing more than just setting the font-family, and the dynamic font-sizing persists even if we override the font-family later - in other words, we can still use the font.

From a quick spike it seems to work well, with the exception that Laura's approach of 'scaling' the root font-size by setting it on the body won't work for us because everything is using rem. Frustratingly, this means that the 'base' font-size ends up being 17px. Setting the font-size on the html element stops the dynamic sizing from working, so that's not an option either.

I think we'd have to modify the typography-responsive helper to spit out another font-size declaration for iOS:

@supports (font: -apple-system-body) {
  font-size: $font-size / 17px * 1rem;
}

This seems to work, but will increase the size of our CSS and increase the complexity of that helper.

[NickColley]

Saw this which is related, which seems to suggest setting the system font on the root element then changing it allows for the resizing to work: https://twitter.com/eriksen_dk/status/1075555147856732161?s=17

[NickColley]

OK so need to do an investigation to see the impact on file size by adding that helper min/gzip, and if it's too large consider if it's a problem if the base size is 17px...

[NickColley]

Looks like 11.4 kB with Ollie's suggestion and 10.4 kB without, so a decent chunk.

[36degrees]

Going to try and get a working example set up so we can see how it works, and what difference it makes to asset size.

[36degrees]

Master branch:

$ wc -c dist/govuk-frontend-3.5.0.min.css
   88829 dist/govuk-frontend-3.5.0.min.css

$ gzip-size dist/govuk-frontend-3.5.0.min.css
10.4 kB

This branch:

wc -c dist/govuk-frontend-3.5.0.min.css
   99240 dist/govuk-frontend-3.5.0.min.css

$ gzip-size dist/govuk-frontend-3.5.0.min.css
11.4 kB

[NickColley]

We think that the file size difference is worth it considering the improvements to usability.

We have two additional questions:

1. Could we be OK with iOS devices having an initial root size of 17px instead of 16px (chat with Chris and Tim), this would mean we don't need to increase the file size.
2. Is it a good idea in general to use this as it feels a bit hacky, we need to speak to someone from Apple/Webkit team to figure this out.

[36degrees]

Interesting thread to read and follow here:
w3c/csswg-drafts#3708

[36degrees]

If we do decide to ship this, we should ship it as an experimental feature behind a feature flag, ask for teams to try it out and feedback, and then we can either remove it or enable it by default in a future breaking release.

[NickColley]

Agreed, it feels risky to ship a prefix vendored feature that is not standardised.

[NickColley]

We want to review this when the standards have progressed more in the future, so will close this out for now.

[JoshTumath]

We want to review this when the standards have progressed more in the future, so will close this out for now.

@36degrees @NickColley I'd appreciate any input that you might have on this issue in this new issue at the CSSWG. w3c/csswg-drafts#10674

[36degrees]

@JoshTumath I'm currently on parental leave and Nick hasn't worked for GDS for a few years now, but hopefully someone else from the team can take a look.