Year-End Discount: 10% OFF 1-year and 20% OFF 2-year subscriptions!

Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

font
smoothing
css

What is font smoothing in CSS?

Educative Answers Team

Tired of LeetCode? 😩

Learn the 24 patterns to solve any coding interview question without getting lost in a maze of LeetCode-style practice problems. Practice your skills in a hands-on, setup-free coding environment. 💪

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.

svg viewer

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.


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

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):

svg viewer
/* 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

  • CSS (SCSS)

RELATED TAGS

font
smoothing
css
Copyright ©2022 Educative, Inc. All rights reserved

Tired of LeetCode? 😩

Learn the 24 patterns to solve any coding interview question without getting lost in a maze of LeetCode-style practice problems. Practice your skills in a hands-on, setup-free coding environment. 💪

Keep Exploring
Related Courses