Improving typography of time display in iOS

I recently ran on Youtube your channel Pimp my type… Its purpose is to help you improve the design of your website, app, or digital product with the power of typography. This article is a transcript of the first issue with some additions.

Upcoming Workshops

In this first installment, I talk about something that has been driving me crazy for a long time: the time display in iOS. Every minute the numbers change places, it just annoys me. Find out why Apple made the current decision, how we could improve it, and what lessons we can learn for our projects.

Problem

If you look closely at the iOS lock screen below, you will see one annoying detail. I recreated it in Figma, and when I switch minutes, you can see the time jump. This is especially noticeable when the time is switched from one or to one, which is the narrowest number. To improve this display, we first need to figure out what those numbers are.

Time display in original iOS design with annoying shift occurring when time changes

Numbers in typography

There are two styles: old style figures. Also known as minuscule or old style figures and lining figures. Old style numbers have different heights… This looks like a typical running text line, so they blend in better.

Improving typography of time display in iOS
Old-style numbers have different heights and show tops and descenders

On the other hand, there are header numbers, also called modern, which are basically the same height as the capital letters. They work best when used alone, in user interfaces or time displays. This is the more common style of numbers.

Improving typography of time display in iOS
Header digits are the same height as capital letters

Now, besides these two styles, there is two spacing formats: proportional and tabular. Proportional numbers have variable spacing, comparable to uppercase and lowercase letters. This spacing maintains an even, balanced color in the rest of the alphabet, allowing numbers to blend beautifully with horizontal text.

Improving typography of time display in iOS
Proportional numbers work better with solid text, tabular numbers work better with vertical alignment

Tabular figures monospaced. This means that all digits have the same width, so they are vertically aligned, as you can see in this example. This makes them the preferred option for use in numeric columns such as tables, price lists, and lists. Or in digital typography in places where you don’t want numbers to jump, like when displaying the time?

Alternative time display for iOS

So let’s take another look at the iOS 13 lock screen. All Apple products and interfaces use the San Francisco font. It is a well-designed modern sans-serif font optimized for screens, with many Open Type features, alternate characters, and more. San Francisco contains proportional and tabular heading numbers. The original lock screen time display uses proportional San Francisco numbers. So let’s change them to tabular and see the result.

Improving typography of time display in iOS
IOS time display with tabular numbers. No jumps, but time is almost falling apart as the monospaced 1 creates too much empty space around it

The time 12:10 with tabular numbers looks quite normal, and in the case of 12:11 there is a lot of space between the numbers, which makes it seem like they are not related to each other. And the problem here is the number 1. To compensate for this, Apple could add an alternate serif for the number 1 to fill in the blank space. Some typefaces do just that, like FF Tisa (the font used in the examples above) where it automatically adds 1 serif when I switch to tabular numbers. Unfortunately, San Francisco doesn’t have a serif 1, so I drew it for this example and it looks better than the original table 1.

Improving typography of time display in iOS
IOS time display with tabular numbers with alternate numeral 1 with serifs. The spacing is better, but it completely changes the character of the font to a more technical one

Now the spacing is less of a problem, but the distance seems to be too great. It annoys me even more that now the font sets a different tone for the interface. The number 1 with serifs makes it more technical, less elegant and simpler.

Output

To arrive at a conclusion, I compared three options: the original design with proportional numerals, the design with tabular numerals, and tabular numerals and alternate units. If I knew what I know now, I would prefer the original design. It’s just more compact and simpler than the alternatives.

Yes, it’s not perfect, and I still hate it when numbers jump, but considering the alternatives, Apple made the best choice. At least this happens once a minute, and the shifts are not as noticeable when the number 1 is not used.

It also teaches us how to use different intervals for numbers. For example, I recently made a counter component that uses tabular numbers to align them.

Improving typography of time display in iOS
Counter component design using tabular numbers. Numbers will not jump when animating as they all have the same width

Share your typography ideas in the comments below!

Author: Clark Douglas

Leave a Reply

Your email address will not be published. Required fields are marked *