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

Ragged Edge

Design Lead

Ness Grixti — Me

Staff Designer

Felipe Gonzalez

Tooling & plugins

Henrique Gusso

Mobile Development

Ilya Puchka, Joao Cevada

Web Development

Jon Stieglitz, Anton Dozortsev

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.