[css-fonts-5] Should absolute font size keywords scale at different rates depending on user's preferred text scale?
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- Avg merge
- 2d 18h
- Merged PRs (30d)
- 24
Description
#10674 and #12380 have introduced env(preferred-text-scale) and <meta name="text-scale"> to allow authors to respect the user's text scale preference. The user can increase their text scale either in their OS settings or sometimes (currently just on desktop browsers) in their UA settings. When the meta tag is set to the scale keyword, the initial font size will change depending on the user's text scale preference.
The font-size property accepts absolute font-size keywords, which are sized in proportion to medium, which is the initial font size.
[ xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large ]
Depending on how the user increases or decreases their text scale preference from the default, they risk making xx-small too small to be readable and xxx-large so large that it takes up too much screen real estate.
Should the absolute font size keywords use different scaling factors depending on the size of the user's text scale preference?
[!NOTE]
For example, if the user sets a really big text scale like 200%, what should happen? By default,mediumis16px, so thexxx-largefont-size is 48px. Therefore, ifmediumis increased by 200% to32px, so thexxx-largefont-size is 96px.Is that too big? The user desires the body text to be doubled to 32px, but do they really need a 96px heading? That will take up a lot of screen real estate, which is more of a problem on smaller viewports/mobile devices.
Also, are there ways other than the absolute size keywords that authors can achieve this?
Prior work
Apple OSs' system fonts scale at different rates depending on the user's text scale setting (referred to as 'Dynamic Type').
WebKit defines proprietary font shorthand property values for getting the system dynamic type fonts. For example:
font: -apple-system-body;
font: -apple-system-headline;
font: -apple-system-subheadline;
These wouldn't just set the macOS or iOS standard font-sizes but also the system font-family.
It was previously discussed for standardisation back in 2015.
See also
CC @fantasai @smfr
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the CSS Fonts 4 absolute-size mapping and the text-scale work in issues #10674 and #12380. Compare the Apple Dynamic Type references and the WCAG3 discussion, then determine whether absolute keywords need non-uniform scaling and what author alternatives should be documented. Done means reaching a resolved scaling model suitable for standardization.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100