๐ข Finding the Perfect Number Font for Our App (Part 1)
How to Choose and Apply the Right Font for Our App
Typography is a crucial element of design. Considering that most of an app's screen is essentially made up of text, simply changing the font can bring a positive shift to your service's image.
When I joined the Alarmy team, one of the very first things I wanted to do was change the font used for the 'numbers' in the Alarmy app. As with everything in life, it didn't go easily.๐ You might think, 'Can't you just pick a decent font?' but... it's actually not that simple. To offer a little help to designers who share this struggle or find it difficult to choose typography, I'm going to write down my blood, sweat, and tears-filled 'process of selecting and applying a number font' in the chronological order of how the work unfolded.
Step 2. What's the criteria for a font that fits the role of numbers in Alarmy?
Out of all the countless fonts in the world, picking the exact right one for our app is no easy task. Before selecting a font, I took a step back to look at the role 'numbers' play in Alarmy. Mostly, they play a hugeโand highly importantโrole in 'checking the time' and 'checking the mission count'.
Rather than 'input/control' or simple 'display,' the focus is heavily on the role of 'checking a status.' So, I set a baseline to select from fonts that met the following three conditions.
1. Lining rather than Oldstyle
One of the most frequently used components in Alarmy is the Picker for setting alarm times and mission counts. Considering this, a Lining type with consistent heights is much more suitable than an Oldstyle type, which has height variations due to Ascenders and Descenders.
2. Monospace rather than Proportional
Likewise, for elements like the Picker component and the alarm list, readability is much better when numbers are displayed at consistent intervals. Because of this, rather than a Monospace type where character widths vary, a Proportional type with constant width is more suitable. However, I decided to also consider Monospace fonts as long as the difference wasn't too drastic.
3. San-serif rather than Serif
As you well know, numbers written in a San-Serif font without decorative strokes will be much better for 'checking a status' than a Serif font with them.
Filtering this much should make picking a font a bit easier, right? Nope. Not at all. lol As I continued working, I realized these conditions were merely a 'font classification system' and didn't really represent the specific criteria needed for our app. In other words, the standards above were just a tool to help with initial filtering, and couldn't serve as a baseline to align the designers into agreeing, "This is the perfect font for Alarmy!" It wasn't a standard customized exclusively to act as 'Alarmy's number font selection criteria.' So, we needed a different benchmark that could align the thoughts of the DelightRoom designers. That's why I created a typography checklist.
Step 3. Creating a Checklist for Selecting a Number Font
I listed out the things we expected to achieve by changing the number font, extracted key words from that list, and turned them into checklist items.
Using the four keywords that emerged from thisโReadability, Identity, Aesthetics, and HarmonyโI created the checklist items.
Then, in practice, three DelightRoom designers scored a total of seven different fonts using the following format.
Step 4. The Final Font Selection ...?
Having a checklist made it so much easier for the designers to sync our thoughts and narrow down our opinions. Thanks to this, we were able to select Montserrat.
However, we discovered a fatal issue that meant we couldn't use Montserrat for the numbers in our alarm app. What that problem was, and how the work proceeded afterward, is something I'll continue writing about in
๐ขFinding the Perfect Number Font for Our App (Part 2!).
That's all for now ,, ๐