Font rendering.

Rendering of fonts has been a theme for designers since the dawn of good digital design. Screen designers of all sorts carry the burden of pixel on their back because monitors and displays are not paper. They consist of many tiny picture elements – pixels – and as such cannot be treated as paper but require a different set of skills and understanding.

17 pixel Arial Regular and Bold at 3× zoom. Left side Windows rendering, right side Mac.

The big split

As if that was not enough, the big giants Apple and Microsoft introduced their own way of rendering fonts making this burden tenfold heavier. We all know this, and this article seems to be beating-a-dead-horse, however as the newest inventions in delivering fonts storm the internet old issues rise anew. Issues that, seemingly, need to be explained again, mostly to designers and developers working on Mac.

Rendering of Arial

Lets start with the basics. These are screenshots of Arial, a font universally available on Windows and Mac, being rendered on Windows (on the left) and Mac (on the right) in "Regular", "Bold" and "Italic" variants:

10px
11px
12px
13px
14px
17px
18px
20px

Notice that on Windows small fonts are aliased, they are not smooth as on Mac. Starting at 18 pixels of size, at Regular weight Arial is antialiased making it look rather nice. At the same time, Arial on Mac is antialiased from the smallest to the largest.

Windows ClearType

Windows operating systems have an option buried deep down in the Control Panel to turn on ClearType rendering making fonts smoother and forcing antialiasing of small sized fonts.

However the default setting on all Windows machines for font smoothing is Standard and not ClearType. This means that you cannot expect fonts to start smoothing until they are at least 18 pixels in size as the majority of users will not even bother turning ClearType on.

All of this in itself is not an issue for Arial, as it was designed to have good looks on small pixel sizes even when aliased.

Comparison of Standard small size rendering versus ClearType.

Here is Microsoft's Bill Hill talking about ClearType and his prediction that ClearType will be turned on by default in new versions of Windows. The video is quite old, and we now know for sure that the new versions he is talking about do not have ClearType on by default.

@font-face, TypeKit, Google web fonts, ...

Recent advances in online typography and font delivery technologies made it possible for designers to start using almost any font in their web designs. Enter the world of problems.

Unless the font has been specifically designed to antialias (smoothen) on small sizes Windows renderign engine will display it aliased (pixelated). Thus, custom embedded font will look pixelated on small sizes for Windows users and in many cases other problems will occur parallel to it, mainly with kerning and leading.

This is a screenshot of a website that used Typekit method to embed "Proxima Nova". If you visit that site with any decent browser from Windows operating system, the fonts are displayed but since those fonts are not properly designed for small scale aliased use they look less than satisfactory.

body { font-family: proxima-nova-1, proxima-nova-2, Verdana, sans-serif; }

Many people will find Proxima Nova not to be so pleasant.

The history repeats

All of this was seen before. Designers working on Mac favorited Helvetica as their primary font, dropping down to Arial and generic sans-serif as backup.

body { font-family: Helvetica, Arial, sans-serif; }

However, the problem here lies in a particular situation for Windows users if they actually have Helvetica installed, making the browser take Helvetica not substituting it with Arial. As it was not designed to render properly aliased on small sizes it displayed horribly for all people with Helvetica installed.

If you want fonts on your website to look good across all operating systems first check how do they behave on small pixel sizes when aliased. Of course, to be completely certain, you should only use font from the safe-fonts list for your main body text as they are practically risk free. Keep in mind different operating systems, different rendering engines and different browsers.

Think how your font will render.

NEXT: The icon tells it all.