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.

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.

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.

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.

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.

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.

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.

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.

Share your typography ideas in the comments below!