Optimising typography for CPF mobile app
Led a typography refresh from Arial to Roboto—enhancing readability, reducing UI inconsistencies, and delivering a seamless change with no reported errors or complaints from members during the transition.
Context
CPF Mobile relied on Arial as a broadly supported sans-serif typeface. However, if a user’s device lacked Arial, the app defaulted to the system font — which varied across manufacturers and platforms. This created issues with text wrapping, inconsistent layout, and visual brand drift.
Problem
UI inconsistencies and line wrapping issues, especially in text-dense layouts
Missed opportunity to optimise for mobile readability and visual efficiency
Goals
Create a consistent, accessible and efficient reading experience across all devices on CPF Mobile.
Improve readability and layout stability on mobile screens
Adopt a clean, accessible, open-source font that aligns with CPF’s tone
Ensure consistent font rendering across all devices
Business challenge
Montserrat, our website font, was the first candidate. However, its generous spacing caused wrapping issues and visual imbalance in mobile UI — increasing development effort and cluttering screen real estate.
Typeface benchmark
I studied typography choices from leading platforms (e.g. Google, Apple, gov sites) and assessed commonly used mobile fonts.
Typeface assessing criteria
Character accessibility visually, punctuation and number clarity (important for forms and data input)
e.g. 0 and O, 1, l, I (1, L and I), 8 and B
Font width (affects how much text can fit on mobile screens)
Readability at small sizes (critical for mobile apps)
Versatility across weights (supports hierarchy in design)
Visual contrast (accessibility)
Shortlisted fonts
Roboto (designed for mobile, widely supported)
Montserrat (stylish but wide)
Arial (legacy font as baseline control)
Screen-level analysis
I created side-by-side high-fidelity comparisons to assess readability, UI balance, and space efficiency using Figma mockups. Each font was applied to core components — labels, cards, buttons, form fields, and dense content blocks — to observe readability, wrapping, and alignment.
Populated CPF mobile screens with core components and dense content blocks
Arial (legacy font as baseline control)
Montserrat compared against Arial
Roboto compared against Arial
Image overlay of Arial against Roboto and Montserrat
Detailed technical analysis
Roboto emerged as the optimal choice, offering the best combination of readability, familiarity, and efficiency.
It has been crafted for screen legibility and is highly efficient with space. Roboto also has a modern style like Montserrat, but without Montserrat's width limitations. This makes Roboto more versatile for use on various devices and screen sizes.
We updated our design system and hardcoded it into CPF Mobile, replacing Arial and eliminating reliance on system defaults. This change improved visual consistency, text alignment, and readability across all user devices.
Good typography isn’t just how it looks — it’s how it works, scales, and supports every user.
Visual cost is real — Montserrat, though elegant on web, caused excessive wrapping on mobile.
Design systems need flexibility — Open-source fonts like Roboto offer scalability and better dev control.
Typography is part of accessibility — it’s not just a visual decision, but a usability one.