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).
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.
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.
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%
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%)
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
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:
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:
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.
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.)
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.
