Good morning. Good morning everyone. My name is Antonio Cavedoni, and I am here to present to you about typography and fonts. I am a type designer at Apple. So, on the agenda today we will look at San Francisco and update our system fonts. We will see some terminology about typography. We will look at some typographic concepts. And then tools that you have available when doing typography. Lastly, we will see some details that you may want to adopt while working on your apps.

Okay. So, San Francisco, it is our family of system fonts. We introduced them last year. This is SF you see right here. And it is the system font for macOS, iOS and tvOS. We introduced this family here at WWDC last year. There is a video that talks about the philosophy and application of SF. And we've been applying it to all our platforms. So, Apple TV, we've been applying San Francisco to Macs. But we've also been applying it to the redesigned music app.

Now, in case you haven't seen it all around you here in Moscone Center, there is indeed a new member of the SF family, and it is called SF Mono. SF Mono is a new design for coding and it comes in many ways. We started with a light weight, up to regular, medium, semi bold, and then we're going to more expressive ways like bold and even heavy. So, all of these come with italics as well.

And they cover the Latin, SL, and Latin script. But, also the Cyrillic and the Greek script in all the styles and all the weights with italics. So, SF Mono is a monospaced design, of course. But, it's also monospaced across weights, which means that if you change your font weight the text will not reflow.

Of course this was a bit of a challenge when we were designing this heavier weight. So, we have to squeeze all these glyphs in. But, we designed that SF Mono for coding in small sizes first. And so we tweaked some of the glyphs like the punctuation or the bracket braces, some of the digits for using coding. And of course SF Mono is the new default font of choice of Swift Playgrounds. It's also in default in Xcode. Check out the new theme right there. Okay. So, that was small bit on San Francisco and the new SF Mono family.

Next I want to talk to you about some type terminology. Get us all on the same page on these terms about type that can be confusing at times. So, before I get started I just want to make a premise here, which is that today we'll look at the Latin Cyrillic and Greek scripts. But, if you're interested in multilingual typography, and you should, there are, there were actually two talks yesterday that you can catch on video. That talk exactly about this topic.

So, let's get started. What is text? Text encodes language, and has to do with meaning. Text is the stuff that you type. It is the stuff that gets auto-corrected and analyzed, and sent to your friends. Now, what is text made of? It is made of, oops, characters. A character is an abstract unit of texts and it literally is represented by a code. Now, before you can actually see one of these you need representation for it, which is called a glyph, a glyph is stored on your device as an outline, a sequence of points. And it lives inside a font file.

Now in a font file between a character and a glyph, there usually is a 1 to 1 mapping. However, things are not always this simple. There could be something called typographic feature, which is a mechanism that alters this 1 to 1 mapping, and makes things slightly more complex. For instance, you could have fonts that when you type the key for F or I, this character gets generated. And instead of getting two glyphs, you actually get just one, because they get combined into what is called a ligature.

Now, this ligature is made possible by a typographic feature, which is automatic and font dependent. Not all fonts do this. Some fonts have optional features that change the shape of digits. For instance, San Francisco has this alternate shape for the numeral 6 that we use when we want to make it a little bit more legible.

Now, fonts have multiple styles, which of course look all different. Some fonts have just two styles. Some fonts have many, many more. And you may have heard some of their names like Bold, Italic, Bold Italic, Condensed. All these are style names. Now, what holds all of these together is this design DNA, if you will.

And that is the idea of a set of shapes that is a typeface. There are many, many typefaces. And you may have seen or recognized some of these. Now, what do you do with typefaces is typography. Typography is using type to set text and encode language. Typography is the foundation of graphic design and of UI design.

So, we just saw a few terms. We saw text, text is made of characters, characters are encoded by or represented by glyphs. Between characters and glyphs, typographic features can alter the mapping between these. They're all stored in what is called a font file, which can have common multiple styles. They are all grouped under the same typeface umbrella, which is the design idea behind all these styles. And typography is the usage of all of this stuff to convey text.

Now, writers and editors, the people who write the text, concern themselves with text. The characters are defined by the Unicode Consortium. So, you don't have to think about them. And the type designers and font manufacturers are the people who come up with the design ideas and design the glyphs and make them into fonts. And then create the typographic features that you can then alter.

Now, typographers are the people who do typography. And I have some good news for you, which is that you are typographers. As matter of fact, we are all typographers. Whenever we change a font, whenever we make it bold, when we change the point size, this is all the act of typography. Now, as typographers of course you typography. But, you can also alter the text of course and pick fonts. Choose them, combine the styles, and alter the typographic feature. Turn the optional ones on.

