# Accessibility: automatically selecting a larger text size for visually impaired users

**URL:** https://meta.discourse.org/t/accessibility-automatically-selecting-a-larger-text-size-for-visually-impaired-users/203618
**Category:** Feature
**Created:** [September 15, 2021, 9:53am UTC](https://meta.discourse.org/t/accessibility-automatically-selecting-a-larger-text-size-for-visually-impaired-users/203618 "2021-09-15T09:53:43Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [September 15, 2021, 9:53am UTC](https://meta.discourse.org/t/accessibility-automatically-selecting-a-larger-text-size-for-visually-impaired-users/203618/1 "2021-09-15T09:53:43Z")

</div>

I’ve been asked by one of our users to increase the text size of our instance. Fortunately, this is easy to do for her personally using the interface settings (see [https://meta.discourse.org/my/preferences/interface](https://meta.discourse.org/my/preferences/interface)).

She tells me that other sites and apps have the ability to do this automatically if the device has a large font selected.

Discourse used to have dark mode being user-selectable only but this has changed in the last year to be automated (if configured correctly). It would be brilliant to have the same dynamic for text size. Indeed, this is far more important, as visually impaired folk will struggle to find the setting with the text being small.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [January 17, 2022, 9:18pm UTC](https://meta.discourse.org/t/accessibility-automatically-selecting-a-larger-text-size-for-visually-impaired-users/203618/2 "2022-01-17T21:18:48Z")

</div>

I’m not sure @awesomerobot is this something that can be auto-detected akin to light / dark mode?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [January 17, 2022, 10:35pm UTC](https://meta.discourse.org/t/accessibility-automatically-selecting-a-larger-text-size-for-visually-impaired-users/203618/3 "2022-01-17T22:35:04Z")

</div>

If you adjust the font-size in your web browser Discourse should scale as any other website will… but it looks like if you adjust the operating system font-size in iOS, it only impacts app sizes and not necessarily website font sizes.

If we use `font: -apple-system-body;` we can also scale along with the system (Apple calls this Dynamic Type). I _think_ Android does this automatically, and shouldn’t need any changes… but I’ll double check.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [February 16, 2022, 2:30am UTC](https://meta.discourse.org/t/accessibility-automatically-selecting-a-larger-text-size-for-visually-impaired-users/203618/5 "2022-02-16T02:30:33Z")

</div>

Giving this a try here:

[https://github.com/discourse/discourse/pull/15967](https://github.com/discourse/discourse/pull/15967)

There are a couple peculiarities to work around that I noted in the PR, but it seems like this should work as expected.

Nothing additional needed for Android, the browser already scales font-sizes along with the system setting there.

---

<div class="post-metadata">

### Author: ![rrit](https://avatars.discourse-cdn.com/v4/letter/r/b5ac83/32.png) [@rrit](https://meta.discourse.org/u/rrit)
#### Post date: [February 16, 2022, 2:37pm UTC](https://meta.discourse.org/t/accessibility-automatically-selecting-a-larger-text-size-for-visually-impaired-users/203618/6 "2022-02-16T14:37:48Z")

</div>

This is the Apple iOS Safari way to select your default Zoom-Level for all websites:  
Go to settings → Safari → Settings for Website → Page Zoom → Other Websites:  
50/75/85/100/125/150/175/200/250/300%

See: [How to Make Text Bigger in Safari for iOS - MacRumors](https://www.macrumors.com/how-to/make-text-bigger-safari-for-ios/)

* * *

By defaulting to `font: -apple-system-body;` for discourse-websites only we totally differ from the widely used base `font-size: 15px` for paragraphs.

This now introduces a special case for all discourse-websites: Font is to big.  
And every user must set a special zoom-level for discourse-website-domains of e.g. 85%.  
Or in case a user has already set a higher zoom-level in Safari of e.g. 150%, she now must set this to e.g. 125% for discourse-domains only.

**I’m strongly recommending not to implement this!**  
Please revert the merge of this PR.

Please check what happens if on iPhone iOS your system font setting is somewhere around 150% and the Safari Page Zoom is set to 150%:

- For normal websites this should result in 150%
- With the new change to Discourse `font: -apple-system-body;` this might result in 225% (= 150% \* 150%)

* * *

> [@awesomerobot](#):
>
> Nothing additional needed for Android, the browser already scales font-sizes along with the system setting there.

As far as I know Chrome on Android does not: Only the Chrome Interface is zoomed by the system setting.  
For website font-size zooming open Chrome and go to Settings → Accessibility → Text scaling

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [February 16, 2022, 2:50pm UTC](https://meta.discourse.org/t/accessibility-automatically-selecting-a-larger-text-size-for-visually-impaired-users/203618/7 "2022-02-16T14:50:12Z")

</div>

> [@rrit](#):
>
> As far as I know Chrome on Android does not: Only the Chrome Interface is zoomed by the system setting.

Maybe it varies by device or Android version? This is from a test I did with the system font scaled up in accessibility settings. No changes to the browser:

 ![Screen Shot 2022-02-16 at 9.48.56 AM](https://global.discourse-cdn.com/meta/original/3X/4/5/45c32670ce18227c1981a862f61709851d107437.png)

---

<div class="post-metadata">

### Author: ![rrit](https://avatars.discourse-cdn.com/v4/letter/r/b5ac83/32.png) [@rrit](https://meta.discourse.org/u/rrit)
#### Post date: [February 16, 2022, 3:00pm UTC](https://meta.discourse.org/t/accessibility-automatically-selecting-a-larger-text-size-for-visually-impaired-users/203618/8 "2022-02-16T15:00:26Z")

</div>

> [@awesomerobot](#):
>
> ![Screen Shot 2022-02-16 at 9.48.56 AM](https://global.discourse-cdn.com/meta/original/3X/4/5/45c32670ce18227c1981a862f61709851d107437.png)

Here the paragraph is scaled only, headline and all other text elements are still small in size!  
This is some special behaviour of Chrome to only scale parts of the text – search “Font Boosting” or see:

> **[text-size-adjust CSS property - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-size-adjust)**
>
> The text-size-adjust CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.

- stackoverflow: [Chrome on Android resizes font](https://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font)
- [Android: Chrome & Edge change font-size on scroll – Font Boosting or Blink-Bug? (german)](https://benedikt.io/2021/04/android-chrome-edge-aendern-schriftgroesse-scrollen-font-boosting-blink-bug/)

* * *

`text-size-adjust` might need normalizing on iOS:

> <https://github.com/necolas/normalize.css/blob/fc091cce1534909334c1911709a39c22d406977b/normalize.css#L6-L14>

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [February 16, 2022, 3:00pm UTC](https://meta.discourse.org/t/accessibility-automatically-selecting-a-larger-text-size-for-visually-impaired-users/203618/9 "2022-02-16T15:00:36Z")

</div>

I am noticing some unintended side-effects now that this is deployed on Meta, not sure why it was working differently in my dev environment, will revert and look into it some more… probably can’t do this for now… it impacts too many things outside of font-size.

[https://github.com/discourse/discourse/pull/15971](https://github.com/discourse/discourse/pull/15971)

---

<div class="post-metadata">

### Author: ![rrit](https://avatars.discourse-cdn.com/v4/letter/r/b5ac83/32.png) [@rrit](https://meta.discourse.org/u/rrit)
#### Post date: [February 16, 2022, 3:12pm UTC](https://meta.discourse.org/t/accessibility-automatically-selecting-a-larger-text-size-for-visually-impaired-users/203618/10 "2022-02-16T15:12:12Z")

</div>

On general case of accessibility:  
I like the idea of keeping the base-font for paragraphs to the default 16px which all browsers have set as default font-size.

This would increase the text-size by 6-7% (16px/15px = 1,0666).  
For mobile devices like Phones and Tablets this looks okay. For desktop this would be slightly to big and unusual.

If we go this way, maybe implement some special rule for non-touch-devices to use 15px base-font instead. (By checking for non-touch-devices we definitely miss some notebooks with touch-screens - they then get the bigger font-size.)

---

<div class="post-metadata">

### Author: ![MikeNolan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mikenolan/32/297597_2.png) [@MikeNolan](https://meta.discourse.org/u/MikeNolan)
#### Post date: [June 20, 2023, 2:40am UTC](https://meta.discourse.org/t/accessibility-automatically-selecting-a-larger-text-size-for-visually-impaired-users/203618/11 "2023-06-20T02:40:10Z")

</div>

Is this still an issue with IOS devices? I can increase the size of the font but it doesn’t change the wraparound size. I don’t have access to an Android phone/tablet to test it with.
