Please remove "-webkit-font-smoothing: antialiased" from fonts.google.com #1170

tanc · 2017-08-28T12:57:31Z

The css rule -webkit-font-smoothing: antialiased; has been applied to all fonts.google.com pages where fonts are rendered. This results in browsers using the greyscale antialiasing method rather than default subpixel rendering of fonts. I believe this was probably introduced to get around inconsistencies in rendering between browsers, particular between Chrome and Safari on MacOS.

I understand that Chrome, since around version 50, has upgraded the rendering engine to support sub pixel rendering. The default rendering of fonts across browsers now looks almost the same (Firefox also got the upgrade).

When previewing fonts on fonts.google.com they are being rendering in a non-default way that makes them look different from when they are rendered on a different site that does not apply -webkit-font-smoothing: antialiased;

Can you please consider removing this css rule and let the browsers choose how to render the fonts so we can have more accurate previews of what they will look like when we use them?

The text was updated successfully, but these errors were encountered:

davelab6 · 2017-09-21T22:10:40Z

Thanks for suggesting this; however we want to keep the directory looking like this, to show the fonts off at their best :)

chrisdone · 2018-03-27T12:40:27Z

Just FYI, the fonts are more jagged due to this setting. Here is a close-up comparison of the antialiasing:

The bottom bit is with this CSS property turned off. You can see it's smoother (ever so slightly thicker; just the right amount), and looks way better on a Retina screen. I'm surprised anybody would use this property as it makes my eyes hurt reading text at a normal paragraph font size. I'm currently researching ways to turn it off.

fitojb · 2018-04-28T22:01:32Z

http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

EricSeastrand · 2018-09-06T19:20:00Z

@tanc Since you only need this for your own previewing purposes, why not just create a userscript that will override the -webkit-font-smoothing CSS property on those Google Font pages when you view them?

While I agree with you that font antialiasing is an antipattern, and that subpixel rendering is better in [almost] every way, I understand the motivation behind this: mobile devices can't support sub-pixel rendering because their screens must work in multiple orientations. Using antialiasing across the board ensures consistency (even if the results are less than ideal on computer screens).

sbussard · 2019-02-16T00:41:43Z

Why not just fix chrome?

nivicentiu · 2019-04-05T17:42:19Z

@willcodeforfood, I've never worked with userscripts, but I'm willing to learn to create one to disable font smoothing everywhere since it tires my eyes significantly. I installed Tapermonkey, read some documentation and tried a couple of scripts (attached), but nothing changed.
If you can provide some pointers about what I'm doing incorrectly, I would appreciate it.
I even tried downloading some pages and modified the -webkit-font-smoothing in the css to none, but still the fonts were smoothed.
thanks
script1.txt
script2.txt

RiZKiT · 2019-10-07T22:09:30Z

If someone still needs to fix this, use a browser plugin like stylish or stylus, there you can adjust webpage styles, without using a script plugin. Then import this style for example:
https://userstyles.org/styles/111304/chrome-font-fix

Myndex · 2020-09-11T11:24:24Z

Thanks for suggesting this; however we want to keep the directory looking like this, to show the fonts off at their best :)

Hi @davelab6 and @tanc

I realize this is a closed topic, but "-webkit-font-smoothing: antialiased;" and other font smoothing properties do NOT show fonts off at their best. What does show fonts at their best is the DEFAULT for the given device, and this is nearly always subpixel antialiasing. The font-smoothing "antialiasing" property is inferior to the default subpixel antialiasing both in quality and by reducing contrast needlessly.

Using "-webkit-font-smoothing: antialiased;" is not a feature, it's a bug, and font smooth is a CSS property that should be depreciated. Best results are to use the device's default antialias which is optimized for that device. That provides the best and most consistent results.

See also: http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

Thank you,

Andrew Somers
Myndex Color Science Researcher
W3C WAI/WCAG Invited Expert

sbussard · 2020-09-12T00:31:17Z

@Myndex wouldn't you agree that what looks best is at least somewhat subjective?

If -webkit-font-smoothing: antialiased is used on Apple.com, it looks more similar to photoshop's font rendering algorithm than Chrome's default, and developers and users alike seem to prefer it, then maybe it's worth considering if the default algorithm is really as good as some claim it is.

Myndex · 2020-09-12T04:29:09Z

@Myndex wouldn't you agree that what looks best is at least somewhat subjective?

If -webkit-font-smoothing: antialiased is used on Apple.com, it looks more similar to photoshop's font rendering algorithm than Chrome's default, and developers and users alike seem to prefer it, then maybe it's worth considering if the default algorithm is really as good as some claim it is.

Hi @sbussard thank you for responding.

NO, I would not agree.

