Jul 01

Beyond Helvetica: The Real Story Behind Fonts in iOS 7

Posted in: iOS, Jürgen Siebert, screen typography, UI typography

This article by Jürgen Siebert was first posted on June 17, 2013 to the German Fontblog.de. The English translation for Typographica.org is by Maurice Meilleur.

There was no shortage of long-distance diagnoses of the typography in Apple’s recently presented mobile interface, iOS 7. The live-streaming keynote address from the WWDC developer’s conference last Monday hadn’t even started before the first typophiles started sharing their concerns on Twitter. The day before the announcement, our friend Stephen Coles was already deeply worried about the light weight of Helvetica on the display banners hanging at the WWDC venue in San Francisco:

The next morning former New York Times art director Khoi Vinh compared the look of the new iOS to a cosmetics department:

And two days later, Thomas Phinney (formerly in the type team at Adobe) also took iOS 7’s typography to task:

I should remind the early birds who were already chirping during the keynote:

  • that it will take at least another four months for the final version of iOS 7 to reach the market
  • that you can’t judge the effectiveness of a typeface in a dynamic OS from videos or screenshots
  • that no one commenting on the keynote said a word about iOS’s underlying font technology, which has obviously changed.

People did calm down over the subsequent days of the week-long conference. This was largely because of the presentations from Apple’s engineers devoted to ways the OS would handle fonts, in which they revealed the first details of the new technology.

Screenshot of the Music app in iOS 7 playing “Words” from the album “Sinking Ships” by The Bee GeesNo, text and words aren’t sinking ships in iOS 7.
In fact, it’s just the opposite.

In his session, Ian Baird, the person in Cupertino responsible for how Apple’s mobile products handle text, showed off what he called the “coolest feature in iOS 7”: Text Kit. Behind this name is a new API (application programming interface) for developers of apps in which text plays a critical role. Text Kit is built over Core Text, a sophisticated Unicode layout engine with a lot of power, the potential of which unfortunately hasn’t been very easy to tap in the past. But now, no one needs to struggle with it, because Text Kit is there to act as an interpreter.

Text Kit is a fast, modern layout- and text-rendering engine, easy to maintain through settings integrated into the User Interface Kit. Those settings give developers full control over all Core Text functions, so they can choose very precisely how text will behave in all user interface elements. To make that possible, Apple has revised UITextView, UITextLabel, and UILabel. The good news: this means the seamless integration of animation and text (the same principle behind UICollectionView and UITableView) for the first time ever in the history of iOS. The bad news: this means existing text-heavy apps will have to be redeveloped in order to support all these nifty new features.

iOS-Text-Design-and-Rendering-Architecture

Apple has rebuilt the text layout architecture in iOS 7, allowing developers to build control over the behavior of text and fonts into the user interfaces of their apps, with a level of dynamic freedom unheard-of before.

So what do all these new options mean, practically speaking? Developers can now drop long-form texts into reader-friendly, attractive layouts, with multiple columns and with image layers that aren’t chained to the grid. There are exciting new possibilities hiding behind the labels “Interactive Text Color”, “Text Folding”, and “Custom Truncation”. So, for example, it will soon be possible while composing in iOS to have the color of text change if the app recognizes a specific dynamic element (a hashtag, a Twitter account name, or the like). Or, we can trim longer texts into previews without being limited to options like before/after/middle; developers can define those options however they want.

Customized-Font-Instance

With just a few lines of code, developers can display the time using presentable typography, with proportionally-spaced figures and the correct hh:mm divider.

Typographic aesthetes will be happy to learn that support for kerning and ligatures (Apple calls these macros “font descriptors”) will be turned on throughout iOS 7, effortlessly accessible even over very advanced visual effects like the deceptively real-looking handmade paper texture. But don’t worry: the magical letterpress look is, for now, the only remaining skeumorphism that has survived the update, and that only in the Notes app. Think of it as an example of something that can be turned off in the future, something developers will have the right to use, or not, as they wish.

But the hottest typographic number in iOS 7 is Dynamic Type. As far as I know, Apple’s mobile products will be the first electronic devices that will by default consider a quality of type that hasn’t been given so much attention since the age of letterpress. That’s right: we’re talking about an operating system, not an application or a layout job. It’s true, optical sizes were tried in photosetting and desktop publishing—but they weren’t really automatic, and some of the attempts turned out to be blind alleys (like Adobe Multiple Masters). And yes, there are any number of displays in industry products that use different ‘grades’ of text for smaller and larger settings. But optical sizing in iOS builds on these earlier attempts and offers astonishing possibilities.

Dynamic-Type

The Dynamic Type waterfall in iOS 7 (middle) lets developers specify which fonts to use at each font size. This allows them to select heavier weights when type is small, for example. Compare this to the example on the left which demonstrates a simple decrease in size of the headline weight only, and the one on the right which shows just the text font getting larger. The letterspacing shown here isn’t perfect, but an app developer could always embed a different font family, one with a wider spaced variant for the text size. Update: It appears Dynamic Text does not work with custom embedded fonts like we hoped.

Thanks to Dynamic Type, users can now use sliders (with seven stops, found under Settings > General > Text Size) to adjust the text size in every app according to their own taste. And in case the largest size isn’t large enough, those with impaired vision can find under Settings > General > Accessibility a way to turn Dynamic Type up to its maximum size, options to “improve legibility” (which sets the text over a light gradient without changing its size), and optimize the background contrast.

Conclusion: When iOS is ready to be released in a few months, the operating system itself may not offer the best typography (using Neue Helvetica). But the OS’s underlying text layout and rendering technologies offer Apple and developers everything they need to conjure up dynamic and readable text on the Retina Display in ways they’ve never been able to before.

No Comments | Tags: ,