Monospaced Numerals–Design Details 001
Version 1.5 of Series revamps the main UI with custom designed components built in SwiftUI. It also puts the lovely Ringside font from Hoefler&Co to work.
Today I wanted to look at a tiny detail that makes a huge difference in the personality and interaction of the app: monospaced numerals.
This post explores a design detail in Series, a fast and flexible photo layout app designed for photographers. Download Series on the App Store.
When I started designing this UI, I knew I wanted to introduce a slightly more visual interface. Using appropriately sized rectangles for the Frame options seemed like a good place to start.
By luck, I was looking through Figma’s excellent Type Details pane and flipped on monospace numerals. In this context, the “1” and the uniformity of the type just clicked. I mean, just look at that 1! And that 16!!
Not familiar with monospaced numerals? In proportional fonts, each number and letter has a different width that suits its particular form. In monospaced fonts, each letter and number has the same width.
Many quality fonts let you switch the numbers betwen proportional and monospaced options (you might also see monospaced numerals referred to as “tabular figures”). Traditionally, they’re used for typesetting tabular data so that that numbers on each row will line up vertically. Similar to a monospaced font, but matched to the rest of the font and ready when you need them.
Here’s the completed interface. It uses a few different weights and styles of Ringside to differentiate various labels and controls. Monospace numerals are used for all numeric values, bringing that bit of personality across.
But it gets better! By using monospaced numerals for UI values, we avoid jumpiness when those values change. Here’s the new color picker UI, again with those sweet monospaced numerals for values.
And here it is in action, adjusting the Hue slider. The top slider is set in Ringside with proportional numerals, the bottom with monospaced numerals.
See how the top numbers jump around? That’s because they’re different widths. As the value changes—say from 100 to 120—the position of the left most digit shifts. With monospaced numerals, the position of each digit is constant as the value changes. It looks great here, and feels even better in use.
Details matter!
Want to use monospaced numerals your projects? Here’s a great resource: learn more about monospaced numerals and how to use them in iOS and other platforms.
Series is fast and flexible photo layout designed for photographers and optimized for Instagram.
- Download Series on the App Store
- Series on Instagram — see what the community is making
- Series on Twitter—follow for updates
