The details of UI typography

Hello and welcome to WWDC.

Hi. My name is Loïc Sander. I'm a type designer on the Apple Design Team.

In this session, with my colleague Jiang, we'll introduce you to the details that matter for great UI Typography and the tools that will allow you to achieve that for your app.

Overall, all the topics we'll cover are really about understanding the dynamic behavior of text on our platforms. So first, I'll talk about about fonts and their aspects that are relevant to UI design.

Then Jiang will show you around useful APIs and best practices when dealing with typographic styles and layout.

For most people, dealing with type is as simple as picking a font and choosing a point size, and it's really how it should be.

But with our first topic, I'd like to show you how changing the size of text actually has many subtle consequences.

Learning about optical sizes is key to a better understanding of legibility, which is something you should always try to care for.

Right after optical sizes, I'll talk a bit about variable fonts. This is a format that's letting us refine the behavior of text on our platforms and can improve the typography of your apps too.

Then I'll get into a topic that affects UI Design directly: tracking and leading. They're essential parts of text layout, so it's definitely worth taking time to become more familiar with them.

Last but not least, Jiang will delve into Text styles and Dynamic Type. Two of our core typographic tools to achieve great UI design.

It'll be a refresher, since some of those APIs are not new, but we do also have some updates on the topic. So let's get started.

To describe what optical sizes are, I'd like to go back a few years when our main system font, San Francisco, was first designed. Our team put a lot of effort in making sure that SF would look great at any point size. And we achieved that by introducing two variants that you're probably familiar with. We designed SF Text for small sizes below 20 points and SF Display for 20 points and above.

These variants are what we call optical sizes.

They allow us to better control the details that affect legibility. For instance, the space between letters in SF Text and Display is adapted to the fact that one design will be used small and other one large.

The vertical proportions between the two designs also differ slightly, so that SF Text can appear a little bit bigger at the same point size, and therefore being more legible when used small.

When we introduced this design, it felt like a small revolution, but there's something amusing I find about the word "revolution." We usually assume it means forward motion or progress, when essentially it means "going back to the start." Because, you see, optical sizes have been a thing ever since typography was invented, and remained a printing process involving physical objects that barely changed for centuries.

It is true that digital technology gave us a lot more flexibility in handling text, but in one way, it made typography a bit more crude than it used to be. So to make my point, I'd like to show you optical sizes in their natural habitat.

As a type and history nerd, I happen to have this old book from the 18th century at home. This is what we call a type specimen. It contains samples of typography at various sizes, of which I want to show you two examples. In these pages, we have the same design at a different size, which is to say, two different fonts, a bit like SF Text and Display.

They're about eight and 42 points in today's printing units.

Now I'd like you to picture that for each letter you see here, there was a metallic stamp of the exact same size that was made by hand.

These so-called stamps were designed through a process that involved cutting letterforms on punches of steel.

And these punches of steel were then used at the start of the molding process, that resulted in a sort, which is what these metallic stamps are actually called.

Looking at the details of these letterforms reveals how much this manual process was influenced by physical scale.

The eight-point letter looks rough because of its smaller dimension, and that says something about optical sizes: they're entangled with resolution.

Which, for people cutting punches, meant designing against the challenges of printing with metal and ink on paper fibers, while for us, it means dealing with the challenges of vector graphics being rasterized on a pixel grid.

But regardless of the kind of output you design for, the changes in optical sizes are meant to balance legibility and detail.