modern-normalize icon indicating copy to clipboard operation
modern-normalize copied to clipboard

Don't use `-webkit-font-smoothing: antialiased` globally

Open ivancuric opened this issue 7 years ago • 1 comments

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;
	}
}

ivancuric avatar Feb 11 '18 13:02 ivancuric

Thanks for the feedback. Just to be clear for anyone reading this, this about a work-in-progress PR https://github.com/sindresorhus/modern-normalize/pull/13 and not the main modern-normalize product.

sindresorhus avatar Feb 11 '18 13:02 sindresorhus