Remove CSS font-smoothing: antialiased to improve the text contrast

In CSS, you can control font smoothing modes using the font-smooth property, although it's important to note that browser support for this property may vary, and it may not be widely supported across all browsers. Additionally, some browsers may apply font smoothing modes automatically, so using this property may not always have a effect.

WebKit offers three common font smoothing modes :

None (No smoothing)

In this mode, text is displayed without any additional smoothing or enhancement.

Display’s text with jagged sharp edges.

selector {
  font-smooth: none;
}

Example

Screenshot 2023-10-02 at 12.40.56 AM.png — Has jagged sharp edges

Subpixel rendering (Default smoothing mode)

Subpixel rendering, often the default font smoothing mode, is used for most text rendering on desktop operating systems. It is effective in making text appear crisper and more readable. Subpixel rendering smoothes the text at the subpixel level.

Subpixel rendering is generally not used on most mobile devices, such as smartphones and tablets. This is because mobile devices often have to support both vertical and horizontal screen orientations. Subpixel rendering relies on a specific subpixel arrangement optimized for one orientation (usually horizontal).

As a result, mobile operating systems and applications typically use different text rendering techniques, such as grayscale antialiasing, hinting, and other methods that work well in both vertical and horizontal orientations.

Screenshot 2023-10-02 at 12.42.49 AM.png — Subpixel rendering

Antialiased

Disables subpixel-rendering and smoothes the text, reducing jagged edges and creating a smoother appearance. Antialiased smoothes the font at the pixel level.

selector {
  font-smooth: antialiased;
}

Subpixel Vs Antialiased

Previously, we used CSS font smoothing antialiased in all products. At first, antialiased text might seem better than subpixel-rendered text. But if you look closely, antialiased text is actually blurrier than subpixel-rendered text.

Screenshot 2023-10-02 at 12.56.07 AM.png — subpixel leads to better results on light background. antialiased text is blurrier than subpixel-rendered text.

Screenshot 2023-10-02 at 12.55.24 AM.png — antialiasing leads to better results on dark background. light text is displayed on a dark background without the unintended boldness that is occurring with subpixel rendering.

To solve this issue, we have now adopted the following best practices.

Best practices

Don't use CSS font-smoothing: antialiased to improve the text contrast. let the operating system handle the smoothing.

🚫 Don'ts

Below are the common font-smooth usage patterns used across neeto products. Avoid using font-smoothing: antialiased .

p{
 font-smooth: antialiased;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

*::after,
  *::before {
    ...
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

<body class="flex flex-col min-h-screen antialiased">
<body class="antialiased">

body {
  ...
  @apply text-base antialiased;
}

body {
  @apply text-base;

  font-family: "Inter", sans-serif !important;
}

export const getStripeOptions = (options = {}) => ({
  style: {
    base: {
      ...
      fontSmoothing: "antialiased",
    },
  },
  ...options,
});

Reference links

https://github.com/bigbinary/neeto-engineering-ui-ux/issues/155

https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth