Default to subpixel for non-retina screens

Author: CompuIves

packages/common/src/global.css

@@ -1,10 +1,10 @@
 html,
 body {
   font-family: 'Roboto', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-font-smoothing: antialiased;
+  -webkit-font-smoothing: auto;
+  -moz-font-smoothing: auto;
   -moz-osx-font-smoothing: grayscale;
-  font-smoothing: antialiased;
+  font-smoothing: auto;
   text-rendering: optimizeLegibility;
   font-smooth: always;
   -webkit-tap-highlight-color: transparent;
@@ -82,5 +82,14 @@ a {
 **/
 body * {
   box-sizing: initial;
-  -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: auto;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  /* On Retina the pixel density is so high that we can do anti-aliasing instead of 
+    subpixel anti-aliasing and it will look more beautiful (star)
+  */
+  body * {
+    -webkit-font-smoothing: antialiased;
+  }
 }