Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Use more beautiful font smoothing on high dpi media devices
/* ---------------------------------------------------------- */
/* */
/* A media query that captures: */
/* */
/* - Retina iOS devices */
/* - Retina Macs running Safari */
/* - High DPI Windows PCs running IE 8 and above */
/* - Low DPI Windows PCs running IE, zoomed in */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
/* - Android hdpi devices and above */
/* - Android tvdpi devices, including Google Nexus 7 */
/* - Chrome running on high DPI Macs and PCs */
/* - Opera running on high DPI Macs, PCs and mobile devices */
/* */
/* Please note that that this code assumes you'll swap a */
/* 2× version of your images. If you'd like to supply */
/* finer increments, other thresholds might be appropriate. */
/* */
/* A test for CSS pixel densites can be found here: */
/* http://bjango.com/articles/min-device-pixel-ratio/ */
/* */
/* @marcedwards from @bjango */
/* */
/* ---------------------------------------------------------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {
/* Usually one should use this on dark background only
http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
But: because we have enough pixels here (retina!) it shouldn't be a problem.
It just renders more beautiful */
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment