FIFA’s World Cup Typography Foul: UI Design Learnings - Pimp my Type

Skip to content

It’s World Cup – and I didn’t really care … until I saw the typeface on TV 😳. Isn’t this a bit hard to read?! And then I got a message on LinkedIn, asking me what I think about the typeface on the scoreboard. This made me go into a rabbit hole that forced me to watch a game (or at least parts of it). So let’s find out what the issue with the FIFA World Cup 2026 font is and what it can learn us for UI design!

The FIFA World Cup 2026 scoreboard someone sent me on LinkedIn – what’s that typeface used for the country tricodes? And isn’t it a bit hard to read?

The typefaces used for FIFA 2026

FIFA uses a custom-made typeface for the 2026 world cup, called FWC26 designed by Alistair McCready from the New Zealand based foundry Monolith. It’s a striking, vivid display typeface, available in various weights and widths. FIFA uses it mostly in all caps, Ultra Condensed, Black. That’s nice for a headline in their striking social media post, conveying a bold, dynamic and athletic spirit. But it is it appropriate for smaller sizes? Or on low resolution screens? No.

The custom typeface FWC26 in social media graphics – fine for large text, but not for small.

At the match stats numbers are hard to read, and labels not at all … a clear foul!

Analyzing the FIFA scoreboard

Now let’s go back to the thing that started all of this, the scoreboard in the top left corner. Compared to FIFA’s social media and promotional graphics, here it is not only the FWC26 font. It is paired with Open Sans used for the timer and the scores. Obviously someone found out that it would have been too challenging on a TV screen.

The scoreboard pairs FWC26 with Open Sans to reamin legibility on TV screens

But they still kept the bold and striking typeface for the country abbreviations. This is problematic because:

Letters are very tight and squarish, the inner shapes tend to disappear.

This makes them harder to distinguish

Tricodes for countries are not always that obvious (I learned that RSA stands for South Africa)

Flags next to it help, but not everyone knows them either

Plus, this will be seen on a variety of screens and resolutions, so it should be as legible as possible

How could this look differently?

If FIFA had used their custom typeface FWC26 for all the information (like they do on social media) this would have been much worse. I simulated it below, and it’s especially hard when you look at the score. The slashed zero could easily be mistaken for an eight. This typeface is simply inappropriate for information design.

Alternative versions of the scoreboard. Which version do you think works best here? On the right side they are smaller and blurred to simulate lower resolution screens.

Looking at the original design in version 2 makes it clear why they picked the Open Sans typeface for numbers. But they still could have used a wider, and less bold version of their custom font to make it more legible without losing character. I simulated this in version three.

What can we learn for UI design?

If you pick a font that is very condensed and black and small it’s a perfect recipe for making things harder to read. It’s not that I don’t like the FIFA typeface, I think it’s a good choice for branding, but there should be a companion version for smaller sizes.

The typeface Adapt in various weights and widths. When used at smaller sizes, avoid too bold and too compressed styles.

A typeface can also be too contrasting for its size. Which of these examples above do you find most readable? I bet it’s not the one on the left, using the Compressed Black style. So picking slightly wider and not too bold fonts can be very helpful for your design components.

Any more typography fouls that I should know about? Let me know, as I’m preparing a video about it. Until then enjoy the World Cup if you watch. I’ll only watch it to complain about the type 😉.

6 Comments

Thanks Oliver, love this! I hope you’re going to look at the typography on the jerseys next! Slightly connected – you probably already know this foundry here?

https://sportsfonts.com/

Cheers!

Reply

Jerseys is usually the place where legibility and readability go to die 😂. I know Christoph Koeberlin, the man behind it, but I did not know that he created a specific branch for this! Love it! And so necessary given the horrible examples out there.

Reply

Over the last several months my vision started getting blurry. In simple terms, the thin capsule behind the artificial lens becomes cloudy over time, (posterior capsule opacification, which the ophthalmologist described it a “waxed paper behind the lens”) and the YAG laser makes a small opening in it so light can pass through clearly again. I can see fine again, but before the laser procedure, I had a very hard time reading descriptions on Netflix. Forget expert panels or reading comprehension tests to ascertain readability and legibility. The...