Okay. I am almost done. But, I have a few more terms. And they actually have to do with the absence of something with the negative space around things. So, I just showed to you what a glyph is, which is an outline that represents a character. And in a font it's stored as an outline. But, it also has a width, basically a spacing property. Now, if I picked out a space like this and I typeset it in a line, I get this rhythm, which is not very even. So, type designers alter this to get an even rhythm between glyphs.

Spacing is built into the font and you cannot really change it. But, you can change tracking. Tracking is a modifier on the negative spacing. And it can either be neutral, or negative, or positive. And it is global for all the glyphs in a font. And it either moves the apart or put them further together, which is actually useful when you're doing small size typography. You'll probably want to bring the letters further apart and pull it together when they're large.

Now, tracking can be confused with what is known as kerning. And kerning really is an exception mechanism for individual pairs of glyphs. So, in this case the A and B are too far, and so the font has a kerning table inside that says, bring them closer together. The kerning table again, is done by the type designer and put inside of the font. And you don't control it. It just happens automatically.

However, leading, which is the space between the lines, is something you can control. So, the name leading comes from metal typography when to put lines of type further apart, pardon me, you would have stick pieces of metal between the lines. So, we just saw spacing, tracking, kerning, and leading. Spacing and kerning are built into font. But, tracking and leading are adjustable. And that is really all I have to say on type terms. So, now you are all caught up with typographic terms. Now, let's look at some concepts of typography.

We start with legibility. The legibility has to do with recognizing shapes and distinguishing them from one and another. You may be familiar with the idea that some typefaces have inherent legibility to them. However, what is not legible at one size is actually perfectly legible in another size. Scale is connected with legibility.

And when you alter the scale of a piece of text, details that were previously unavailable and not visible become visible. So, what is affected is the tone of what you see. Now, in these situations UI typography can be a lot like road signage. So, you're driving on the road, and the sign that you see is very large, its font size, but it's far away from you. And so a scale is not just a matter of point size, but also distance from the reader to the viewing surface, to the reading surface.

Now, in these situations things that apply to small scale typography also apply as well. So, for instance, bringing letters further apart or making the type bolder may actually improve legibility. But legibility does not just apply to text. It also applies to layouts. It's probably very obvious that a layout that is legible where hierarchy is clear at one scale may not be so legible at another scale. And the issue there is the density gets compromised. It actually increases very much.

So, what you could do to tame the density, is you could spread elements further apart. But, often times it's actually much better to rethink your hierarchy and the positioning of things, your layout for different scales. Now, if you want to know more about layout, there is a talk on Friday that talks about Iterative UI Design, which is the methodology to come up with ideas. And also they'll have tips on how to evaluate those ideas, which is the important part.

Now, the scale and density, they also apply not just to text and layouts, but also to glyph design. So, let me give you an example. What is this glyph? What is it called? Of course it's the at sign. But, in Italy we have a strange name for it. We call it chiocciola, which means snail.

So, when we have to design the snail in San Francisco, we started with SF Mono, sorry, we started with the one in San Francisco. And of course we did this, all right, we made it monospaced. However, when we have, when we validated the shape in the right context and scale, we realized the density was too high.

It was just getting muddy and not very legible. So, we came up with a solution that looks like this. Now, let me blow it up. So, in this example, we changed the density of the glyph by very much. And we did that by increasing the negative space, which is very critical for legibility.

Now, consider also the H, M and N glyphs in SF Mono heavy. Now, if I blow them up really big, you can probably tell that the strokes aren't actually the same thickness. And that is because you, when they are big you can actually tell, but when they are small you cannot. So, we're sort of deceiving you into thinking that they have the same density.

Okay. So, imagine you're getting parachuted into this picture. And you're trying to figure out where you and where you're trying to go. Now, you're probably going to subway somewhere, probably to Church Avenue. But, where are you? I know where you are. You're in New York, and I know by the font.

Now, I also happen to know, I know, I'm sorry, I also happen to know that this is not exactly Helvetica that they're using. So, I recreate that sign with a very Helvetica Neue Bold. But, what I'm trying to convey here is this notion of typographic voice, which is that if you change a typeface to a different style, even within the same family, not only does that sign not work the same way, but it doesn't feel the same. Okay. So, typefaces have this voice quality, and this does not feel like New York to me at all, and nor does this one. So, this voice property is now secondary. And actually it helps creating a context.

So, for instance, I am reading my email in SF, and now I'm playing a game. Maybe that's not so appropriate to have the SF in there. So, typefaces really help you with creating a context and helping your user understand where they are. Okay. So, these are the concepts we just saw. We saw legibility, scale, density, and voice. So, now I want to talk to you about some tools.

