Down the font legibility rabbit hole

While working on a recent project I was struggling with optimizing the readability of the content in the interface. The product is a safety-critical interface used in aviation with lots of codes in small sizes. Good readability is crucial to make sure the users can do their job well and with as little fatigue as possible.

The White Rabbit → wikipedia.org
SF Mono

Legibility ≠ readability

San Francisco’s High-Legibility Alternates → developer.apple.com
The top line of characters are a square grotesque design (Eurostile) and the bottom line a humanist design (Frutiger) highlighting various characteristics thought to improve legibility. (Graphic courtesy of Steve Matteson of Monotype Imaging.) → agelab.mit.edu

Ariall the things

The proof of the pudding

Overview of different fonts with sample text → figma.com
Codepen for SF Pro High-legibility alternates
Typography window in Pages
A tool to test the legibility of different fonts for typical aviation data like flight numbers, aircraft types and gate numbers → vrmrck.be/projects

Product designer at Namahn