Choosing a Typeface for Flapp
Anyone using Travelstart’s product on more than one platform might have noticed mismatched fonts. Flapp — the official Travelstart app — has a slightly different look on iOS and Android, as well as compared to the website. But this is about to be fixed. As we’re in the process of visually uniting our fonts, here is a look at the path of Flapp’s typographical journey…
Flapp Origin
When Flapp was launched in May 2015, it was an independent product and ran with its own set of design rules, as mentioned in its launch article. Flapp was developed without any cross-platform design guidelines by a small team of developers in Taipei, Taiwan. iOS selected Avenir Next and Avenir Next Condensed. Android chose Roboto and Roboto Condensed. All the while the website used Helvetica Neue.
As Flapp continued to adopt Travelstart core features (and the mobile team in Taipei grew larger), the app inched closer to a full integration into Travelstart’s product family. And that’s when we hit a minor brand identity crisis: colors, icons and fonts were not aligned on the different platforms.
Now, colors and icons are (relatively) easy to change. Once a set of guidelines were defined, all colors and icons could be replaced accordingly. The typography, however, needed more consideration.
Typographical Choices
The Travelstart website uses Helvetica Neue (resp. Arial on Windows). It’s a popular choice as over 90% of website users have these typefaces on their machines. There’s no need to embed any font files and waste bandwidth.
👉 Did you know, Arial was commissioned by IBM in order to avoid paying Helvetica licensing fees. Later Microsoft purchased the rights and further tweaked it to become their system font. 👈
Thus, for Flapp the easiest choice would be to fall back on Helvetica Neue / Arial. However, there are 2 problems with this solution:
- Helvetica Neue was created in 1983, as a revision of the original Helvetica. While it was being optimized for then modern devices (mainly print related), it was not really designed for mobile screen resolutions. After all, back in 1983 mobile devices and their users looked like this:
- In order to use Helvetica Neue on Android devices, we’d need to package the font files into the app, which would increase it’s size significantly.
Airbnb, for example, does not worry about size or bandwidth limitations, as the recent implementation of their custom font Cereal shows. But at Travelstart, our size and resources are a bit more compact, hence we need a streamlined solution.
System Fonts to the Rescue
To avoid any issues, we want to run Flapp with OS native fonts. iOS has a nice variety of fonts preinstalled. Android’s native choice is a bit more limited (namely 1 choice). But fortunately everybody is mad about Helvetica! Hence both, Android and iOS, have created a system font which borrows heavily from it.
👉 Did you know, Helvetica was originally named Neue Haas Grotesk — “Haas” is the name of the type foundry and “Grotesk” the style it was inspired by. “Helvetica” is part of the latin name of Switzerland, where it was conceived. 👈
Google’s Roboto was created in 2011 and launched as Android’s system font with Android “Ice Cream Sandwich” 4. Google calls Roboto “modern, yet approachable and emotional”, but really it’s a homage to Helvetica.
Apple’s San Francisco was introduced in 2014 and launched as system font with iOS9. It replaces Helvetica Neue, which itself replaced Helvetica as the OS system font. San Francisco was specifically optimized for display on all iDevices. In fact it was optimized so well, that Apple released 4 variants:
- SF for macOS, OS & tvOS,
- SF Compact for watchOS,
- SF Mono for XCode, and
- SF Serif for Apple Books.
In addition they also created 2 different optical sizes for SF and SF Compact. That is a lot of font to digest, but makes for the ideal reading experiences on each iDevice.
👉 Did you know, Apple released a decorative font called San Francisco in 1984. The typeface was a playful take on ransom notes, but didn’t stand the test of time. It was removed 6 years later. 👈
Same Same but Different
Even though Roboto and San Francisco have been based on Helvetica, they both carry their own set of characteristics. They are not a perfect match by any means, but — with some tweaks to the letterspacing — close enough to feel the same.
Being armed with compatible system fonts, we were left to create different type scales for each platform. Taking big inspiration from Google’s Material Design Guidelines, we produced font styles that match each other closely.
So, keep an eye out for the font changes within Flapp. As we roll out the new designs the booking experience on Travelstart will become more unified across all platforms.
