Bluemix Font Smoothing Test

Font Stack Test

TL;DR

(Too long; didn't read)

Should you use the webkit font-smoothing CSS property to make Helvetica text more readable? Not often.

For high-color contrast, large text (e.g. headlines), use:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

For other situations (body text, nav, smaller headlines, etc), the default is more readable.

This will only affect Mac users.

The purpose of this webpage is to test and report on whether font-smoothing is useful for text in Bluemix. A main source that drove the question behind these tests was the article Please Stop "Fixing" Font Smoothing. The text variations below were run through various environments to determine the effect of font-smoothing in different contexts.

The following screenshots show how the content below renders in those different contexts, and were used to determine the suggestion in the TL;DR above:

The browser inspect tools in Firefox and Chrome were also used to determine the affect of font smoothing on actual headlines in Bluemix:

Dark Background Tests

subpixel-antialiased

28px

Use a combination of the most prominent open-source compute technologies to power your apps.

14px

Use a combination of the most prominent open-source compute technologies to power your apps.

12px

Use a combination of the most prominent open-source compute technologies to power your apps.

10px

Use a combination of the most prominent open-source compute technologies to power your apps.

8px

Use a combination of the most prominent open-source compute technologies to power your apps.

6px

Use a combination of the most prominent open-source compute technologies to power your apps.

antialiased

28px

Use a combination of the most prominent open-source compute technologies to power your apps.

14px

Use a combination of the most prominent open-source compute technologies to power your apps.

12px

Use a combination of the most prominent open-source compute technologies to power your apps.

10px

Use a combination of the most prominent open-source compute technologies to power your apps.

8px

Use a combination of the most prominent open-source compute technologies to power your apps.

6px

Use a combination of the most prominent open-source compute technologies to power your apps.

none

28px

Use a combination of the most prominent open-source compute technologies to power your apps.

14px

Use a combination of the most prominent open-source compute technologies to power your apps.

12px

Use a combination of the most prominent open-source compute technologies to power your apps.

10px

Use a combination of the most prominent open-source compute technologies to power your apps.

8px

Use a combination of the most prominent open-source compute technologies to power your apps.

6px

Use a combination of the most prominent open-source compute technologies to power your apps.

White Background Tests

subpixel-antialiased

28px

Use a combination of the most prominent open-source compute technologies to power your apps.

14px

Use a combination of the most prominent open-source compute technologies to power your apps.

12px

Use a combination of the most prominent open-source compute technologies to power your apps.

10px

Use a combination of the most prominent open-source compute technologies to power your apps.

8px

Use a combination of the most prominent open-source compute technologies to power your apps.

6px

Use a combination of the most prominent open-source compute technologies to power your apps.

antialiased

28px

Use a combination of the most prominent open-source compute technologies to power your apps.

14px

Use a combination of the most prominent open-source compute technologies to power your apps.

12px

Use a combination of the most prominent open-source compute technologies to power your apps.

10px

Use a combination of the most prominent open-source compute technologies to power your apps.

8px

Use a combination of the most prominent open-source compute technologies to power your apps.

6px

Use a combination of the most prominent open-source compute technologies to power your apps.

none

28px

Use a combination of the most prominent open-source compute technologies to power your apps.

14px

Use a combination of the most prominent open-source compute technologies to power your apps.

12px

Use a combination of the most prominent open-source compute technologies to power your apps.

10px

Use a combination of the most prominent open-source compute technologies to power your apps.

8px

Use a combination of the most prominent open-source compute technologies to power your apps.

6px

Use a combination of the most prominent open-source compute technologies to power your apps.