The single biggest problem with the font smoothing CSS property is that if REDUCES CONTRAST by 30% or more, so that the text can become literally unreadable. It also reduces the rendered WEIGHT of the font, and worse still, it is only partially supported, so many systems don't recognize it at all. As a result, if a designer is using a system that does not support it, yet using a template that has it on by default, they commonly set colors and weight that are then utterly mangled on systems that do support it.

This has become an important accessibility issue (the focus of my research).

Here is an example:

Let's zoom in. Here is font smoothing ON (faux antialiased)

Here is the superior subpixel antialiasing, which is default.

It is clear that the faux antialias such as -webkit-font-smoothing: antialiased; does no better than the default, which takes advantage of the technology and with superior results. Additional benefits of the default subpixel antialias is that it is more consistent across platforms, does not reduce contrast 30%+, nor change the weight across platforms, nor negatively impact readability.

Faux antialias is frequently used in ignorance — it has become a part of so many templates that many are unaware it is lurking in the shadows. And it is hurting people by disregarding accessibility, albeit unintentionally. It is pervasive yet UNSEEN by developers that are using unsupported platforms.

It solves no problem, yet creates many others.

Regarding Apple's use: in their case, Apple is using a font of adequate size and weight, and more importantly a font color that provides very high contrast (140% per the beta SAPC/APCA) so even with the 35% reduction in perceived contrast, there is enough reserve contrast for good readability. And since one might assume that most that visit the Apple site are Apple product users, the consistency issue is not likely a problem. In short, Apple knows what they're doing.

But out in the wild, people are using the faux antialiasing (blending) on fonts of weight 300 or less, or small, and with colors that may be barely adequate in contrast normally—so when the faux antialiasing is applied, the reduced 30% contrast makes content unreadable. It is the single biggest accessibility issue in terms of visual content at the moment, affecting all users and not just those with accessibility needs.

Thank you,

Andrew Somers
Myndex Color Science Researcher
W3C WAI/WCAG Invited Expert

sbussard · 2020-09-12T05:45:46Z

The problem it solves is that Chrome makes fonts look extra bulky by default compared to popular design tools like photoshop. One has to wonder why Apple would even bother adding it if it does not solve a problem. At some point you've got to trust your eyes, or at least ask what the best designers in the world are trusting. To me it looks like Chrome's algorithm doesn't cut it aesthetically. It honestly feels like an argument between developers and designers on what makes good design.

Accessibility is important too, but designers are making the tradeoff essentially every time. It's Chrome's algorithm that needs to be updated.

tanc · 2020-09-12T07:27:58Z

But only on MacOS right? See https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth and https://caniuse.com/?search=font-smooth where you can see the property is not widely supported and has been removed from the spec. I agree that browsers could tweak their rendering but as far as making things look like Photoshop's default text rendering mode... that seems silly. Instead designers need to get educated about the different rendering across browsers, platforms, devices etc. Having Google Fonts display fonts in a non-standard way makes this much harder.

Though present in early (2002) drafts of CSS3 Fonts, font-smooth has been removed from this specification and is currently not on the standard track.

This feature is non-standard and should not be used without careful consideration.

I think a toggle as suggested in googlefonts/fontbakery-dashboard#50 makes sense, ideally with the default being the browser default and the toggle being the current default (antialiased using non standard css properties)

Maybe we should continue the conversation on that issue as this one is closed with the developers stating they aren't going to change things. Or open a new issue in this repository.

tanc · 2020-09-12T07:40:10Z

My mistake, that linked issue is only for a web application called Font Bakery, but it isn't clear to me where the project for the UI of Google Fonts resides. @davelab6 should we open an issue somewhere else to continue this conversation? Or is this closed issue the right place?

tanc · 2020-09-12T07:53:05Z

I've just taken a look at the https://fonts.google.com site and tried to find instances of -webkit-font-smoothing: antialiased; in the css and it doesn't seem to be applied across the site any more. Can anyone with a MacOS machine confirm the fonts are being displayed in their default rendering mode?

Maybe we're arguing for nothing!

thlinard · 2020-09-14T17:11:56Z

Tested with Safari 13.1.2 on macOS 101.15.6: still used on https://fonts.google.com/ but it's no longer used in the CSS file downloaded from fonts.googleapis.com (at least with the API version 2 "CSS2").

arnesava · 2020-09-15T20:05:32Z

I've just taken a look at the https://fonts.google.com site and tried to find instances of -webkit-font-smoothing: antialiased; in the css and it doesn't seem to be applied across the site any more. Can anyone with a MacOS machine confirm the fonts are being displayed in their default rendering mode?

Maybe we're arguing for nothing!

