The intended Wordle Font, nobody can see

The number one mistake in web typography is not providing the font files. This might have happened with Wordle – the super popular word guessing game, that floods your social media – too. This post and short video are about how it would look better with the intended typeface, and how you can have that superior typographic experience as well.

After reading this article, you will learn about CSS font stacks, what makes a good font for games (hence user interfaces), what impact typography has on a digital product, and why you should care. Ready? Then let’s start!

I didn’t want to look into this

The story begins with Artur. He is one of the lovely 1,079 subscribers to the Pimp my Type newsletter, and asked me:

“Have you heard about Wordle? What do you think about the font?”.

I have! Played it twice, but did not really think about it a lot. It seemed to me, it used the sans-serif browser default fonts. Yes, you could totally make it visually more interesting, but it didn’t really hook me, a lot of things could look better. Just to be sure, I checked the stylesheet. And there something sparked my interest. Wordle was supposed to look better than it actually does! The font-family I saw was not the one of the first spot in the font stack. Why? And how would the game look like in that mysterious typeface?

Wordle’s font stack

The CSS font stack is a list of typefaces in which the text of a website should be display in. In Wordle’s case, it looks like this:

You can never be sure, if a web font is loaded, or if a certain font-family is locally installed on a device. This is why it’s common practice to add several font-families in descending preference, separated by a comma. The browser moves through the list, and renders the site in the first available font-family. The font stack should end with a generic keyword. If none of the font-families is available, this will then fall back to the default in that category. In Wordle’s font stack, it is sans-serif.

Nothing special about this, so far, except the first choice on that list: Clear Sans. But why is it, that Clear Sans is not shown then? That’s because it is not a preinstalled system font on any device, and the web fonts were not provided in the CSS.

Wordle looks different on every platform

So, Clear Sans is not available. Let’s take a look at the font stack again:

font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;

If you have an Apple device, you will experience Wordle in Helvetica Neue, because it is installed on macOS and iOS. On a Windows machine it is not, so it will be the next available typeface in that font stack, which is Arial. On an Android device, none of the listed font-families are installed, and Wordle will be rendered in Roboto, the default sans-serif. By the way, if you want to know what fonts are installed on what platforms, Font Family Reunion is a great resource for that.

All those typefaces are okay, but Clear Sans would be – pun intended – clearly better. Clear Sans is a free font designed for Intel by Daniel Ratighan at Monotype. It was intended for UI design and on-screen display. Let me show you why.

How it would look like in Clear Sans

It is not totally different, but it is different. Wordle suddenly looks more sophisticated, less default, it gets a more unique character. All because of the typeface. You can even better see it, when you compare the statics screen. It appears so much friendlier and more focused.

So what makes Clear Sans superior to Helvetica Neue? Mainly the letter shapes. Clear Sans has everything a decent typeface for UIs should have, and Helvetica Neue with its super closed apertures, not. That’s why it is inappropriate for functional text.

The divine is in the details. The letter shapes of Clear Sans are more open to its surroundings, see the S. The “I” has serifs, which makes it more distinct. The aperture of the C is wider, very helpful in the keyboard in smaller sizes. Overall, Clear Sans has slightly narrower proportions, which you can see at the O. Also, K, M, and Q are less dark. All these details add up, and help legibility. And this is, what a proper font for user interfaces should do, find more on that here.

There is still some work to do

I don’t want to hide the fact, that it’s not perfect, yet. Set in Clear Sans Wordle looks a bit off. The vertical alignment is different, the text sits a bit lower, and it seems slightly smaller as well. This is not problematic in the playfield, but in the keyboard it would need some slight adjustments. If Clear Sans was served as a web font, this all could be adjusted, and then create a more cohesive impression across different platforms.

Why then is Clear Sans not provided as a web font?

You tell me, that’s the big question! I can only guess, but it could have several reasons:

• The font was too expensive. Just kidding, Clear Sans is free to use.
  
  
• The creator of the game did not care or know about good typography, and what it can do to improve the gameplay. Luckily, you know now.
  
  
• The creator of the game did not know, Clear Sans was not a system font. He had it installed on his machine and did not check it on another device. Or he did not notice, that the typeface was different. Maybe?
  
  
• Because of file size and page load times. Probably, but I don’t think it would be such an issue. The subsetted woff2 font files for Clear Sans Regular and Clear Sans Bold combined could be under 50 to 75 KB. Considering, that you only download this once, and you can reuse it again and again, since it’s stored in the browser, it’s a good deal.

Typographic power to your inbox

• Font Friday: I recommend one typeface per week, free fonts included.
• Type Tuesdays: articles & videos that up your design game.
• Join 2500+ typography enthusiasts, unsubscribe anytime.

Your Email:

Your first name:

Leave this field empty if you’re human:

How you can see Clear Sans on your device

Good news is, that you can have this superior typographic experience on your computer at least! If you download and install the free font, you will see Wordle set in. If you don’t know how to do it:

• Here’s a guide how to install fonts on a Mac or PC.
• On iOS, you’ll need to download an app to install fonts. I did not test it, let me know in the comments if you have some experience with it!
• On Android, I don’t know. Maybe you do, then go ahead and tell me in the comments!

Get Clear Sans

What you can take away from this

Okay, this turned out to be more in depth, than I wanted it to be. Besides being super trend hopping, and clickbaity 😜. But what I want to leave you with are three things:

1. Care about good typography. It will make your designs better on an emotional and functional level.

2. Always check, if the web fonts are loaded. If you don’t have an eye for that, compare it closely, or ask a designer friend who can spot the difference between Arial and Helvetica 😉.

3. Your font stack is important, check how a design will look in all the different typefaces in the stack. If one is super different, don’t put it in there.

---

What do you think about this? How do you feel about Wordle in Clear Sans? Do you prefer it, or do you like Hellvetica more? Tell me in the comments!