[css-fonts] font-size: 'medium' value is the user's preferred font size

[TalbotG]

CSS2.1 and CSS2.2 have this sentence:

"
The 'medium' value is the user's preferred font size and is used as the reference middle value.
"

15.7 Font size: the 'font-size' property
https://www.w3.org/TR/CSS21/fonts.html#font-size-props
https://www.w3.org/TR/CSS22/fonts.html#font-size-props

I am convinced that a lot of web authors do not know this.

Now, in CSS3 and CSS4, such sentence was removed:

https://www.w3.org/TR/css-fonts-3/#font-size-prop

https://drafts.csswg.org/css-fonts/#font-size-prop

https://www.w3.org/TR/css-fonts-4/#font-size-prop

I think it should be reinstated.

[svgeesus]

If most people don't know, or don't take into account, or browsers don't implement, the concept that medium was supposed to be the user's preferred font size, then it was correct to remove it in Fonts 3. So, why reinstate it?

[TalbotG]

Chris,

If a wide majority of web authors don't know or don't take into account that 'medium' value is the user's preferred font size, then removing such statement will not improve their knowledge or competence and the opportunity to do so will be removed. A wide majority of ordinary web authors think and believe that CSS specifications are too technical. Such 9 words statement is not a burden.

As a web author, I do not know and can not know what are each of my visitors' preferred font size and it is impossible to match all of them simultaneously by choosing one absolute value (example given: say, 16px: which can be too small for some and too big for others). But what if I could match all of my visitors' individual preference setting in their browser for each of the platforms (mobile, tablet, laptop, desktop) they use with the screen resolution they have or choose, then we all win.

Why reinstate it?
1- for accessibility reasons
2- browsers implement it (MS-Edge offers only 4 predefined values for medium; IE11 offers 5 predefined values for medium; iPhone and iPad offers 7 predefined values; Firefox and Chrome offer full customization)
3- one arbitrary (font) size can not satisfy, can not suit everyone's viewing/reading abilities
4- web accessibility advocady groups or individuals refer to it implicitly or explicitly, directly or indirectly
5- other documents (Voluntary Product Accessibility Template, browser documentation, website support pages, WCAG) refer to it implicitly or explicitly, directly or indirectly

[AmeliaBR]

If most people don't know, or don't take into account, or browsers don't implement, the concept that medium was supposed to be the user's preferred font size, then it was correct to remove it in Fonts 3. So, why reinstate it?

For me, the first question is: do browser's implement it this way? That is, do they adjust the actual value of font-size: medium text to match the user's preferred setting, or do they match it to an absolute value? If so, it's up to the specs to make sure that web authors know about it.

Based on my test (Codepen):

• Chrome and Firefox do adjust medium to match the preferred font-size. (Which is slightly confusing in Chrome because their preferred font-size dialog itself uses small/medium/large/etc keywords as options, but that's a minor quibble compared to the usefulness of this feature!)

• As far as I can tell, MS Edge and Safari don't have any option, in the browser or OS level, to set a user preferred font-size.

So with two rendering engines implementing this behavior, and the other two not contradicting it, I'd say this relationship should be (once again) made explicit in the specs.

As part of that, I'd recommend reconsidering the terminology that these are "absolute size" keywords. They are absolute in the scope of a document (I.e., they aren't affected by inheritance), but they are not absolute in the same way that lengths are absolute.

[TalbotG]

Chrome (...) their preferred font-size dialog itself uses small/medium/large/etc keywords as options

As an user, you can then set, customize to whatever value you prefer in pixels what is the font-size of medium value in Chrome. In Appearence section, below "Font size", there is "Customize fonts" where you can set medium value to whatever value you prefer in pixels.

MS Edge and Safari don't have any option, in the browser or OS level, to set a user preferred font-size.

In IE11, there is a Text size setting (from the menu bar, View and then Text Size; or from the command bar: Page and then Text Size) with 5 predefined values: Smallest, Smaller, Medium, Larger and Largest. Medium value is default setting and is preset at 16px.

[TalbotG]

According to this video (duration: 31sec)
How to change default font size in Edge web browser
the user can only choose among 4 preset (small, medium, large, extra-large) values for her/his default font size and she/he can not customize her/his preference in pixels for the medium value (presumably preset at 16px).

In Konqueror, the user can set, customize the value she/he prefers in pixels for the medium value and then see how it looks, how big the glyphs are with a preset sentence ("The brown fox jumps over the lazy dog.").

I believe the user can set, customize the value she/he prefers in pixels for the medium value also in less common browsers and web-aware browsers (iCab, AntennaHouse, Prince, etc.).

