getButterfly Logo getButterfly

My recent adventures in MacOS revealed that font rendering is really bad when using custom fonts or when using the default CSS font rendering options. That’s why, for each new project, I’m using the following CSS “font reset” code.

There are some caveats, though, and you’ll probably need to use the white-space property or restrict the code below to only the body content. It should improve your site’s appearance in 95% of cases.

* {
    * Improve font rendering and readability/legibility on MacOS and Windows
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;

   -moz-osx-font-smoothing: grayscale; 

   -moz-font-feature-settings: "liga=1, dlig=1";
   -ms-font-feature-settings: "liga", "dlig";
   -webkit-font-feature-settings: "liga", "dlig";
   -o-font-feature-settings: "liga", "dlig";
   font-feature-settings: "liga", "dlig";
   /* END */

Dusty typing machine

Starting to get butterflies?! Get butterflies.css!

Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.

If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

Leave a Reply

Your email address will not be published. Required fields are marked *