So what we have to do is go into our application and go into main.scss. Now scroll up to about line 15 where we have body, and right beneath these initial values of like font-family, color. Let's enter a value called -webkit-font-smoothing and we want to set this antialiased.

main.scss

body {
    font-family: "Open Sans";
    color: #808080;

    -webkit-font-smoothing: antialiased;
}

Save that, go to the application and you'll see it changes, it looks a bit different.

Now that's how you do that. Now let's go ahead and add in a few more that you won't really notice but it's going to affect things in different browsers and it's going to make it work in different browsers like Firefox. So let's say -moz-osx-font-smoothing and let's say greyscale and then let's say text rendering and let's say optimize legibility.

Okay so you'll see it indicates that the user agent shall emphasize legibility over rendering speed and geometric precision.

So it's basically going to make it look better and we'll say -webkit-tap-highlight-color and we're going to set that to transparent.

main.scss

body {
    font-family: "Open Sans";
    color: #808080;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
}

Okay, so we're good there. Let's go to the application and you'll see it's quite a bit different, you'll see it's way better now, it actually almost looks better than the design.

Okay so if you want to test that out, just comment these lines out and then save it and then really quickly go to Chrome and you can see a change, and then look back and forth you'll see that it looks bad again but when we have those lines in there it looks really clean and smooth.

Sweet, so that's all I wanted to show you in this video. Let's navigate back to some different routes just so you can see it throughout our app. You'll see that everything is quite a bit cleaner and you can test this by basically doing what I just did. Like going up here and commenting this out, oops not everything that's not a good idea. I'm curious now, let's comment everything out and see what it looks like.

Dang, the power of styles. Okay, so what we're going to do is put the styles back in and what I really want to do is save that and then let's comment these 4 lines we just put in it out, and we'll save it and let's see it change.

You'll see it's quite a bit fuzzier which is not good. So by having that in there it cleans it up quite a bit. All right so that's it for this video, I'll see you in the next video where we will continue on building our application and we will build out this ordered review component.

Terminal

git status
git add .
git commit -m "font smoothing"

Resources

Source code