Better Font Smoothing in Chrome & Safari

subpixel-rendering.css

/*
  The typeface, regardless of how it is being served (Typekit, Google, @font-face) is loaded and then computed at a sub pixel level.
  The smoothing happens in a space we can't see easily. Because of this, some browsers (looking at you Chrome & Firefox)
  take beautiful, slender fonts and bloat them, making the edges appear jagged, losing the quality of beautiful,
  crisp shapes designers crave in web type.
  This only works in Chrome on Mac OS X
*/

/* First, remove sub pixel antialiasing by using the antialiased property. */
html {
  -webkit-font-smoothing: antialiased;
}

/* Then, take it one step further and target higher pixel density screens by using this media query
edited to only affect Chrome & Safari. */
@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx) {
  -webkit-font-smoothing: subpixel-antialiased;
}