When we do typography in our platforms, you have three fundamental tools that you can use. The first one is system font, the second one is dynamic type, and the third one is our custom fonts. Now, a system font you already saw is native to the platform. And it feels native to the platform as a typeface. To access it the system font API's are the same between iOS, watchOS, tvOS, and the macOS. So, NSFont and UIFont basically have the same API's.

And they have a lot of benefits. They give you access to the weight of San Francisco, of the nine weights, but also to the size specific tracking. Basically the letters move closer together or further apart automatically, depending on the point size that you request the system font at. You also get such specific outlines automatically. And you get access for the Bold Text switch, which is something in the settings in iOS. People can turn it on and it makes the text on all their devices bold.

Now, the second tool you have available is dynamic type. And it's a great tool. It's available on iOS and watchOS. And dynamic type is really two things. The first one is the text styles API's, preferredFont forTextStyle. And these give you access to semantic identifiers that give you fonts that are specific for that purpose. So, you can request a font for headline, or body, or these, and you get fonts that look like the system. But, they're tweaked for that one purpose.

But, dynamic type is also the content size categories, which you may be familiar with as the notches in this slider. So, people can go in their settings, they can move the slider up and down, and they can change the global point size of their device. It's a great accessibility feature.

Now, if you use dynamic type and you use the text styles API's, dynamic type support is automatic with these. However, if you're using custom fonts or you call a system font directly, then you have to do some work to implement the dynamic type. But, it's really easy. And let me show you how that works. First you have to pick or bundle a font, then you can have a lookup table somewhere with content size categories, then you have to override this traitCollection DidChange. This is a method of UIView and UI. You control the subclasses.

Then you update your fonts and paragraph styles, and you relayout, and you're done. So, let's see these steps a little bit closer. How do you actually bundle a font in your app? Well, that's easy. You just drag it into Xcode, and then you declare the font names in the info plist list. There is a key for it.

Now, for the concise categories you have to of course have a lookup table that maps them into point sizes, and possibly weights, or tracking values, or even leading, depending on the typeface that you chose. So, I have a lookup table that looks something like this. I have a tool pool, a point size style name, leading, and tracking. And the symbols that you see there are the content size categories. Notice that they are actually more than the notches in the slider. Because there's five accessibility ones that are, people can turn on in their accessibility settings.

So, when you went to lookup table, remember about these as well. Now, once you have that, you just override this traitCollection DidChange method. And inside of there you can do whatever. You can have code that depending on the view you have and whatever it looks like, can adjust the font and then relayout. So, when you're inside of that method you should query the trait collection of the current object. And look up the preferred content size category.

And then you just use that as the key of your lookup table when you're done. Now, step 5 is relayout. But, if you're using auto layout there is actually no step 5. If you're interested in knowing about auto layout, there are sessions tomorrow and on Friday about this specific topic.

All right. So, we just saw how to make dynamic type work with custom fonts. But, imagine you want to get started with this. How do you actually go about it? Now, if you're getting started and you're trying to use custom fonts, I recommend starting with one typeface at a time. It's actually much easier that way.

But, more importantly, once you have a typeface that you're considering, try to understand its design intention, because it really helps you out in usage. Typefaces are tools. They are designed by people for specific purposes. And understanding the purpose greatly helps you as the user of the font, as the typographer actually.

And also consider knobs you can turn, right. Kerning is not something you can actually easily alter from your app context. So if the font is not kerning. Well, you might want to consider something else. But, however, if the font has leading that is too tight you can actually alter that. So, no worries.

All right. So, we just saw system font, we saw dynamic type, and we saw custom fonts. So, next I want to show you some small details that you may want to consider using in your own apps. The first one I want to show is arrows. Arrows are a great thing. They are useful for pointing to stuff. But, also they're usable in complications where the information density is very high and you want to get just a little bit more information.

Now, arrows in a staff, they're actually stored in the font as characters. So, you can copy and paste them in your strings, in Xcode for instance, and they will just show up. But, more importantly because they're in the font, they are weight matched with system font. And if people change their bold text switch, or use dynamic type, the arrows will scale accordingly.

Now, the second deal I want to talk to you about is high-legibility alternates. I talked about alternates in typographic features. And we have the new on in San Francisco, which helps in situations like this. If you're typesetting a string where the context is actually not enough to tell which glyph is which, and maybe people have to pass this around or type it somewhere else. They have to read it and be completely, it has to be ambiguous which glyph is which one.

