Tips on Using the Font-Smooth Property

What Does "Font-Smooth" Mean?

Demonstration of anti-aliasing; created with Inkscape and GIMP.
MD at Dutch Wikipedia/Wikimedia Commons

With this tutorial, improve your understanding of the CSS property font-smooth. Get the facts on what this property means and why Web designers should consider using it.

A Description of Font-Smooth 

Why do designers sometimes want to use the font-smooth property? Mainly, it provides designers with control over the application of anti-aliasing when rendered.

Font-Smooth in CSS Versions

Use font-smooth in CSS 3 and also understand font-smooth syntax with the example below:

font-smooth: auto | never | always | | length | initial | inherit

auto - smooth text according to system defaults

never - never smooth the fonts

always - always smooth the fonts

and length - If the value of the font size is the same or larger than this size measure, then smooth the font when rendering it.

Web designers should also know the following when using the font-smooth property.

  • Initial Value: auto
  • Font-Smooth Applies to: All elements and generated content.
  • Font-Smooth Inheritance: This property is inherited.
  • Font-Smooth Browser Support: None

Font-Smooth Example

 

The font in this paragraph should be always smoothed, no matter how small or large the font is written.

 

A Caution About the Font-Smooth Property

Not everyone has a browser that supports font-smooth. Find out if your browser supports this property. Also, be careful how you use this style, as it can drastically reduce the readability of your text.

You'll need to do some research to make sure this won't affect you in this manner. For more information on the font-smooth property, consult the following:

Font-smooth Examples

Font-stretch

Font-effect

Font-family

Font-size

Font

Font-style

Font-variant

Font-weight

Changing Font Attributes