Transcript
[ Music ]
[ Applause ]
>> 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.
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
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
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
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
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.
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,
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.
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.
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.
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.
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
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,
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 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.
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.
[ Applause ]