Tested on MacOS Catalina 10.15.6 in Chrome 85.0.4183.102, Safari 13.1.2 (15609.3.5.1.3) and there's no -webkit-font-smoothing: antialiased; applied to texts.

The only instance of -webkit-font-smoothing: antialiased; present in the fonts.google.com css file applies only to the Google Fonts logo:

.lockup-brand {
    font-family: Product Sans, Arial, Helvetica, sans-serif;
    color: rgba(0, 0, 0, .6);
    position: relative;
    top: -6px;
    left: -5px;
    font-size: 22px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

davelab6 · 2020-09-15T23:18:48Z

I'll ask the team to revisit this

chrisdone · 2020-09-16T09:26:41Z

I'm unsubscribing from this issue. It's been three years. Google.

fitojb · 2020-09-16T15:58:10Z

@chrisdone It’s not necessary to announce it

Myndex · 2020-09-18T11:29:09Z

Hi @alinacsava @thlinard @tanc

Indeed perhaps this is not the thread to discuss... looking at the age, I'm wondering how it happened to pop up to me, but the use of -webkit-font-smoothing: antialiased; and -moz-osx-font-smoothing: grayscale is a real and persistent problem across the net.

The problem really rears it ugly head when used in combination with thin fonts. This experiment from last year: https://www.myndex.com/WEB/WCAG_CE14antialias has test panels all with antialias on. Going into the inspector and then toggling it on and off you can see the substantial difference in contrast.

Myndex · 2020-09-18T11:33:37Z

I'll ask the team to revisit this

I've investigated this further — it appears that -webkit-font-smoothing: antialiased; is only applied to the word "Fonts" next to the Google logo on the google fonts pages, and not to the font samples.

Sorry if any of my earlier comments created a mountain from a molehill... I suppose I should look at dates more

tanc · 2020-09-18T11:43:43Z

Yes it doesn't look like those css rules are applied any more, so I don't think we need to be asking for anything. Maybe the google fonts team can drop a note in here to confirm the rules are no longer applied and close the issue if that is the case?

arnesava · 2020-09-18T12:50:50Z

I've investigated this further — it appears that -webkit-font-smoothing: antialiased; is only applied to the word "Fonts" next to the Google logo on the google fonts pages, and not to the font samples.

Yup, that is the css snippet I quoted in my previous reply

tomasdev · 2020-09-18T16:31:21Z

@davelab6 feel free to close this one. I confirmed that the antialias is only on the logo right now.

tanc · 2020-09-18T17:53:55Z

Very happy to close this, thanks everyone for the discussion and thanks to the Google team for removing the lines of CSS.

DannyvanHolten · 2020-10-05T16:47:31Z

http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

You all know that the site where this article was written has -webkit-font-smoothing: antialiased in it's html tag right?

Dinamo studio gave us new files to fix Firefox problems. Don't use `optimizeLegibility` because it will cause performance issues (loading time) and may cause important undesired behaviours on mobile devices. `geometricPrecision`is sadly interpreted by `optimizeLegibility` on Firefox. So in the end, we decide to not use text-rendering at all, and let browser do what it want by default. https://sonneiltech.com/2020/12/manage-your-websites-legibility-using-text-rendering-and-its-alternatives/ https://bocoup.com/blog/text-rendering Don't use font-smoothing because it can cause legibility issues. Just let the browser do the optimization by itself. https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/ google/fonts#1170

One day, perhaps over a decade ago, it used to bring visual improvement and consistency to font rendering across browsers and operating systems. But, over the years, the default subpixel-antialising in browsers/OSes produces better results than 'antialiased'. There are many discussions about this on the web, I mention a few: - google/fonts#1170 - https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth - https://web.dev/articles/antialiasing-101 - https://en.wikipedia.org/wiki/Subpixel_rendering

davelab6 added this to the Directory (fonts.google.com) milestone Aug 28, 2017

davelab6 assigned shyndman Aug 28, 2017

davelab6 added the Priority 1 - Quick (Urgent and not Important) label Sep 21, 2017

davelab6 assigned davelab6 and unassigned shyndman Sep 21, 2017

davelab6 closed this as completed Sep 21, 2017

davelab6 mentioned this issue Sep 21, 2017

Show different CSS font-smoothing options googlefonts/fontbakery-dashboard#50

Open

soyarsauce mentioned this issue Mar 17, 2020

Beautiful fonts TerriaJS/terriajs#3613

Closed

davelab6 reopened this Sep 15, 2020

tanc closed this as completed Sep 18, 2020

iHiD mentioned this issue Sep 29, 2020

Which font-smoothing to use? exercism/website#124

Closed

cgrobb mentioned this issue Aug 10, 2021

Building a Color Scheme Post's Pens Inappropriately Setting Font Smoothing to Antialiased GoogleChrome/web.dev#5955

Closed

SamuelMiller mentioned this issue Apr 21, 2022

Allow themes to opt-in to font-smoothing via theme.json WordPress/gutenberg#35934

Closed

jamigibbs mentioned this issue Mar 6, 2023

Button color choices are out of sync across va.gov department-of-veterans-affairs/vets-design-system-documentation#1585

Closed

1 task

vanyabrucker mentioned this issue Jun 16, 2023

Font smoothing antialiased in -webkit datahub-project/datahub#8252

Closed

reinink mentioned this issue Aug 17, 2023

Enhancing Text Clarity: The Impact of the font-smooth Property in preflight.css 📝 tailwindlabs/tailwindcss#11833

Closed

aduth mentioned this issue Aug 30, 2023

Upgrade USWDS from v3.4.1 to v3.6.0 18F/identity-design-system#362

Merged

jarmentor mentioned this issue Mar 2, 2024

[Bug] Deprecated index.css properities causing Firefox issues gbowne1/TwitchBot#50

Closed

rhcarvalho mentioned this issue May 29, 2024

Remove 'antialiased' CSS class from root template phoenixframework/phoenix#5827

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Please remove "-webkit-font-smoothing: antialiased" from fonts.google.com #1170

Please remove "-webkit-font-smoothing: antialiased" from fonts.google.com #1170

tanc commented Aug 28, 2017

davelab6 commented Sep 21, 2017

chrisdone commented Mar 27, 2018 •

edited

Loading

fitojb commented Apr 28, 2018

EricSeastrand commented Sep 6, 2018

sbussard commented Feb 16, 2019

nivicentiu commented Apr 5, 2019 •

edited

Loading

RiZKiT commented Oct 7, 2019

Myndex commented Sep 11, 2020 •

edited

Loading

sbussard commented Sep 12, 2020 •

edited

Loading

Myndex commented Sep 12, 2020 •

edited

Loading

sbussard commented Sep 12, 2020

tanc commented Sep 12, 2020

tanc commented Sep 12, 2020

tanc commented Sep 12, 2020

thlinard commented Sep 14, 2020

arnesava commented Sep 15, 2020 •

edited

Loading

davelab6 commented Sep 15, 2020

chrisdone commented Sep 16, 2020

fitojb commented Sep 16, 2020

Myndex commented Sep 18, 2020

Myndex commented Sep 18, 2020

tanc commented Sep 18, 2020

arnesava commented Sep 18, 2020

tomasdev commented Sep 18, 2020

tanc commented Sep 18, 2020

DannyvanHolten commented Oct 5, 2020

Please remove "-webkit-font-smoothing: antialiased" from fonts.google.com #1170

Please remove "-webkit-font-smoothing: antialiased" from fonts.google.com #1170

Comments

tanc commented Aug 28, 2017

davelab6 commented Sep 21, 2017

chrisdone commented Mar 27, 2018 • edited Loading

fitojb commented Apr 28, 2018

EricSeastrand commented Sep 6, 2018

sbussard commented Feb 16, 2019

nivicentiu commented Apr 5, 2019 • edited Loading

RiZKiT commented Oct 7, 2019

Myndex commented Sep 11, 2020 • edited Loading

sbussard commented Sep 12, 2020 • edited Loading

Myndex commented Sep 12, 2020 • edited Loading

NO, I would not agree.

This has become an important accessibility issue (the focus of my research).

Here is an example:

Let's zoom in. Here is font smoothing ON (faux antialiased)

Here is the superior subpixel antialiasing, which is default.

It solves no problem, yet creates many others.

sbussard commented Sep 12, 2020

tanc commented Sep 12, 2020

tanc commented Sep 12, 2020

tanc commented Sep 12, 2020

thlinard commented Sep 14, 2020

arnesava commented Sep 15, 2020 • edited Loading

davelab6 commented Sep 15, 2020

chrisdone commented Sep 16, 2020

fitojb commented Sep 16, 2020

Myndex commented Sep 18, 2020

Myndex commented Sep 18, 2020

tanc commented Sep 18, 2020

arnesava commented Sep 18, 2020

tomasdev commented Sep 18, 2020

tanc commented Sep 18, 2020

DannyvanHolten commented Oct 5, 2020

chrisdone commented Mar 27, 2018 •

edited

Loading

nivicentiu commented Apr 5, 2019 •

edited

Loading

Myndex commented Sep 11, 2020 •

edited

Loading

sbussard commented Sep 12, 2020 •

edited

Loading

Myndex commented Sep 12, 2020 •

edited

Loading

arnesava commented Sep 15, 2020 •

edited

Loading