*

This is a sad story with a happy ending!

It is about the way Microsoft broke Web typography. I also suggest how to fix the issues!

In a more descriptive way it deals with body text readability in the age of default font smoothing.

Read on to find out why this issue affects you and your site fonts!

How website typography got broken

The typography of many sites was literally broken without their respective owners’ knowledge.

Your body-text might have looked fuzzy and difficult to read.

OK, let’s start with some terms we need to know to get the issue.

• Have you heard the term anti-aliasing?
• Do you know what ClearType is?
• Did you know that you can switch off ClearType?

Most people probably haven’t unless they are graphic designers.

They are dealing with font smoothing.

What you need that for you might ask? I’m not sure myself.

Ideally font smoothing makes text appear more readable!

It is also good looking on screens. Many Web fonts rock by 2025!

Yet in reality it sometimes doesn’t unless you make sure it does.

Let’s take a step back and return to the dark ages of the Web.

In that era Web fonts did not exist yet. Web-safe fonts did. They were like half a dozen of those.

What are Web-safe fonts?

It all started with Times New Roman in the nineties.

Early websites used Times as the default font because it was known from newspapers and books.

Times New Roman didn’t look good nor was it very readable on the Web!

Yet at least you could print it out in the early days of the Internet.

Later on more so called Web-safe fonts like Helvetica and Arial appeared!

Finally a really good crispy font for body text took center-stage: Verdana. Web-safe meant

• available
• readable
• and looking the same on all platforms.

Then things got worse again.

Starting with Windows XP Microsoft introduced a proprietary technology called ClearType to smooth fonts.

What is Windows ClearType?

Windows not only ships with ClearType pre-installed since XP, it’s also activated by default since Vista.

This is whether you like it or not, most people use ClearType on Windows to smooth fonts.

I use Windows too but I don’t like smooth aka fuzzy body text fonts. It simply does not readable on Windows.

Body text fonts that have been smoothed strain my eyes and look ugly.

That’s why I switched ClearType off on my machines for years.

I was able to ignore the fact that my body text looked pretty (without fuzzy font smoothing) and readable to me while to most other people it didn’t.

then I decided to write this post. So here it is! The issue is not as urgend as when I originally wrote it.

Yet I’d expect that some people switch ClearType off just like I did.

Also even when ClearType remains switched on on Windows it still makes the fonts looks bad in some cases.

So you better test your site in various visual scenarios.

When do Web-safe fonts look blurry?

I was testing a site on different browsers and platforms and was again alerted to the difference font smoothing or lack of it makes.

Maybe I’m one of the people who can’t distinguish colors as good as the Clear Type technology requires to be of use.

On the other hand even highly accepted fonts such as Helvetica/Arial look blurry and clumsy when font smoothing is on.

Just compare these two, first the crispy version without ClearType!

This is what I saw and then the default ClearType font smoothing version, the one most of my readers saw:

Is the second one really better readable as Microsoft claims?

I doubt it. In case it’s just me, look at the font, it looks blurry and ugly.

Even in case you don’t care you will notice on a sub-conscious level and dislike the overall user experience.

The smoothed Arial barely resembles the elegance of the classic Helvetica font it is based on.

On Windows anti-aliased Arial loses its elegance completely.

Microsoft has introduced a special set of proprietary fonts that look OK with ClearType.

It is most notably Calibri. Yet these fonts are mostly Windows only:

Users on other platforms may see other fonts instead.

Apple and Linux systems are reportedly better at font smoothing than Windows.

Yet you also want to make your site look more or less the same on all platforms, don’t you?

Remember to check on all kinds of mobile phones as well!

What happens when font smoothing is not activated?

It doesn’t even have to be a corporate identity we talk about. It affects more basic requirements.

The sheer readability of body text improves or deteriorates a lot!

Why? It is depending on whether you have taken font smoothing into account or not.

Many fonts that are perfect in small sizes without font smoothing are causing problems once font smoothing is switched on.

On the other hand your perfectly smooth font can look really broken on systems not using font smoothing.

Not every font works both ways with font smoothing turned on and off:

The example above is ironically taken from the Usability Post article on font smoothing.

With ClearType off there is no font smoothing left

The font is looking really weird. It’s broken in a way. Notice the bizarre additions to the “e” for example.

Sure, only people turn off ClearType on Windows of their own accord.

Yet neither keeping on using your standard fonts like Verdana or Helvetica/Arial nor using some new smooth by design fonts like Calibri is the perfect solution.

For each one of them there are real life use cases or rather users who won’t be able to view them properly. You can’t rely on them.

Do Webfonts work for body text?

Of course there is third kind of solution I want to suggest today: webfonts.

Webfonts are a by now popular way of modern font replacement for high quality typography.

Webfonts are often basically rented fonts you access on a third party server.

Google Fonts is by now the most popular free webfont foundry.

You can display body text using Webfonts not just headlines unlike the early font replacement techniques.

There are even a lot of free Webfonts from a few services you can use. Sadly it’s not as easy as you might expect.

The choice of the right font and font size is crucial to ensure readability.

• Some fonts will look OK with old school font smoothing but not with ClearType.
• Some font sizes are too small to be still readable using webfonts.
• Many fonts are too fancy to be of use for body text.

So you have to chose the body text font wisely and test it even on Windows on several browsers and with ClearType on and off.

I have tested lots of free webfonts on my own microsite over at onreact.com – One day I chose Muli for both h2 subheadings and body text.

It worked best with simple anti-aliasing and still OK with subpixel rendering. That’s what ClearType does too.

At the end of the day it did not look good on all browsers though. So I kept on experimenting.

Browsers display fonts differently

Different browsers on Windows will treat smoothed fonts differently. Firefox simply anti-aliases them (first screen shot)

• Chrome
• Opera
• Edge

use subpixel rendering (second screen-shot from Chrome):

As you see the readability here is not perfect yet. At least it looks the same with ClearType on and off now.

Please note how the same font size is a lot different on both browsers though.

On FF the readability is better. On Chrome etc. the font looks more like the original design of it but is harder to read.

By 2025 there quite a few high quality free Web fonts on Google Fonts and beyond. I use Inter here on the seo2.blog!

As a designer I would invest money in your Web typography though, at least for profit-oriented client projects.

I would consider using some high quality paid Webfonts instead.

I have collected lots of them for testing purposes and consider Proxima Nova the best option for body text readability.

Webfonts – even free ones – are not only available from Google Webfonts.

You can get them from Adobe as well or Fonts.com where you can get high quality professional fonts.

A professional font like ITC Avant Garde Gothic in its Web optimized version works well both from a readability perspective and to please the eye.

What about you? Do you care about readable body text readability or do you just focus on getting your visitors?

Do you assume that once they are on your site people will stay there and read your text no matter how it looks?

Tell me on social media @onreact to tell me about it!

I might add your suggestion to the post itself!

* Creative Commons image by matt knoth.