Intent to implement: font-size-adjust css property

[ChangSeok Oh]

Contact emails
shiva...@gmail.com, changs...@collabora.com

Spec
http://www.w3.org/TR/css-fonts-3/#propdef-font-size-adjust

Summary
The font-size-adjust CSS property specifies that font size should be chosen based on the height of lowercase letters rather than the height of capital letters. It was once dropped since css 2.1, but newly defined in CSS3 font.

Motivation
Supported fonts can be various depending on platforms so content authors usually set two more font names to font-family as a fallback list. The problem is that a chosen font from the list does not share same legibility thus it sometimes appears less readable when font fallback occurs. How readable font is said that it's determined by an aspect value (= x-height of a font / size of a font). The font-size-adjust property preserves the readability of text where font fallback happens. It does this by adjusting the font-size with a x-height (to be specific, keeping x-height same with the given value regardless of the font used.) 

Compatibility Risk
IE : No signal
FF : Supported since its version 3.
Safari : No signal
Web developer : No signal

Ongoing technical constraints
None

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
Yes

OWP launch tracking bug?
http://crbug.com/451346

Link to entry on the feature dashboard
https://www.chromestatus.com/features/5720910061371392

Requesting approval to ship?
No

ChangSeok

[Philip Rogers]

I did a search and it's present on 400/5,861,260 pages from the httparchive. This seems like a feature authors want, but would a media query based on which font is loaded work better (e.g., allow baseline adjustment and spacing for non-latin text)?

+cc font experts.

[Tab Atkins]

That's not how media queries work. 😜

[ChangSeok Oh]

Hi Philip. 

I don’t know well the media query though, its purpose sounds slightly different from that of font-size-adjust.

font-size-adjust css property aims to guarantee same readability among listed fonts whether they’re supported or not by platform.

As my understanding, it doesn’t care about media type or screen size.

ChangSeok

[Philip Rogers]

The media query proposal was brought up a few times on www-style (https://lists.w3.org/Archives/Public/www-style/2015Jan/0446.html) and I wasn't sure if it was a viable counter-proposal.

I think this api makes sense though, and will not introduce much complexity to the engine. LGTM to implement.

[Tab Atkins Jr.]

LGTM2

> To unsubscribe from this group and stop receiving emails from it, send an
> email to blink-dev+...@chromium.org.

[Philip Jägenstedt]

Is this a feature that Web developers want? It seems to me like if you
have to mix fonts things are going to look terrible even if you scale
the fallback to have the same aspect value. The glyph height and
thickness won't match. Wouldn't one be better of using a Web font
which covers all of the Latin scripts which one is interested in?

(FWIW, I recognized that fallback fonts are a problem, in particular I
sometimes see it with Vietnamese text and it looks terrible if the
fonts are different.)

Philip

[ChangSeok Oh]

Hi. 

I don’t know how much web developers want this. (Out of interest, Is there any way to see a popularity of a specific web api? If so, let me know I’ll check =))

What I can tell you is that font-size-adjust is a convenient way to keep ‘actual' font sizes same among different fonts. This doesn’t affect line-height so I don’t think the css property causes a serious issue like layout. If so, it might need to be fixed in spec level.

I agree with you on the view, using web font is a better choice to keep a consistency. But in real world, we can’t force all web developers to use it in their content. As I know, they tend to use a default system font installed by not to set a specific font-family or just to set ’serif’ or 'san-serif’. In this case, font-size-adjust would be useful to keep a legibility, and it sometimes improve readability.

We can try and test the feature in firefox.  [1][2]

I hope they to help you understand the usability of font-size-adjust.

FYI, I just submit my first patch so you can try it on blink as well. ;) [3]

[1] https://developer.mozilla.org/samples/cssref/font-size-adjust.html

[2] http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_font-size-adjust

[3] https://codereview.chromium.org/943463002/

ChangSeok

[Yoav Weiss]

On Thu, Feb 19, 2015 at 11:17 AM, ChangSeok Oh <shiva...@gmail.com> wrote:

Hi. 

I don’t know how much web developers want this. (Out of interest, Is there any way to see a popularity of a specific web api? If so, let me know I’ll check =))

A good indication, since this is already supported by Firefox, is to look at usage stats and usage growth since the feature was released.

 

Another (non-scientific) way is to ask typography geeks on twitter to spread the word and gather feedback. I'll try to do that.

FWIW, it seems to me like that feature would be helpful to reduce the visual problems introduced by fallback fonts.

[Yoav Weiss]

On Thu, Feb 19, 2015 at 3:26 PM, Yoav Weiss <yo...@yoav.ws> wrote:

On Thu, Feb 19, 2015 at 11:17 AM, ChangSeok Oh <shiva...@gmail.com> wrote:

Hi. 

I don’t know how much web developers want this. (Out of interest, Is there any way to see a popularity of a specific web api? If so, let me know I’ll check =))

A good indication, since this is already supported by Firefox, is to look at usage stats and usage growth since the feature was released.

 

Another (non-scientific) way is to ask typography geeks on twitter to spread the word and gather feedback. I'll try to do that.

I asked and the response was overwhelmingly positive. So seems like the answer is "Yes, Web developers do want this".

[ChangSeok Oh]

I asked and the response was overwhelmingly positive. So seems like the answer is "Yes, Web developers do want this”.

That’s a good news. thanks for the tweet. =)

A good indication, since this is already supported by Firefox, is to look at usage stats and usage growth since the feature was released.

I googled this for a while. But no luck yet. What I could find was http://caniuse.com/#search=font-size-adjust.

It says 12.45% in global though, the number seems not to mean an actual font-size-adjust usage itself. Rather it means how many portion of browsers used by users support the feature as my understanding.

Did you mean Mozilla provide a useful statics of web features/api used in web? If so, would you please let me know the address? Or other alternative ways in a little more depth? :P  

ChangSeok

[Philip Jägenstedt]

Other that Blink's UseCounter system, one way to estimate usage is to
use the httparchive data. In the 20150101 data, 12054 out of 380473
pages (3%) have the string 'font-size-adjust' somewhere. There are
some duplicates, but the 9631 unique URLs are in
https://gist.github.com/anonymous/b175b46e73887e88c027 if anyone wants
to take a look. I have no idea on how many of these pages it would
visible difference.

Philip

[Philip Jägenstedt]

On Fri, Feb 20, 2015 at 5:58 AM, Yoav Weiss <yo...@yoav.ws> wrote:

On Thu, Feb 19, 2015 at 3:26 PM, Yoav Weiss <yo...@yoav.ws> wrote:

On Thu, Feb 19, 2015 at 11:17 AM, ChangSeok Oh <shiva...@gmail.com> wrote:

Hi. 

I don’t know how much web developers want this. (Out of interest, Is there any way to see a popularity of a specific web api? If so, let me know I’ll check =))

A good indication, since this is already supported by Firefox, is to look at usage stats and usage growth since the feature was released.

 

Another (non-scientific) way is to ask typography geeks on twitter to spread the word and gather feedback. I'll try to do that.

I asked and the response was overwhelmingly positive. So seems like the answer is "Yes, Web developers do want this".

Thanks Yoav. One of your replies linked to http://webtypography.net/talks/rdo13/ which talks about making the fallback match a Web font better, which seems worthwhile. This is quite different from the case of fallback for individual missing glyphs which I imagined was the main use case.

LGTM2.

Philip