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.

And I say this as if they were independent, but legibility is defined by the details. As with SF Text and Display, the key detail here is the space between letters.

When type becomes smaller, letters tend to need more space between them, so that they eye can more easily tell them apart.

But there are more meaningful details in the letterforms themselves, of course, like the thinner parts of the letters that sometimes need to become sturdier, as the letters become smaller.

Then, some details might strike you as accidents, like the position of the dot on the letter "i," for instance.

But that's intentionally done to make sure an "i" won't be confused with an "l" at small sizes.

Because the smaller a gap gets, the easier it is to fill, be it with ink or pixels.

So since relative size is relevant here, let's observe our two initial words at their intended scale ratio.

The difference between the two designs now feels much less pronounced, which is the purpose of optical sizes, they balance legibility with aesthetic qualities to make the design feel comfortable and consistent across scales.

And for people making font centuries ago, adapting a design to its scale was a fairly direct process, since they always worked at actual size.

But on the other hand, digital type design has been faced with an unfortunate challenge.

Because you can scale vector graphics infinitely, virtually, all digital fonts only contain a single drawing for each glyph.

So type designers have to pick an ideal size to design for. And that means that most fonts you use were really meant to perform best around a certain size.

Of course, type designers can always decide to create multiple fonts adapted to multiple sizes, but it's not a decision we take lightly, because it's a lot more work, and more importantly, it becomes a font family that's less convenient to use.

So when SF was initially designed, we considered that very carefully, and we eventually decided on having optical sizes but just two of them.

For us, this decision was a bit easier to make, because the OS could switch between designs automatically.

Then we embraced the need to teach everyone about the existence of SF Text and SF Display.

And for years now, that's pretty much been the state of the art on our platforms, but we kept wishing we could refine this behavior more.

After all, wouldn't it be great if a single font would automatically adapt to each size you picked without you having to switch between Text and Display? Well, that's exactly what became possible a few years ago.

Variable fonts were introduced in 2016, as an evolution of the OpenType specification.

The spec was updated in response to the increased popularity of web fonts, and the fact that this technology was really testing the limits of existing font formats.

The format fundamentally changes the way glyphs are stored in a font.

A glyph is no longer limited to being a single static drawing, it can also describe the way each point moves to produce a related but different glyph.

Each of these motions, or deltas, are tied to design axes that let software control their behavior.

Among these axes, there is one that is of particular interest to us, because it is dedicated to the implementation of optical sizes.

This has allowed us to update SF Pro and refine our existing optical sizes, but this new dynamic behavior really shows its potential with our system serif, New York, where the different adaptations to size are much more noticeable.

Thanks to variable optical sizes, we're now able to design typefaces that can adapt to scale perfectly.

And coming full circle, we're recovering what was good about physical type.

This is why, this year, we're starting to move away from optical sizes as separate fonts. And it's not just optical sizes that are now merged together but weights too.