[TalbotG]

Safari don't have any option, in the browser or OS level, to set a user preferred font-size.

According to fig 2 and fig 3 of
How to make the text larger in Safari for Mac OS X
the user can set, customize her/his preference in pixels for the medium value (default, initial value is 16px). The webpage does not mention, indicate the Safari version. Anyway... I am sure Myles Maxfield can tell for the latest version of Safari.

[AmeliaBR]

Thanks for the help @TalbotG. Unfortunately, both of those How-To's seem to be out of date.

I'm using Safari via an online testing tool, so I may not be seeing all the options, but there is no "Appearance" tab in the settings dialog, going back as far as Safari 6.

Edge has font-size controls in its "Reading Mode" view, but those don't affect regular page rendering (and in reading mode, they are implemented by changing the font size on the root <html> element, and using rem units in the text, not through the keywords).

Thanks for the information about other browsers/rendering engines.

[TalbotG]

I'm using Safari via an online testing tool

I am curious. What is such online testing tool you're using?

there is no "Appearance" tab in the settings dialog, going back as far as Safari 6.

You are most likely right. I can not find anything related to Safari 11 in recent webpages or videos.

---

Mac OS X can set at os level the default font size according to
How to Increase All System Font Size in Mac OS X May 23, 2016

---

iPhone and iPad allow users to customize the default, medium font size via a slider with 7 preset values.
How to Increase/Decrease Text Size in iOS 11/11.1/11.2/11.3 on iPhone/iPad March 30th 2018

[AmeliaBR]

I am curious. What is such online testing tool you're using?

I'm using Cross Browser Testing; it has a free integration with CodePen that is great for testing quick snippets across many browsers & devices. It also has many other more complex testing features, but they require a paid account.

[mrmazda]

There is no material difference in how a user adjusts his font preference in Safari vs. Gecko browsers. Both with the most common displays by default assume 96 DPI and 16px until such time as the user chooses to make a change. With HiDPI displays, it works the same way, but the physical meaning of a px is changed to compensate for the higher physical density. CSS medium in all is thus 16px until a user chooses to personalize.

Konqueror, depending on version, provides a choice between WebKit and KHTML rendering engines. Its initial default size is 12pt (pt that depends on display density, as in CSS2; not pt that equals px, as in CSS3). e.g., 16px on a 96 DPI display, 22px on a 132 DPI display, and 28px on a 168 DPI display.

Edge has subsumed the concept of a default text size within the scaling knob it calls "Zoom", a simplified way to make everything bigger or smaller than the shipped default. This is a bit like what Gecko users asked for WRT text size as long as 18 years ago and never have gotten:
https://bugzilla.mozilla.org/show_bug.cgi?id=31961
https://bugzilla.mozilla.org/show_bug.cgi?id=96096
https://bugzilla.mozilla.org/show_bug.cgi?id=332275

Whatever numerical value may be assigned to the default or medium size, or its CSS px equivalent, really is of no importance to a user, and should be of no direct importance to web authors. The default size is presumptively the optimal size for every web user. Medium is an ideal pseudonym for the default, and should be, like its CSS equivalent, 1rem, the unit upon which all CSS sizes should ultimately be based.

Medium should never have been removed from the specification in the first place. It's one of the few hints that CSS is supposed to be a language of suggestion that leaves ultimate control in possession of the reader, the only possible person who can determine the optimal text size for the display in front of his eyes.

[TalbotG]

MS Edge and Safari don't have any option,
in the browser or OS level, to set a user preferred font-size.
So with two rendering engines implementing this behavior, and the other two not contradicting it

There is an option in the browser in MS-Edge to set an user preferred font-size: with only 4 predefined values. Firefox and Chrome grant more latitude, leeway and fine flexibility than MS-Edge.

[svgeesus]

It still comes down to this, as @AmeliaBR said:

For me, the first question is: do browser's implement it this way? That is, do they adjust the actual value of font-size: medium text to match the user's preferred setting, or do they match it to an absolute value?

Whether browsers offer an option to adjust preferred font size (they do) and whether this is an accessibility benefit (it is) and the precise UI employed and how this scale or zoom is presented to the user, is not the issue here. The issue is, having changed the size, does the browser update what medium (and all the other keywords) mean?

Testing with Amelia's pen in Firefox (60.0b15) Chrome (Canary 68.0.3406.0) and Edge (EdgeHTML 17.17134) all three sizes (100%, medium, 16px) were the same, and all scaled together when zooming. Text can be made as large as you like, and everything scales together. So the low vision accessibility requirement is met, and also is more robust in the real world regardless of how the font size was set; the design scales fluidly.