So, there's a new statistic set that changes the shape of these glyphs to completely ambiguous ones. So, the I gets a serif, the zero gets a slash, the L gets a little tail and the six is less confusable from the eight. Now, these shapes we don't recommend turning them on all the time, because as you can see, they're pretty, they're big changes. And they're highly disruptive of the overall texture and look, and feel actually of text as well. So, use them sparingly if you can.

But, this is the code to turn them on. And this code, by the way, works the same for UIFont and NSFont, is exactly the same. You start with the UIFont or something, you derive a font descriptor out of it. And then you can modify it adding features to it. And then derive another font out of it.

Next, the small caps. Now, I'm sure you're familiar with capital letters and lowercase letters as well. But, there is a third member of this group, which is small caps. Now, small caps are a smaller version of the capital letters that align with the lowercase. And when I say align, I mean almost align. They actually ought to be slightly larger.

Now, when are they useful? Well, when you type setting things like acronym, for instance. Acronyms or when you want to create subtle information hierarchies, like you have the number and then you want, to de-emphasize another piece of information next to it. Let me show you a case study of how we use small caps on Apple TV.

Now, you have this paragraph, and you have a hierarchy of like a list on the left side and a paragraph on the right hand side. And you want the text of the top left to be the header, to stand out a little bit. Now, if you look at his as a wire frame, you can kind of start telling that that string in all caps is sort of trumping everything else in height. It looks a little bit too large.

Now, one thing you could do to tame that is, you could change the point size and bring it down. But, if you did that it would also make the letters lighter, and too close. So, the density will start to be non-matched with everything else. So, what you can do, small caps. Small caps preserve the all caps setting. But, they also preserve the density that you want, and the stroke thickness.

Now, there are two fundamental ways, two API's actually, to get small caps in our systems. And they have to do with the interaction between the typographic features and the underlying text. So, imagine you have a piece of text which is all uppercase and you're turning on the small caps from uppercase feature, you get a piece of text that is all small caps. This looks good.

Now, if you get, if you have a string that is mixed case, upper and lowercase, and you turn on the small caps from uppercase feature, you get this. This does not look good. The problem with this one is that the capital letters are not really emphasizing anything. And they almost look like a mistake. So, please try not to do this if you can.

And lastly, if you have a string that is all lowercase and you turn on the small caps from uppercase feature, you get all lowercase, which is not what you would expect. But at least it doesn't look bad. So, we're fine. Now, the small caps from uppercase feature is, the code is exactly the same as the feature code that I showed you earlier for the high-legibility alternates. And you just have to change the feature amplifier and the selector.

Now, there's another way of turning, of getting small caps and it's from a lowercase piece of text. Now, I'm sorry, if you have an all uppercase strength, and you turn on small caps from lowercase, you get all uppercase, which again is not really what you would expect. But, at least it doesn't look bad.

Now, when you turn on small caps from lower case on a mixed case string, you get this. You get a mixed caps and small caps string, which is legitimate. We actually do use this in maps, for instance. It's certain zoom levels. Small caps are really about subtlety. And this is one way to create a subtle hierarchy for instance. So, again, this is fine. Now, if you have an all lowercase string and you turn on the small caps from lowercase, you get all small caps, which is just fine.

So, again the code to do this is exactly the same. I just changed the piece of code right there. And one thing you can do with features, you can actually turn multiples at once. So, depending where you got that piece of text from, if it's under your control, if it's user editable, you may want to turn both at once as well, for instance.

Now, there's one subtlety about small caps. Which is, well they're about subtlety, but there is something subtle about them as well. Which is that they also operate not just on capital letters, but also on numbers and punctuation. And you may be wondering why. The reason is because you may have a string that looks like this, and you want to turn that all into small caps. So, we support small cap numbers, small cap punctuation, and all of these in system font.

All right. So, we just saw some details of typography like arrows, high-legibility alternates, and small caps. And that's really all we have for today. We just saw the San Francisco fonts and update there with the new SF Mono family for coding. We hope you enjoy it. We saw some terminology. We looked at some typographic concept design wise, and yeah, design concepts. And then we looked at some tools.

And lastly we saw some details. Some small new feature that you may want to adopt in your apps. Now, for more information, at this URL you will find the video of this talk. But, you'll also find a bibliography and some references to sites that can get you started in your new journey as typographers.

And there also related sessions. These have yet to happen, are throughout the week. There is, the first session is actually introducing a tool that will greatly help your dynamic type. But, I don't want to spoil it. The other two sessions have to do with making your apps adaptive. So, auto layout topics. The iterative design gives you some elements of design, and of how to evaluate it as well. And then, What's new in Auto Layout session on Friday. It's really good too. And that's it. Thank you very much.