w3c / w3c/csswg-drafts

[css-fonts-5] Should absolute font size keywords scale at different rates depending on user's preferred text scale?

Open
#12,475 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

a11y-tracker css-fonts-5
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, medium is 16px, so the xxx-large font-size is 48px. Therefore, if medium is increased by 200% to 32px, so the xxx-large font-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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.