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
Wise rebrand
As part of the Wise rebrand, Ragged Edge provided us with two new typefaces for our experiences.
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.
Phase 1
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.
Phase 2
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, creating 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 prove to cause confusion, so we looked at implementing semantic typography naming so that it was always evident 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 boasts a wide variety of support for international languages, our display font Wise Sans didn’t cover quite as many.
Language fallbacks
Wise supports 9 core languages, Inter and Wise Sans support all of them except Simplified Chinese and Japanese.
This led us to implementing a fallback set based off fonts that Ragged edge gave us.
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.
