Anything that is on a screen is displayed using pixels. The simplest way to display is by using solid-colored pixels to represent visual characters.

However, on current computer displays, pixels are rather big objects. Low-resolution often results in rather unpleasant *jagging* or *pixelation*. To overcome this problem, several **font smoothing** techniques are used.

One such technique is called **anti-aliasing**, which uses partial opacity to emulate smooth curves of the glyphs.
The smoothness of the glyphs is mirrored using restricted opacity, making the glyphs more similar to the type's design.

<br>

The `font-smooth` CSS property controls the application of anti-aliasing when fonts are rendered.


![](/api/edpresso/shot/4577732983783424/image/5587378460688384)


> This feature is non-standard and is not on a standards track. It depends on the browser used and the system specifications; thus, it may not work for *every* user.




### Syntax

The `font-smoothing` property takes specific keyword values or numeric values (`em`):

/* Keyword values */
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/* <length> value */
font-smooth: 2em;

> Different browsers have different non-standard names for the font smoothing property. For example,  Google chrome uses the name `-webkit-font-smoothing` and Firefox uses `-moz-osx-font-smoothing`. 

# Example



body {
  
}
/* Turn font smoothing off; display text with jagged sharp edges. */
.text1 {
    -webkit-font-smoothing: none;
}
/* Let the browser decide (Uses subpixel anti-aliasing when available; this is the default) */
.text2 {
    -webkit-font-smoothing: auto;
}
/* Smooth the font on the level of the pixel, as opposed to the subpixel */
.text3 {
    -webkit-font-smoothing: antialiased;
}
/* On most non-retina displays, this will give the sharpest text*/
.text4 {
    -webkit-font-smoothing: subpixel-antialiased;
}

<html>
 <head>
 </head>
 <body>
    <div class="text1">
      <h1>Educative</h1>
    </div>
    <div class="text2">
      <h1>Educative</h1>
    </div>
    <div class="text3">
      <h1>Educative</h1>
    </div>
    <div class="text4">
      <h1>Educative</h1>
    </div>
 </body>
</html>

codemirror

What is font smoothing in CSS?

Anything that is on a screen is displayed using pixels. The simplest way to display is by using solid-colored pixels to represent visual characters. However, on current computer displays, pixels are rather big objects. Low-resolution often results in rather unpleasant jagging or pixelation. To overcome this problem, several font smoothing techniques are used. 