Show different CSS font-smoothing options about fontbakery-dashboard HOT 3 OPEN

Per google/fonts#1170 the dashboard should have a way to review the results of different CSS font-smoothing options

It would be good to have this in the dashboard, it would be also good to be able to compare how different rendering settings or CSS properties affect a particular font. Though the anti-aliasing issue is significant.

Webkit AntiAliasing: Making Text Unreadable For All

Experimentally, the anti-aliasing/smoothing issue has the most negative effect on small/thin font iterations. I'm presently researching if this needs to be an accessibility issue for inclusion in a future WCAG standard.

As part of a series of experiments on perceptual contrast, we've identified webkit antialiasing as a major factor in unintended contrast reduction. There is an experiment page here:

Contrast Experiment: WCAG_CE14antialias

In test panel four, you'll see how the anti-aliasing makes small thin fonts disappear.

Moreover, if can make the effective contrast of fonts used in body text less than 4.5:1 (which I am on record as pointing out is not enough for body text in the first place - anti-aliasing can make that situation even worse).

from fontbakery-dashboard.

Please implement this feature so we don't have to continue arguing over font rendering on MacOS

In my opinion the default for the toggle should be to use browser defaults with the option to toggle on the non-standard (not part of CSS spec) font-smoothing option. There should be some explanatory text to help guide designers and developers when they are confused about why their chosen font renders differently on different browsers and platforms. As the toggle would only affect the rendering on MacOS (not sure about iOS) the toggle will be useless to Linux and Windows users. A better option might be to remove the non-standard and not in spec CSS, as per google/fonts#1170

As Google Fonts is so widely used I feel they owe it to the community to help educate and guide designers and developers around font rendering issues on MacOS.

from fontbakery-dashboard.

This would be a great solution :)

from fontbakery-dashboard.