🔢 Applying the Perfect Number Font for Our App (2/2)

How to select and apply the perfect font for our app

Previous post: #1. Applying the Perfect Number Font for Our App

Let's dive right into Part 2 of applying the perfect number font for the Alarmy app :) In the previous post, I wrapped up by mentioning that Montserrat wasn't quite right for our numbers. Did anyone guess the reason why?

It was exactly because of the ambiguity of the number '1'.

Step 5. Re-evaluating readability in the context of use

How many people would actually misread 1:01 written in Montserrat as 7:07? Or better yet, how many users would even set an alarm for 1:01 in the first place?

Despite that, I decided to choose a different font. Alarmy users often check the time right after waking up, and cognitive ability drops significantly when you're half-asleep. At the very moment of dismissing an alarm, mistaking the time for 7:07 even for a split second becomes a critical issue. Plus, this is the touchpoint where we need to deliver our most important user experience, so I figured we shouldn't leave room for even the slightest misunderstanding.

Step 6. Final font selection

I decided to re-examine the fonts from the perspective of our usage context. I looked closely not only at the distinction between '1' and '7', but also the negative space (counters) inside the numbers, and then I wrote up a new checklist. In the end, Lexend—which scored high on the checklist and had absolutely no issues with number legibility—was our final choice.

Step 7. Preparing to apply the font

However, applying the newly chosen Lexend font wasn't exactly smooth sailing.

There was one snag in applying Lexend right away: there was a noticeable weight difference between the Bold of Alarmy's default Android font, NotoSans, and the Bold of Lexend.

The font on the top row is NotoSans Bold, which we use on Android. The second row is Lexend Bold, and the bottom row is Lexend Semibold. As you can see, for a natural match with NotoSans Bold, we actually needed to use Lexend Semibold instead of Lexend Bold. But since Alarmy's Android app only supported Bold, Normal (Regular), and Italic font weights, adding Semibold was going to be a complicated task. (I felt completely crushed when the engineer told me this. 😭)

The process of selecting Lexend had been a struggle in itself, so there was no way I was giving up here! Instead, I used a font editing tool called Font Forge to replace Lexend's Bold numbers with Semibold ones. Thankfully, Lexend is covered by the OFL, so we were totally free to modify it.

OFL :Open Font License라는 말의 약자로서 폰트를 자유롭게 수정할 수도 있고 재배포할 수도 있는 완전 공개된 라이센스라는 뜻입니다.

Ta-da! And just like that, I was able to swap out the Bold numbers for Semibold ones.

Step 8. Applying the font!!

Through this whole series of steps, we were finally able to apply the perfect number font for Alarmy.

If I had set the goal of this PBI simply to change to a "prettier font," I never would have been able to persuade or get buy-in from the other members. By thinking deeply about why we needed the change and what expected effects it would bring, the font we chose was thankfully implemented without any negative metrics or bad feedback. 😆

Wrapping up

I skipped over quite a few parts of the process, so it might not seem like it, but there was actually a lot of agonizing, worrying, and outright despair before this font finally made it into the app. 😂

To summarize the lessons learned from this project:

1. 한가지 안을 선정해야 할때, 구성원들과 의견을 수렴하기 어렵다면 체크리스트를 작성하는 게 도움이 됩니다.
2. 당연한 얘기지만, 우리 서비스의 사용자 특징과 사용 맥락을 잘 파악해야 옳은 방향으로 프로젝트를 진행할 수 있게 됩니다.
3. 안된다 해도 되는 길은 반드시 있습니다. 두드려라! 그러면 열릴것이다.

Well, I hope my experience can be of some help to other designers out there grappling with similar issues! I'll close out the post here. 😉