Wise rebrand
Typography library overhaul and redesign
As part of the rebrand we were given new fonts to take us into bold new terrain.
While Ragged Edge had given us a map, we needed to understand the landscape to navigate a path forwards to implement not one, but two new fonts to be scaleable, work across a variety of experiences, and be internationally accessible to our customers.
You can see the live documentation on typography at wise.design.
The Team
Visual direction
Design Lead
Ness Grixti — Me
Staff Designer
Tooling & plugins
Mobile Development
Web Development
Brand new (type)faces
As part of the Wise rebrand, Ragged Edge introduced two new typefaces to define our product experience.
Inter
Supports 148 languages. It’s a google font, reducing load across product. It’s great for accessibility.
Wise Sans
A bold typeface that took inspiration from letterforms across he globe. Evolved by Ragged Edge from an existing typeface.
The Process
01 Audit
As part of the audit for typography, I reviewed typography usage across platform and the existing set.
I also spoke with designers to get a better idea of their knowledge and usage of typography based on my findings in the product audit.
Key considerations
Too many styles
We had 25 styles in total, making it really hard to know what to use and where.
No visual hierarchy
Designers struggled knowing what to use where, causing chaos across product.
Generic naming
We relied on generic naming across a lot of styles, which didn’t help our other problems.
i18n
Wise has 9 core languages. Inter and Wise sans are missing support for a few of them.
02 Exploration
Making our new fonts work
We had our new fonts, and a rough idea of how to implement them into our existing system. This led to a long period of design exploration which was split into 2 phases.
First, we ran a straight swap to see what broke and what held up. Then we moved into a refined overhaul to properly take advantage of the new typefaces.
Straight swap
We took our existing styles and plugged in the new fonts.
While it was okay, it didn’t solve a lot of our issues and it just kind of felt flat.
We continued to experiment with different weights and sizes with our existing set with the same issues. The issue was with the structure of the set itself.
Detailed exploration
So we took a step back and started from scratch, exploring as many different designs as possible without the constraints of our existing system.
This allowed us to streamline our set and increase hierarchy.
A reduction in styles
As a result of this work we were able to streamline our set and reduce the number of type styles we supported.
This created stronger hierarchy between our styles and reusing them for function specific purposes to keep it simple.
03 Semantics
Semantic naming for typography
Now we had a smaller set, we knew that our heading styles would still cause confusion.
To combat this we explored semantic naming making it more evident on what to use, where.
Testing our styles
I created a game for our designers called name that style, where I asked people to match up the style name to text in the UI.
This allowed us to see patterns in confusion and iterate on the naming.
04 Internationalisation
Wise Sans
While Inter supports 148 languages, our display font Wise Sans didn’t cover quite as many. To ensure a consistent experience across languages, we introduced dynamic font fallbacks and adaptive line heights—improving internationalisation support ahead of Wise Sans' planned expansion in 2024.
Language fallbacks
Wise supports 9 core languages, Inter and Wise Sans support all of them except Simplified Chinese and Japanese.
To implement them I needed to ensure all line heights were similar across all of our languages.
Dynamic line heights
As we had defined a tight line height (85%) on Wise Sans, we needed to include dynamic line heights (105%) for all latin based languages to ensure legibility.
The results
A reduced set
We reduced our main font set from 23 to 12 (including display styles).
Stronger hierarchy
By reducing and using semantic naming designers know when and how to use each title.
Semantic naming
Using semantic naming reduced reliance on our guidance site and increased consistency.
An international set
Everyone is now getting similar Wise experience. We’re speaking your language, literally.
