What does it mean to build a truly international account? Is it to be able to hold many currencies? Sure. Work in many countries? Definitely. Speak your language? Well, now you’re talking – literally. Let’s take a closer look at how we took our typography from a complicated mess with little hierarchy and poor international support, to a structured multilingual set.

Fonts for here, there and everywhere

When choosing typefaces as part of our recent rebrand, international support was paramount. We started with Inter, our main product font, which supports 140+ languages, and has a tall x-height which makes it better for readability. Plus, it’s a Google font, which makes it faster to load for our customers.

But we didn’t stop there. To boost the brand personality, our partners Ragged Edge and their expert type designer Luke Prowse crafted us our very own custom display font, Wise Sans. True to our international character, it took inspiration from letterforms and alphabets around the world.

The beauty is in the details, with “B” inspired by a sign in Davao City, Philippines. And a “G” influenced by Thai script. It’s a font shaped by the world we serve. Full of international character and energy. And most importantly, it supports a whopping 342 languages – sorry Inter.

Spoiler alert — we didn't create Wise Sans from scratch. To get more bang for our buck (and baht), we took an existing typeface by Felciano type that felt very Wise, and enhanced it to meet our international needs.

A typographic mess

So, now we had our new fonts, all we needed to do was plug them into our old system, right? Err, well – it wasn’t quite as simple as that.

When we experimented with plugging the new fonts into our old design system, we discovered just how complicated the system was – we had too many styles and very generic naming. It wasn't clear for designers on what style to use and where, without relying on detailed and specific guidelines. As a result, we had inconsistent experiences across the product, and a clear lack of hierarchy.

Not only that, but simply replacing an entire system without exploration would lead to a frankenstein experience. So, no, swapping out our styles wasn’t an option, and now that we wanted to add a second font into the mix?! Forget about it.

Creating a simplified semantic system

We started from scratch and redesigned our experience from the ground up. Experimenting with different sizes, weights, letter spacings, line heights, you name it – all in the name of striking the perfect balance of style and boldness that could scale. We were left with 4 display styles, 4 title styles and 6 body styles, taking our set from 22 to 14.

Our next issue was style naming. We had previously taken a generic approach to naming, using names like ‘title 1’, which didn’t tell our designers and engineers anything about when and where to use it.

It was at this point I realised, if we use semantic naming for our colours, why wouldn’t we do the same for typography? Given we had stripped most of our styles, the majority we were left with was our title styles, which is where our key hierarchical issues would lie. So we started there, and created new names based on sections rather than numbers.

To stress test these new style names, we created a game called ‘Name that style’, where designers were asked to match style names to text on a screen. Straight off the bat, we noticed there was a smaller margin of error, which led to only minor tweaks to the new system – winner. Since launching the new semantic system, we've had stronger consistency across the product and less questions on guidance.

Do you speak my language?

Now, while Inter and Wise Sans support many languages, they’re not nearly as multilingual as us. So we needed to find a way to be able to communicate with our customers without ruining their Wise experience.

We started with the basics and introduced system defaults. This ensured that no matter what language you speak, you can still use Wise. While system defaults will get us halfway there, they’re sometimes unpredictable, clunky, and not very Wise.

So we introduced fallback fonts as well —, dedicated font stacks for our core languages that Inter and Wise sans don’t support. We started with simplified Chinese, Japanese and Thai, which you can already see in our marketing. And it’s in the pipeline for our products too.

When designing for an international audience it’s also important to look at your line heights, and how they work in different languages. We learnt early on that a tight line height in English is fine, but when you get to Spanish, diacritics (accents) will start to bleed between lines.

A simple solution for this is adjusting the line heights dynamically for different languages, giving them more breathing space and making copy more legible for everyone. If you already have different language stacks, this is fairly easy to implement.

And don’t forget about languages that read right to left, like Arabic. It’s worth adding right to left support to all of your components so teams get it baked in automatically.

Closing thoughts

We learnt a lot when redesigning the way we look at typography.

Building brand personality can be as simple as a stylised glyph. It’s important to fix your system before implementing big changes. Experiment and challenge your designs. Semantic naming and a reduction in styles will reduce load on your documentation and create more consistent experiences. And please please please, don’t give your users a worse experience just because they speak a different language, even if you’re in an English speaking market.

By learning these lessons and evolving our system, we’ve been able to craft a multilingual Wise experience for everyone, everywhere.