Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Don't use -webkit-font-smoothing: antialiased globally #19

Open
ivancuric opened this issue Feb 11, 2018 · 1 comment
Open

Don't use -webkit-font-smoothing: antialiased globally #19

ivancuric opened this issue Feb 11, 2018 · 1 comment

Comments

@ivancuric
Copy link

ivancuric commented Feb 11, 2018

https://www.zachleat.com/web/font-smooth/
http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

While it can be used to manually fix some light text on dark backgrounds on Macs, it should't be used on the entire page. It often leads to overly thin text with smaller weights, such as this example:

image

If you look at how DirectWrite and Cocoa work on Windows and Mac native elements, they use subpixel AA on normal DPI screens, and default to greyscale on high DPI screens. The same is true with Chrome, which disable subpixel AA when the device DPR is over 2.
Twitter did a similar thing on their site:

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 2dppx) {
	body {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
	}
}
@sindresorhus
Copy link
Owner

Thanks for the feedback. Just to be clear for anyone reading this, this about a work-in-progress PR #13 and not the main modern-normalize product.

sindresorhus added a commit that referenced this issue Feb 11, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants