223.srt

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:00:00.506 --> 00:00:08.516 A:middle
[ Silence ]

00:00:09.016 --> 00:00:14.000 A:middle
[ Applause ]

00:00:14.786 --> 00:00:15.206 A:middle
>> Thank you.

00:00:15.206 --> 00:00:15.826 A:middle
Good morning.

00:00:16.476 --> 00:00:20.626 A:middle
I'm Ned Holbrook and this
is Session 223 Using Fonts

00:00:20.626 --> 00:00:21.186 A:middle
of Text Kit.

00:00:21.886 --> 00:00:23.296 A:middle
So let me give you an
overview of what we're going

00:00:23.296 --> 00:00:24.726 A:middle
to be talking about
during this session.

00:00:25.716 --> 00:00:27.256 A:middle
First we're going
to talk about how

00:00:27.256 --> 00:00:28.636 A:middle
to specify fonts in your app.

00:00:30.706 --> 00:00:32.606 A:middle
We're going to be
talking in particular

00:00:32.606 --> 00:00:35.926 A:middle
about the new Dynamic
Type technology in iOS 7.

00:00:35.996 --> 00:00:39.016 A:middle
We're going to be talking
about font descriptors.

00:00:39.766 --> 00:00:41.796 A:middle
We're going to be talking
about the techniques

00:00:41.906 --> 00:00:44.236 A:middle
for adding fonts to
your application.

00:00:45.266 --> 00:00:48.356 A:middle
And we're also going to be
talking about a couple of topics

00:00:48.476 --> 00:00:50.226 A:middle
that are going to be
particularly relevant

00:00:50.476 --> 00:00:52.836 A:middle
to developers of
multilingual applications.

00:00:53.766 --> 00:00:56.246 A:middle
Language tagging, a
new mechanism available

00:00:56.246 --> 00:01:00.316 A:middle
in both iOS X and iOS 7,
and modifying fallbacks,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:00:56.246 --> 00:01:00.316 A:middle
in both iOS X and iOS 7,
and modifying fallbacks,

00:01:00.606 --> 00:01:03.826 A:middle
also available on
both platforms.

00:01:03.826 --> 00:01:07.376 A:middle
Now, some of the material for
specifying fonts is also going

00:01:07.376 --> 00:01:10.616 A:middle
to be relevant for OS X as well.

00:01:10.616 --> 00:01:12.546 A:middle
So if you manage to
straggle in with --

00:01:13.026 --> 00:01:14.706 A:middle
in hopes of hearing
something about OS X,

00:01:15.006 --> 00:01:18.396 A:middle
you came to the right place.

00:01:18.576 --> 00:01:22.566 A:middle
First, I'd like to
talk about Text Kit.

00:01:22.766 --> 00:01:24.046 A:middle
I hope you've gone to some

00:01:24.046 --> 00:01:26.356 A:middle
of the other sessions
introducing you

00:01:26.356 --> 00:01:29.156 A:middle
to this great new
technology available in iOS 7.

00:01:29.776 --> 00:01:31.686 A:middle
But since this Friday
morning after the beer bash,

00:01:31.736 --> 00:01:33.446 A:middle
let's have a quick review.

00:01:33.946 --> 00:01:40.096 A:middle
Text Kit is the great new text
framework based on Cocoa text

00:01:40.666 --> 00:01:42.006 A:middle
and brand new to iOS 7.

00:01:42.636 --> 00:01:47.616 A:middle
It allows you to get
amazing control and precision

00:01:48.016 --> 00:01:50.086 A:middle
when it comes to
typography in your app.

00:01:51.686 --> 00:01:53.946 A:middle
And what's most interesting
for this session is

00:01:53.996 --> 00:01:57.286 A:middle
that both Text Kit and
WebKit are built in Core Text

00:01:57.926 --> 00:02:01.916 A:middle
which is our low level unit
code layout engine available

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:01:57.926 --> 00:02:01.916 A:middle
which is our low level unit
code layout engine available

00:02:02.186 --> 00:02:04.976 A:middle
on both iOS and OS X.

00:02:05.196 --> 00:02:07.886 A:middle
Now, Core Text is
still available to you

00:02:08.006 --> 00:02:11.576 A:middle
if you've been making
use of it in the past.

00:02:11.576 --> 00:02:14.646 A:middle
And in particular, we think it's
best for very specialized tasks.

00:02:15.846 --> 00:02:18.436 A:middle
In fact, there's one task
that it was built for

00:02:18.436 --> 00:02:20.856 A:middle
and that was enabling
the development

00:02:20.916 --> 00:02:24.506 A:middle
of higher level Text Kit --
text frameworks like Text Kit

00:02:24.506 --> 00:02:27.536 A:middle
and WebKit, maybe you've
even have to build your own.

00:02:28.086 --> 00:02:31.356 A:middle
But really when it comes
down to it, we encourage you

00:02:31.356 --> 00:02:34.176 A:middle
to use the highest level
framework available

00:02:34.846 --> 00:02:35.676 A:middle
that suits your needs.

00:02:36.406 --> 00:02:40.946 A:middle
And particularly with iOS 7,
we hope that will be Text Kit.

00:02:41.166 --> 00:02:43.296 A:middle
Now, no matter which
framework you're making use

00:02:43.296 --> 00:02:46.636 A:middle
of for advanced typography
in your app.

00:02:47.356 --> 00:02:49.646 A:middle
At the heart of it
all, we're dealing

00:02:49.646 --> 00:02:50.826 A:middle
with Unicode text layout.

00:02:51.896 --> 00:02:53.736 A:middle
Now, this is represented

00:02:53.736 --> 00:02:58.266 A:middle
by the equation String
plus Font equals Glyphs.

00:02:58.406 --> 00:03:02.996 A:middle
And when dealing with user
content, there's really only one

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:02:58.406 --> 00:03:02.996 A:middle
And when dealing with user
content, there's really only one

00:03:02.996 --> 00:03:05.006 A:middle
of those variables
that you have control

00:03:05.006 --> 00:03:05.986 A:middle
over and that's the font.

00:03:06.546 --> 00:03:08.866 A:middle
The string is likely going
to be the user's content.

00:03:09.716 --> 00:03:13.766 A:middle
But we're going to talk
about how you can choose

00:03:13.766 --> 00:03:17.286 A:middle
that font correctly in order

00:03:17.286 --> 00:03:20.986 A:middle
to get the best possible
display of text in your app.

00:03:22.596 --> 00:03:25.956 A:middle
So let's find out
how to do that.

00:03:26.106 --> 00:03:27.736 A:middle
Well you've got a number
of choices when it comes

00:03:27.766 --> 00:03:32.146 A:middle
to choosing a font
for use in your app.

00:03:32.456 --> 00:03:34.596 A:middle
The most exciting one
to me and I hope to you

00:03:34.596 --> 00:03:36.986 A:middle
as well is dynamic
type which is available

00:03:37.366 --> 00:03:39.156 A:middle
for the first time in iOS 7.

00:03:40.516 --> 00:03:44.046 A:middle
There's also the system font
that you are probably familiar

00:03:44.046 --> 00:03:48.756 A:middle
with and you may still may
need to make use of in iOS 7.

00:03:49.746 --> 00:03:51.526 A:middle
We're going to be talking
about UIFontDescriptor

00:03:51.526 --> 00:03:56.906 A:middle
which is the class I use to
identify fonts on the system.

00:03:57.896 --> 00:04:00.226 A:middle
And as I mentioned, we're
also going to talk about how

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:03:57.896 --> 00:04:00.226 A:middle
And as I mentioned, we're
also going to talk about how

00:04:00.226 --> 00:04:05.586 A:middle
to bring your own apps to your
application or fonts, excuse me.

00:04:06.396 --> 00:04:08.366 A:middle
First, I'd like to
show you an example

00:04:08.616 --> 00:04:12.806 A:middle
of the new dynamic type
technology in iOS 7.

00:04:12.956 --> 00:04:16.875 A:middle
I hope you've seen some really
wonderful examples of this

00:04:16.986 --> 00:04:20.446 A:middle
in previous sessions, but
since I'm going to be talking

00:04:20.446 --> 00:04:22.506 A:middle
about some of the more
technical aspects,

00:04:22.506 --> 00:04:25.596 A:middle
so I thought I'd give you a
quick refresher of this as well.

00:04:26.386 --> 00:04:32.556 A:middle
Here we see the same Mailbox
presented in mail on iOS 7

00:04:32.856 --> 00:04:35.736 A:middle
in three different
content sizes.

00:04:37.426 --> 00:04:41.036 A:middle
Now, this is just three
out of a total of seven

00:04:41.606 --> 00:04:43.186 A:middle
that a user can choose from.

00:04:44.096 --> 00:04:46.786 A:middle
But I wanted to point out here

00:04:46.786 --> 00:04:48.696 A:middle
that on the left I
have the smallest size,

00:04:49.476 --> 00:04:51.026 A:middle
in the middle I have
the middle size,

00:04:51.206 --> 00:04:52.536 A:middle
and then on the right
we're looking

00:04:52.536 --> 00:04:56.626 A:middle
at the largest user
selectable dynamic type size.

00:04:57.746 --> 00:05:01.486 A:middle
So, as we can see, mail is a
very text heavy application.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:04:57.746 --> 00:05:01.486 A:middle
So, as we can see, mail is a
very text heavy application.

00:05:02.486 --> 00:05:04.816 A:middle
But it still has what
we'd like to display

00:05:04.886 --> 00:05:09.236 A:middle
as sort of hierarchy of type.

00:05:09.296 --> 00:05:14.456 A:middle
So, you'll note that there're
several different weights

00:05:14.866 --> 00:05:18.556 A:middle
of type visible in
this situation.

00:05:19.366 --> 00:05:22.306 A:middle
But you'll note that regardless
of the size of that type,

00:05:22.826 --> 00:05:24.476 A:middle
there's a very clear
relationship

00:05:24.476 --> 00:05:28.576 A:middle
between the different
pieces of text on screen.

00:05:28.756 --> 00:05:31.146 A:middle
And one of the great
things about dynamic type is

00:05:31.206 --> 00:05:34.436 A:middle
that it gives you the
tools you need in order

00:05:34.436 --> 00:05:38.906 A:middle
to present information
using the same types

00:05:38.906 --> 00:05:43.486 A:middle
of semantic distinctions in
the text, and we'll be talking

00:05:43.486 --> 00:05:46.136 A:middle
about exactly how to do that.

00:05:46.356 --> 00:05:51.546 A:middle
Note also that as the type size
changes, it's not all being fit

00:05:51.546 --> 00:05:52.736 A:middle
into the same size box.

00:05:53.436 --> 00:05:55.666 A:middle
Mail has a really great
dynamic type citizen

00:05:55.666 --> 00:05:58.426 A:middle
and it's actually
reacting to the size

00:05:58.606 --> 00:06:00.506 A:middle
of the user's preference

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:05:58.606 --> 00:06:00.506 A:middle
of the user's preference

00:06:01.046 --> 00:06:05.116 A:middle
and resizing the table
view cells to match.

00:06:05.976 --> 00:06:09.896 A:middle
So even though by its very
nature as the type gets larger,

00:06:10.406 --> 00:06:12.066 A:middle
the information density
decreases.

00:06:13.336 --> 00:06:16.346 A:middle
Mail itself is reacting to that

00:06:16.566 --> 00:06:18.196 A:middle
and responding to
the user's choice.

00:06:19.296 --> 00:06:21.646 A:middle
Note also that in
addition to the seven sizes

00:06:21.646 --> 00:06:23.676 A:middle
that are available, three
of which I've shown here,

00:06:24.166 --> 00:06:31.376 A:middle
there's also a switch that
can add a bit of weight

00:06:31.376 --> 00:06:36.386 A:middle
to those type styles,
and that's available via

00:06:36.386 --> 00:06:37.986 A:middle
accessibility settings.

00:06:39.756 --> 00:06:45.796 A:middle
So dynamic type is organized by
what we consider to be usage.

00:06:46.346 --> 00:06:52.526 A:middle
Each one of these is a text
style as we like to call it.

00:06:52.716 --> 00:06:56.876 A:middle
As you've seen in the previous
session, there are, I believe,

00:06:56.876 --> 00:07:00.546 A:middle
eight of these different
usage categories

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:06:56.876 --> 00:07:00.546 A:middle
eight of these different
usage categories

00:07:00.726 --> 00:07:01.966 A:middle
for use with text styles.

00:07:02.516 --> 00:07:06.826 A:middle
These are things like
Body, Headline 1, Caption.

00:07:07.386 --> 00:07:12.746 A:middle
And every one of these different
text styles is optimized

00:07:12.746 --> 00:07:13.466 A:middle
for legibility.

00:07:14.306 --> 00:07:16.916 A:middle
We'll be showing you an example
of one of this in particular.

00:07:18.196 --> 00:07:20.866 A:middle
But, again, remember that
the user is responsible

00:07:20.866 --> 00:07:22.956 A:middle
for picking the size
of these text styles.

00:07:23.906 --> 00:07:27.996 A:middle
So, for any given text
style, you're going to see it

00:07:28.276 --> 00:07:30.546 A:middle
in a number of different sizes.

00:07:30.666 --> 00:07:32.316 A:middle
The metrics are going
to change based

00:07:32.316 --> 00:07:34.226 A:middle
on something that's
out of your control.

00:07:34.346 --> 00:07:35.606 A:middle
That is the user
is going to choose.

00:07:36.556 --> 00:07:38.436 A:middle
And so, of course,
we highly encourage

00:07:38.516 --> 00:07:44.416 A:middle
that you adopt auto layout
constraints for resizing your UI

00:07:44.646 --> 00:07:48.326 A:middle
to adapt to the user's content.

00:07:48.546 --> 00:07:51.196 A:middle
But even if you're
not doing that,

00:07:51.196 --> 00:07:52.446 A:middle
you may have some
other techniques.

00:07:53.076 --> 00:07:56.226 A:middle
You should be aware that these
metrics are going to change.

00:07:57.486 --> 00:08:00.416 A:middle
And as I'm sure you've
already seen Interface Builder

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:07:57.486 --> 00:08:00.416 A:middle
And as I'm sure you've
already seen Interface Builder

00:08:00.416 --> 00:08:03.136 A:middle
with Xcode 5 has a great
support for these text styles,

00:08:03.136 --> 00:08:04.786 A:middle
so you can specify
them right in line

00:08:05.106 --> 00:08:06.546 A:middle
where you're designing
your user interface.

00:08:06.706 --> 00:08:11.056 A:middle
Now, let's take a look at one of
these text styles in particular.

00:08:12.126 --> 00:08:15.796 A:middle
On the slide, I've chosen one
of the subhead text styles

00:08:16.486 --> 00:08:20.066 A:middle
and what I have here is what's
called the waterfall chart

00:08:20.636 --> 00:08:25.416 A:middle
which is simply the same
sample text set in all

00:08:25.416 --> 00:08:27.036 A:middle
of the different user
selectable sizes.

00:08:27.586 --> 00:08:31.616 A:middle
Now, you don't have to
be a typographer to see

00:08:31.616 --> 00:08:34.785 A:middle
that this text is
clearly related,

00:08:34.785 --> 00:08:37.676 A:middle
all these different sizes
probably meaning the same thing.

00:08:38.366 --> 00:08:41.006 A:middle
But again, not just sizes.

00:08:41.436 --> 00:08:43.506 A:middle
We have a type system involved

00:08:43.856 --> 00:08:48.976 A:middle
where this particular text style
subhead is related visually

00:08:48.976 --> 00:08:53.226 A:middle
to the other text styles and
so one of these in conjunction

00:08:53.226 --> 00:08:57.266 A:middle
with other text styles
allows you to present a very,

00:08:57.266 --> 00:09:01.316 A:middle
very rich information hierarchy.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:08:57.266 --> 00:09:01.316 A:middle
very rich information hierarchy.

00:09:02.426 --> 00:09:05.456 A:middle
You'll also note that this
particular text style --

00:09:05.716 --> 00:09:07.606 A:middle
all these different sizes
have a very consistent --

00:09:07.656 --> 00:09:09.306 A:middle
what typographers call color.

00:09:10.656 --> 00:09:14.736 A:middle
But let's zoom in and take a
look at what I mean when I say

00:09:14.736 --> 00:09:16.606 A:middle
that these are optimized
for legibility.

00:09:17.246 --> 00:09:21.386 A:middle
So, we're going take
a look at the smallest

00:09:21.896 --> 00:09:25.666 A:middle
and the largest text
styles sizes zoomed

00:09:25.666 --> 00:09:27.626 A:middle
in to the same point size.

00:09:28.206 --> 00:09:32.476 A:middle
And here I've taken the liberty
of annotating the white space

00:09:32.956 --> 00:09:37.926 A:middle
in this example to show you that
besides having different weights

00:09:38.496 --> 00:09:40.906 A:middle
of type in this particular
example,

00:09:41.886 --> 00:09:43.746 A:middle
we've also adjusted
the letter spacing

00:09:44.226 --> 00:09:48.626 A:middle
because a smaller text needs
more room to breathe in order

00:09:48.626 --> 00:09:52.306 A:middle
for us to ingest it
with our brains and eyes

00:09:52.656 --> 00:09:55.326 A:middle
to really dig into the context.

00:09:55.476 --> 00:09:57.586 A:middle
These sizes adjust
both the letter spacing

00:09:57.936 --> 00:10:01.156 A:middle
and also the line spacing
which is hard to show

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:09:57.936 --> 00:10:01.156 A:middle
and also the line spacing
which is hard to show

00:10:01.156 --> 00:10:01.976 A:middle
on this particular example.

00:10:03.296 --> 00:10:06.846 A:middle
But -- So, if you can
consider that we have this grid

00:10:06.846 --> 00:10:09.866 A:middle
of these different sizes,
these different styles,

00:10:09.906 --> 00:10:12.346 A:middle
there's really a huge amount
of design effort that went

00:10:12.346 --> 00:10:15.586 A:middle
into these typefaces
and the great part is

00:10:15.686 --> 00:10:18.106 A:middle
that they're all
available to you.

00:10:18.666 --> 00:10:24.326 A:middle
So in order to make use of these
text styles, this huge amount

00:10:24.326 --> 00:10:28.026 A:middle
of design for this
beautiful type,

00:10:28.026 --> 00:10:29.416 A:middle
you'll probably been making use

00:10:29.416 --> 00:10:32.036 A:middle
of UIFont
preferredFontForTextStyle

00:10:33.046 --> 00:10:35.236 A:middle
which is a class
factory method on UIFont

00:10:35.476 --> 00:10:38.346 A:middle
that takes a single
argument which is one

00:10:38.346 --> 00:10:40.056 A:middle
of those text style identifiers

00:10:40.296 --> 00:10:42.256 A:middle
that you can find
in UIFontDescriptor.

00:10:44.496 --> 00:10:48.126 A:middle
Besides the base text
style categories,

00:10:48.126 --> 00:10:51.376 A:middle
you can also make
some changes to those

00:10:51.466 --> 00:10:54.036 A:middle
by modifying them
with symbolic traits.

00:10:54.816 --> 00:10:57.226 A:middle
So the ones in particular
that you're likely

00:10:57.226 --> 00:11:00.546 A:middle
to find useful are Bold, Italic,
and we also have special traits

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:10:57.226 --> 00:11:00.546 A:middle
to find useful are Bold, Italic,
and we also have special traits

00:11:00.616 --> 00:11:02.326 A:middle
for adjusting the line spacing.

00:11:02.856 --> 00:11:07.796 A:middle
So depending on the content
being presented, you may be able

00:11:07.906 --> 00:11:12.586 A:middle
to tighten the line spacing
a bit if you're dealing

00:11:12.586 --> 00:11:14.746 A:middle
with say a single label.

00:11:16.066 --> 00:11:19.596 A:middle
Or for longer line lengths,
you may find it necessary

00:11:19.596 --> 00:11:21.926 A:middle
to actually loosen the line
spacing to give a bit more

00:11:21.926 --> 00:11:25.206 A:middle
of that white space that's
needed for best legibility,

00:11:25.886 --> 00:11:27.286 A:middle
and we'll be showing
you an example of how

00:11:27.286 --> 00:11:28.626 A:middle
to do that in code shortly.

00:11:29.946 --> 00:11:33.006 A:middle
Note also that all of this
amazing technology is available

00:11:33.556 --> 00:11:34.766 A:middle
in CSS as well.

00:11:35.426 --> 00:11:38.346 A:middle
One of the earlier sessions,
the Intro to Text Kit Session

00:11:38.896 --> 00:11:41.096 A:middle
and you may have also heard
in the WebKit session,

00:11:41.436 --> 00:11:44.506 A:middle
there are properties
corresponding to each one

00:11:44.506 --> 00:11:48.096 A:middle
of these type styles -- text
styles, they're prefixed

00:11:48.096 --> 00:11:51.516 A:middle
with -apple-system, and
so you can find the list

00:11:51.516 --> 00:11:53.546 A:middle
of those elsewhere, but --

00:11:54.086 --> 00:11:58.416 A:middle
so if any part of your UI is
still built using a WebView,

00:11:58.686 --> 00:11:59.966 A:middle
that's all right.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:12:00.486 --> 00:12:00.886 A:middle
That's great.

00:12:00.886 --> 00:12:03.006 A:middle
You can still access
this great technology.

00:12:03.626 --> 00:12:12.706 A:middle
Now, text styles are part of a
larger category of fonts that I

00:12:13.186 --> 00:12:15.486 A:middle
like to think of as
being sort of a metafont.

00:12:16.496 --> 00:12:19.716 A:middle
So, you'll note that with
text styles in particular,

00:12:20.296 --> 00:12:24.826 A:middle
as you may have seen in that
example, I know that the weight

00:12:24.926 --> 00:12:27.086 A:middle
of the type was actually
changing in response

00:12:27.186 --> 00:12:29.546 A:middle
to the user preference.

00:12:29.786 --> 00:12:34.346 A:middle
And so naturally, you can assume
that for a given text style,

00:12:34.396 --> 00:12:38.386 A:middle
the actual font that's
used to render that text

00:12:38.926 --> 00:12:42.186 A:middle
to screen may not be the
same in all situations.

00:12:42.646 --> 00:12:46.456 A:middle
And so, we've also
seen this on OS X

00:12:47.356 --> 00:12:52.756 A:middle
where Mavericks brings a new
system UIFont that's optimized

00:12:52.756 --> 00:12:55.146 A:middle
for Retina Displays.

00:12:55.716 --> 00:12:59.726 A:middle
And so, as OS X developers,
those of you in the audience

00:12:59.726 --> 00:13:03.186 A:middle
who have done programming
in OS X, you may be familiar

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:12:59.726 --> 00:13:03.186 A:middle
who have done programming
in OS X, you may be familiar

00:13:03.186 --> 00:13:06.846 A:middle
with the various NSFont class
factory methods for getting

00:13:06.886 --> 00:13:10.686 A:middle
at what I would consider
to be this system font,

00:13:10.746 --> 00:13:13.466 A:middle
this semantic notions
of what a font may be.

00:13:14.096 --> 00:13:17.326 A:middle
You may have seen menu font
of size, control font of size,

00:13:17.326 --> 00:13:17.976 A:middle
these types of things.

00:13:18.766 --> 00:13:21.826 A:middle
But, many of you may
have also noticed

00:13:21.896 --> 00:13:24.106 A:middle
that in the past whenever
you used one of these,

00:13:24.106 --> 00:13:28.176 A:middle
you typically got back the same
thing every time, Lucida Grande.

00:13:29.946 --> 00:13:32.446 A:middle
And so you may have said, "well,
you know, I mean this is great,

00:13:32.496 --> 00:13:35.376 A:middle
but I know it's just
going to end

00:13:35.376 --> 00:13:36.536 A:middle
up being the same
thing in the end.

00:13:36.976 --> 00:13:40.086 A:middle
So I may as well just
specify that in my code

00:13:40.086 --> 00:13:42.016 A:middle
or in my zeb [phonetic]
or whatever".

00:13:43.456 --> 00:13:50.826 A:middle
But by doing so, you lose the
ability to adapt to improvements

00:13:50.826 --> 00:13:54.596 A:middle
that are made in the
system font technologies.

00:13:55.936 --> 00:13:58.736 A:middle
You'll note that this is
particularly so when it comes

00:13:58.776 --> 00:14:01.656 A:middle
to text styles because
it's not just

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:13:58.776 --> 00:14:01.656 A:middle
to text styles because
it's not just

00:14:01.696 --> 00:14:04.296 A:middle
that the font may be changing
across releases, they're going

00:14:04.296 --> 00:14:07.056 A:middle
to be changing dynamically
and in the Intro

00:14:07.056 --> 00:14:10.446 A:middle
to Text Kit Session, you saw how
to adapt to that dynamically.

00:14:11.486 --> 00:14:17.416 A:middle
But one thing that's shared
with all of these fonts is

00:14:17.416 --> 00:14:20.856 A:middle
that when you poke around, you
may end up seeing font names

00:14:20.966 --> 00:14:21.966 A:middle
that start with a period.

00:14:23.556 --> 00:14:26.386 A:middle
And, as we all know from
our grand UNIX history,

00:14:26.746 --> 00:14:29.896 A:middle
something that begins with a
period is not meant to be seen.

00:14:30.916 --> 00:14:34.296 A:middle
And so when you're dealing
with these system fonts,

00:14:34.676 --> 00:14:38.756 A:middle
if you find one of these, that's
a sign to you, the developer,

00:14:38.756 --> 00:14:41.656 A:middle
that not only are you not
be presenting those names

00:14:42.126 --> 00:14:45.336 A:middle
to the user directly,
but it's also a note

00:14:45.966 --> 00:14:47.696 A:middle
that there's magic involved.

00:14:48.566 --> 00:14:51.076 A:middle
And so really you should
be dealing with these

00:14:51.136 --> 00:14:55.326 A:middle
by identifying these system
fonts using their semantic

00:14:55.326 --> 00:14:57.946 A:middle
identifiers, this class factory
methods, these text styles.

00:14:58.666 --> 00:15:02.366 A:middle
And never -- would it be
appropriate to drop down

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:14:58.666 --> 00:15:02.366 A:middle
And never -- would it be
appropriate to drop down

00:15:02.836 --> 00:15:08.016 A:middle
and grab a CD font and deal
with that moving onwards.

00:15:08.826 --> 00:15:12.786 A:middle
So, UIFont does have one of
these class factory methods

00:15:13.126 --> 00:15:15.486 A:middle
that you've seen
before, systemFontOfSize,

00:15:15.836 --> 00:15:19.396 A:middle
also Bold and Italic variants.

00:15:19.846 --> 00:15:22.346 A:middle
But this is -- there's
a clear distinction

00:15:22.346 --> 00:15:23.756 A:middle
to be made now in iOS 7.

00:15:24.416 --> 00:15:26.986 A:middle
The system font is not meant
to be used for user content,

00:15:27.576 --> 00:15:30.066 A:middle
that's what text styles are for.

00:15:30.126 --> 00:15:33.146 A:middle
And in addition, only if
you recompiled your app

00:15:33.386 --> 00:15:37.966 A:middle
for iOS 7 will that
system font be adopting any

00:15:37.966 --> 00:15:41.936 A:middle
of the new improvements
made to the typography.

00:15:42.936 --> 00:15:46.216 A:middle
So, keep this in mind when
you're designing your app

00:15:46.216 --> 00:15:48.196 A:middle
and your users will thank you.

00:15:49.576 --> 00:15:56.076 A:middle
So UIFontDescriptor or -- also a
very similar technology on OS X,

00:15:56.076 --> 00:15:58.546 A:middle
NSFont Descriptor, is the class

00:15:58.546 --> 00:16:02.456 A:middle
that we use for describing
fonts.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:15:58.546 --> 00:16:02.456 A:middle
that we use for describing
fonts.

00:16:02.456 --> 00:16:04.766 A:middle
It's a very, very
lightweight mechanism.

00:16:05.186 --> 00:16:09.196 A:middle
It doesn't involve spooling up
any rendering system in order

00:16:09.196 --> 00:16:10.926 A:middle
to have an actual font on hand.

00:16:11.386 --> 00:16:14.436 A:middle
It's simply the mechanism we
use for getting up that font.

00:16:15.366 --> 00:16:16.536 A:middle
It allows you to access

00:16:16.536 --> 00:16:18.586 A:middle
and in some cases
modify font properties.

00:16:18.586 --> 00:16:20.016 A:middle
We'll be showing
you that as well.

00:16:20.756 --> 00:16:24.086 A:middle
UIFontDescriptor is the
base technology for finding

00:16:24.086 --> 00:16:27.126 A:middle
out what fonts are
available to your app

00:16:27.626 --> 00:16:29.146 A:middle
and it's also the mechanism

00:16:29.146 --> 00:16:30.886 A:middle
by which you can
specify your own fonts

00:16:31.046 --> 00:16:34.846 A:middle
if you've licensed them for
use in your user interface.

00:16:35.966 --> 00:16:41.606 A:middle
So the way we use a descriptor
is by noting that it looks a lot

00:16:41.606 --> 00:16:44.986 A:middle
like a dictionary
with key value pairs.

00:16:46.166 --> 00:16:48.866 A:middle
In this case, those key
value pairs are called

00:16:48.866 --> 00:16:50.066 A:middle
font attributes.

00:16:50.876 --> 00:16:53.456 A:middle
They correspond to any number

00:16:53.456 --> 00:16:56.216 A:middle
of particular properties
that fonts have.

00:16:56.496 --> 00:16:58.686 A:middle
It bears the names, the size,

00:16:59.086 --> 00:17:01.116 A:middle
what typographic
features might be enabled.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:16:59.086 --> 00:17:01.116 A:middle
what typographic
features might be enabled.

00:17:01.886 --> 00:17:06.056 A:middle
And you'll note that using
a descriptor, it's very easy

00:17:06.056 --> 00:17:09.685 A:middle
to create one for a
font that doesn't exist.

00:17:10.906 --> 00:17:13.955 A:middle
For instance, I could use
a descriptor to specify

00:17:13.955 --> 00:17:19.596 A:middle
that I want a font that's
in the Helvetica family

00:17:20.796 --> 00:17:26.836 A:middle
and that its style is purp --
well, until type designers sort

00:17:27.046 --> 00:17:30.576 A:middle
of embrace their
synesthetic side when it comes

00:17:30.576 --> 00:17:32.466 A:middle
to designing fonts,
I doubt we're going

00:17:32.466 --> 00:17:36.616 A:middle
to see purple being a
commonly use style for a font.

00:17:37.196 --> 00:17:40.716 A:middle
But, we're going to need
a mechanism for finding

00:17:40.716 --> 00:17:42.546 A:middle
out whether or not these
descriptors correspond

00:17:42.546 --> 00:17:45.866 A:middle
to actual fonts in the system,
and then the mechanism we use

00:17:45.866 --> 00:17:47.446 A:middle
for that is called matching.

00:17:48.026 --> 00:17:53.136 A:middle
So there's two types of
descriptor matching when we want

00:17:53.196 --> 00:17:55.926 A:middle
to take an abstract
descriptor and turn

00:17:55.926 --> 00:17:57.096 A:middle
into something more concrete,

00:17:57.096 --> 00:17:59.226 A:middle
that is something that's
based on the real font.

00:17:59.746 --> 00:18:04.446 A:middle
And the first is
explicit matching.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:17:59.746 --> 00:18:04.446 A:middle
And the first is
explicit matching.

00:18:05.356 --> 00:18:07.456 A:middle
You can invoke
matchingFontDescriptors

00:18:07.456 --> 00:18:09.236 A:middle
WithMandatoryKeys
on a descriptor.

00:18:10.096 --> 00:18:13.366 A:middle
And you'll get back an
array of potentially many --

00:18:13.366 --> 00:18:18.106 A:middle
potentially no font descriptors
that correspond to fonts

00:18:18.106 --> 00:18:20.046 A:middle
that are actually
available to your application

00:18:20.046 --> 00:18:20.866 A:middle
at the time of that call.

00:18:21.686 --> 00:18:26.746 A:middle
There're also various methods
that perform this matching

00:18:26.796 --> 00:18:29.406 A:middle
on your behalf and so this I

00:18:29.406 --> 00:18:32.036 A:middle
like to consider
implicit matching.

00:18:32.976 --> 00:18:35.976 A:middle
So, for instance,
fontDescriptorWithSymbolicTraits

00:18:36.456 --> 00:18:39.736 A:middle
which we'll have a code
example of in just a moment,

00:18:39.736 --> 00:18:41.616 A:middle
when you invoke this method,

00:18:42.116 --> 00:18:44.086 A:middle
it will be using
matchingFontDescriptors

00:18:44.086 --> 00:18:46.726 A:middle
WithMandatoryKeys under the hood

00:18:47.366 --> 00:18:51.176 A:middle
and so the results you get
back will correspond to fonts

00:18:51.176 --> 00:18:53.806 A:middle
that are actually available,
and so in that sense,

00:18:54.016 --> 00:18:56.816 A:middle
it's being done implicitly
on your behalf.

00:18:57.426 --> 00:18:58.966 A:middle
In addition, you
can create a font

00:18:58.966 --> 00:19:02.476 A:middle
from a descriptor directly
because, of course, when we want

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:18:58.966 --> 00:19:02.476 A:middle
from a descriptor directly
because, of course, when we want

00:19:02.476 --> 00:19:04.836 A:middle
to materialize that
descriptor into a font,

00:19:05.256 --> 00:19:07.836 A:middle
we need to have something
to use in that case.

00:19:08.416 --> 00:19:12.816 A:middle
And so this method will also
perform matching on your behalf

00:19:13.336 --> 00:19:16.566 A:middle
but it also means that if
you didn't explicitly make

00:19:16.596 --> 00:19:20.976 A:middle
that match before hand, it might
not be exactly what you expected

00:19:21.556 --> 00:19:24.926 A:middle
due to having specified a
font that doesn't exist.

00:19:25.916 --> 00:19:28.326 A:middle
So let's go ahead
and make a match.

00:19:28.656 --> 00:19:32.036 A:middle
On this code example, I'm
creating a UIFrontDescriptor

00:19:32.426 --> 00:19:34.416 A:middle
from a dictionary
of font attributes.

00:19:34.886 --> 00:19:39.246 A:middle
In this case, I'm specifying the
family attribute with the value

00:19:39.246 --> 00:19:42.776 A:middle
of Helvetica Neue, and I want
to see what's available to me.

00:19:44.156 --> 00:19:46.516 A:middle
So, as I mentioned, I invoked
matchingFontDescriptors

00:19:46.516 --> 00:19:47.466 A:middle
WithMandatoryKeys.

00:19:48.406 --> 00:19:50.006 A:middle
In this case, I'm
going to pass nill.

00:19:50.006 --> 00:19:52.426 A:middle
This is the most common
situation, passing nill means

00:19:52.426 --> 00:19:55.476 A:middle
to use all of the keys,
all of the font attributes

00:19:55.476 --> 00:19:56.176 A:middle
in the dictionary

00:19:56.596 --> 00:19:58.886 A:middle
when considering what
constitutes a match.

00:19:59.196 --> 00:20:03.556 A:middle
But if you would like to only
consider certain attributes

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:19:59.196 --> 00:20:03.556 A:middle
But if you would like to only
consider certain attributes

00:20:03.786 --> 00:20:06.646 A:middle
in the font descriptor, you
can use the mandatory keys

00:20:06.696 --> 00:20:07.586 A:middle
to narrow that down.

00:20:07.806 --> 00:20:09.846 A:middle
But, as I mentioned,
in most cases,

00:20:09.846 --> 00:20:11.346 A:middle
we'll just be passing
nill to use all.

00:20:12.076 --> 00:20:14.386 A:middle
If I run this on iOS 7,
I'll get back an array

00:20:14.826 --> 00:20:19.246 A:middle
with the number descriptors, 14,
I believe, for various members

00:20:19.296 --> 00:20:20.986 A:middle
of the Helvetica Neue family.

00:20:21.906 --> 00:20:24.126 A:middle
I mentioned also that
we can use descriptors

00:20:24.626 --> 00:20:28.836 A:middle
to modify text styles
and other fonts as well.

00:20:29.596 --> 00:20:34.646 A:middle
So in this case, I'd like to
get at a Bold body text style

00:20:35.896 --> 00:20:37.616 A:middle
and there's no category,

00:20:37.736 --> 00:20:41.376 A:middle
no constant for specifying
a Bold body text style,

00:20:42.196 --> 00:20:45.786 A:middle
but I can apply the
Bold symbolic trait

00:20:46.416 --> 00:20:48.756 A:middle
to the standard body text style

00:20:48.756 --> 00:20:51.926 A:middle
if I need some emphasis
in my body text.

00:20:52.716 --> 00:20:55.626 A:middle
In this particular example,
since I'm not starting

00:20:55.626 --> 00:20:59.816 A:middle
from a UIFont, I don't need to
spend everything up just to get

00:20:59.816 --> 00:21:02.706 A:middle
at a font -- just to get another
font, so I'm going to start

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:20:59.816 --> 00:21:02.706 A:middle
at a font -- just to get another
font, so I'm going to start

00:21:02.706 --> 00:21:05.946 A:middle
by getting a UIFontDescriptor
using preferredFontDescriptor

00:21:05.946 --> 00:21:06.716 A:middle
WithTextStyle.

00:21:07.696 --> 00:21:09.686 A:middle
I'm passing in the
relevant constant,

00:21:09.816 --> 00:21:11.556 A:middle
in this case, text style body.

00:21:12.126 --> 00:21:14.656 A:middle
And then we're going
to modify it

00:21:14.656 --> 00:21:16.296 A:middle
with the symbolic
trait for Bold.

00:21:16.296 --> 00:21:18.436 A:middle
In this case, I know
that there's going

00:21:18.436 --> 00:21:21.226 A:middle
to be Bold variant available
but, again, if there's --

00:21:21.476 --> 00:21:23.816 A:middle
if I were using a different font

00:21:23.816 --> 00:21:26.246 A:middle
and they weren't a Bold
style available to me,

00:21:26.246 --> 00:21:29.976 A:middle
then I would be left with
the original descriptor,

00:21:29.976 --> 00:21:33.076 A:middle
but that's OK because
then I'll go ahead

00:21:33.076 --> 00:21:36.416 A:middle
and create the relevant font, in
this case, from that descriptor.

00:21:37.176 --> 00:21:40.036 A:middle
You'll note also that
the size parameter

00:21:40.546 --> 00:21:42.826 A:middle
that I'm passing in is zero.

00:21:44.086 --> 00:21:47.846 A:middle
And that indicates that
when using the descriptor,

00:21:47.906 --> 00:21:52.166 A:middle
I'd like to not override the
size that it itself specified.

00:21:53.046 --> 00:21:56.126 A:middle
So, in this case, zero
simply means don't change.

00:21:56.426 --> 00:22:01.436 A:middle
And now I have my Bold text
style for use in bodies.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:21:56.426 --> 00:22:01.436 A:middle
And now I have my Bold text
style for use in bodies.

00:22:03.016 --> 00:22:05.436 A:middle
Descriptors are also
the preferred mechanism

00:22:05.536 --> 00:22:07.446 A:middle
for serializing font data.

00:22:08.026 --> 00:22:10.656 A:middle
So, of course, from a font
descriptor, we can coerce

00:22:10.656 --> 00:22:12.856 A:middle
to a font and for
any given font,

00:22:13.036 --> 00:22:15.066 A:middle
we can get a font
descriptor that describes it.

00:22:15.676 --> 00:22:19.346 A:middle
So this is relevant when
we have a font that we'd

00:22:19.346 --> 00:22:21.116 A:middle
like to serialize, we'll
use this descriptor.

00:22:21.626 --> 00:22:25.966 A:middle
This is very easy since
font descriptors can form

00:22:25.966 --> 00:22:28.806 A:middle
to the UI -- to the
NSCoding protocol,

00:22:29.876 --> 00:22:34.736 A:middle
but you may have a
mechanism for archiving

00:22:35.096 --> 00:22:37.636 A:middle
and unarchiving objects
that doesn't use NSCoding.

00:22:38.146 --> 00:22:40.726 A:middle
In this case, you should
be accessing the dictionary

00:22:40.726 --> 00:22:42.616 A:middle
of font attributes
on a descriptor.

00:22:43.376 --> 00:22:47.646 A:middle
But note that because of all
of the various possibilities

00:22:47.646 --> 00:22:48.546 A:middle
when describing fonts,

00:22:48.546 --> 00:22:52.516 A:middle
you should be using those
attributes as an atomic entity.

00:22:52.516 --> 00:22:55.726 A:middle
You shouldn't be trying to pick
various attributes out of it

00:22:55.726 --> 00:23:00.206 A:middle
and assume that that's going to
be able to reconstitute a font

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:22:55.726 --> 00:23:00.206 A:middle
and assume that that's going to
be able to reconstitute a font

00:23:00.636 --> 00:23:02.916 A:middle
on the other end, so
just use all of these

00:23:02.916 --> 00:23:05.906 A:middle
and serialize them as necessary.

00:23:05.906 --> 00:23:08.456 A:middle
Descriptors can also be used
to modify font instances.

00:23:09.396 --> 00:23:13.076 A:middle
Now, when I say modify, it don't
mean that you're able to go in

00:23:13.076 --> 00:23:14.476 A:middle
and change the font
data on disk.

00:23:15.166 --> 00:23:18.566 A:middle
But what you can do is
change the behavior of a font

00:23:18.566 --> 00:23:22.126 A:middle
when you make use
of it in your app.

00:23:22.126 --> 00:23:25.316 A:middle
Two examples in particular
that we're going to see are how

00:23:25.316 --> 00:23:27.956 A:middle
to activate typographic
features and how

00:23:27.956 --> 00:23:29.976 A:middle
to remove unwanted characters

00:23:30.016 --> 00:23:31.786 A:middle
to limit the character
coverage of a font.

00:23:32.636 --> 00:23:34.436 A:middle
So, as I mentioned
earlier, of course,

00:23:34.616 --> 00:23:37.936 A:middle
String plus Font equals
Glyphs, Unicode text layout.

00:23:39.226 --> 00:23:41.066 A:middle
Well one of the neat
things about fonts is

00:23:41.126 --> 00:23:46.206 A:middle
that they can often implement
special features that modify

00:23:46.206 --> 00:23:47.206 A:middle
that process in somehow

00:23:47.776 --> 00:23:53.576 A:middle
and these features are
called typographic features,

00:23:53.956 --> 00:23:59.516 A:middle
and in this particular example,
I have a font where normally

00:23:59.776 --> 00:24:03.586 A:middle
when I layout text using this
font, I get one appearance

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:23:59.776 --> 00:24:03.586 A:middle
when I layout text using this
font, I get one appearance

00:24:03.876 --> 00:24:05.206 A:middle
as you can see on the top here.

00:24:06.566 --> 00:24:07.906 A:middle
It says 11:15.

00:24:08.726 --> 00:24:12.416 A:middle
And you'll note that even
though this particular font, 12,

00:24:12.476 --> 00:24:15.066 A:middle
you can't really see it, but
this font is a proportional font

00:24:15.066 --> 00:24:17.186 A:middle
that is it's not monospaced,

00:24:17.386 --> 00:24:19.406 A:middle
different characters
have different widths.

00:24:19.816 --> 00:24:22.236 A:middle
You'll note that the
digits in this font,

00:24:22.336 --> 00:24:25.786 A:middle
they're all monospaced, the
ones the same width as the five.

00:24:25.786 --> 00:24:29.906 A:middle
And this is a very common design
that you'll see from fonts

00:24:30.406 --> 00:24:34.156 A:middle
because it makes it easy to
line up figures in columns,

00:24:34.606 --> 00:24:38.646 A:middle
but I'm no accountant and
I know that in this case,

00:24:38.646 --> 00:24:40.996 A:middle
this particular string
means that I'm trying

00:24:40.996 --> 00:24:43.906 A:middle
to display a font --
a time to the user,

00:24:44.386 --> 00:24:48.896 A:middle
let's say for time stamp
in a table that I have data

00:24:48.896 --> 00:24:51.426 A:middle
that I'd like to present.

00:24:51.426 --> 00:24:53.606 A:middle
And so I've been
told by my designer

00:24:53.606 --> 00:24:58.446 A:middle
that this particular font
has typographic features

00:24:58.556 --> 00:25:02.126 A:middle
that allow me to apply
a time appearance to it.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:24:58.556 --> 00:25:02.126 A:middle
that allow me to apply
a time appearance to it.

00:25:02.126 --> 00:25:05.646 A:middle
And one of those is one that I
can use in other cases as well

00:25:06.186 --> 00:25:09.066 A:middle
and that's to make these
digits proportional.

00:25:09.846 --> 00:25:11.126 A:middle
And so in this particular
example,

00:25:11.126 --> 00:25:15.826 A:middle
you can see very clearly how the
ones now have a narrower width

00:25:17.016 --> 00:25:22.426 A:middle
and since I'm dealing with
time, this font, I've been told,

00:25:22.426 --> 00:25:24.356 A:middle
has another great
feature that I can use

00:25:24.356 --> 00:25:27.416 A:middle
and that's an alternate
set of glyphs.

00:25:27.946 --> 00:25:32.156 A:middle
In this case, the alternate
set includes a different colon

00:25:32.686 --> 00:25:35.836 A:middle
that clearly looks
like a time separator.

00:25:35.836 --> 00:25:40.706 A:middle
Rather than being rectangular,
you can see that it's circular

00:25:40.706 --> 00:25:44.096 A:middle
and it's brought up
off the baseline a bit.

00:25:44.316 --> 00:25:46.216 A:middle
So -- And this is
what I'd like to use,

00:25:46.896 --> 00:25:48.406 A:middle
how can I do this in code?

00:25:48.796 --> 00:25:54.436 A:middle
Well, first I'd like to build
up an array of feature settings.

00:25:55.146 --> 00:25:58.606 A:middle
So feature settings are
these -- are the identifiers,

00:25:58.606 --> 00:26:01.836 A:middle
the handles onto these
typographic features

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:25:58.606 --> 00:26:01.836 A:middle
the handles onto these
typographic features

00:26:01.996 --> 00:26:03.476 A:middle
that can be implemented
by a font

00:26:04.096 --> 00:26:06.406 A:middle
and you can programatically
query the fonts to find

00:26:06.406 --> 00:26:09.396 A:middle
out what's available,
but in this case,

00:26:09.396 --> 00:26:12.106 A:middle
I've been told specifically
which ones I need to use.

00:26:13.026 --> 00:26:15.816 A:middle
I'm using the Objective-C
literal syntax for doing that,

00:26:15.896 --> 00:26:20.176 A:middle
and so if we unpack this,
you can see it's an array

00:26:20.176 --> 00:26:23.366 A:middle
of two dictionaries and each

00:26:23.366 --> 00:26:26.616 A:middle
of those dictionaries is
specifying both the type

00:26:26.856 --> 00:26:30.816 A:middle
and a selector as the key
and the values are relevant

00:26:30.816 --> 00:26:33.316 A:middle
to those particular
features that I'm trying

00:26:33.316 --> 00:26:36.086 A:middle
to enable on this font.

00:26:36.276 --> 00:26:37.516 A:middle
So, the first one you can see,

00:26:37.516 --> 00:26:40.596 A:middle
it's very clearly
described number spacing type

00:26:41.096 --> 00:26:43.176 A:middle
which is kind of a
grouping of features

00:26:43.176 --> 00:26:46.236 A:middle
and then the proportional
numbers is what I'm going

00:26:46.236 --> 00:26:46.776 A:middle
to be enabling.

00:26:48.166 --> 00:26:50.266 A:middle
And this other one, this
character alternatives,

00:26:51.066 --> 00:26:54.736 A:middle
you'll note this pesky little
magic value, magic constant 1.

00:26:55.476 --> 00:27:01.366 A:middle
Well, so there are a number of
predefined typographic features,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:26:55.476 --> 00:27:01.366 A:middle
Well, so there are a number of
predefined typographic features,

00:27:01.846 --> 00:27:04.936 A:middle
names that we've given
because we have seen them

00:27:04.936 --> 00:27:06.926 A:middle
in so many fonts, but remember

00:27:06.926 --> 00:27:10.286 A:middle
that typographic features are
kind of like an API to a font.

00:27:10.766 --> 00:27:15.286 A:middle
And so a font is free to define
its own typographic features

00:27:16.056 --> 00:27:17.826 A:middle
and that's exactly what
this font has done.

00:27:19.256 --> 00:27:21.366 A:middle
It's defined a particular
selector

00:27:21.366 --> 00:27:23.916 A:middle
in that character
alternatives type of 1.

00:27:24.606 --> 00:27:27.206 A:middle
And so if that font came with
a header, somehow we could,

00:27:27.206 --> 00:27:28.246 A:middle
you know, give it
a magic cons --

00:27:28.246 --> 00:27:30.466 A:middle
maybe we'll give it
a name in your code

00:27:30.516 --> 00:27:33.206 A:middle
so we know what's going
on, but in this case,

00:27:33.206 --> 00:27:36.526 A:middle
our designer has told
us this is how to enable

00:27:36.526 --> 00:27:39.186 A:middle
that particular change
that you'd like to make

00:27:39.186 --> 00:27:41.076 A:middle
in the appearance of the glyphs.

00:27:41.986 --> 00:27:43.736 A:middle
So once we have that
array of feature settings,

00:27:43.736 --> 00:27:45.836 A:middle
what we're going to do
is we're going to assume

00:27:45.836 --> 00:27:48.706 A:middle
that we've started with the
font already, that original font

00:27:48.986 --> 00:27:51.226 A:middle
in the original appearance
that you saw in the example.

00:27:52.606 --> 00:27:53.906 A:middle
We're going to get
its descriptor.

00:27:54.916 --> 00:27:56.636 A:middle
Now, we're going to
create a new descriptor

00:27:57.236 --> 00:27:59.026 A:middle
by modifying the
original descriptor

00:27:59.596 --> 00:28:02.166 A:middle
by adding attributes to it.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:27:59.596 --> 00:28:02.166 A:middle
by adding attributes to it.

00:28:02.596 --> 00:28:04.366 A:middle
In this case, there's
just one attribute,

00:28:04.366 --> 00:28:07.296 A:middle
it's the feature settings
attribute and the value

00:28:07.296 --> 00:28:10.276 A:middle
for that is going to be the
array of feature settings

00:28:10.386 --> 00:28:11.216 A:middle
that we defined above.

00:28:12.296 --> 00:28:16.066 A:middle
And then finally, we're going to
say, UIFont, fontWithDescriptor.

00:28:16.446 --> 00:28:19.076 A:middle
We're going to pass that
descriptor that we just created

00:28:19.076 --> 00:28:20.056 A:middle
with those feature settings.

00:28:20.746 --> 00:28:22.566 A:middle
Again, we're going to
pass zero for the size,

00:28:22.566 --> 00:28:23.506 A:middle
meaning don't change it.

00:28:24.266 --> 00:28:27.086 A:middle
And so now, the only difference
between the original font

00:28:27.166 --> 00:28:30.446 A:middle
and time font that we've
made here is it's going

00:28:30.446 --> 00:28:33.836 A:middle
to be the same font but it has
these new features enabled.

00:28:34.046 --> 00:28:35.756 A:middle
And so the font gets
to participate

00:28:35.756 --> 00:28:40.706 A:middle
in that glyph selection process
and during layout it will say,

00:28:40.706 --> 00:28:42.546 A:middle
"oh, I know exactly
what you want

00:28:42.546 --> 00:28:44.206 A:middle
for those ones and that colon.

00:28:44.206 --> 00:28:46.306 A:middle
I know you want this
other glyphs instead."

00:28:46.426 --> 00:28:50.436 A:middle
And these feature settings can
be quite amazingly powerful.

00:28:50.836 --> 00:28:53.646 A:middle
Not only can they change
which glyphs are selected

00:28:53.646 --> 00:28:56.476 A:middle
for certain characters, but they
can also change the interaction

00:28:56.816 --> 00:28:58.046 A:middle
between various glyphs,

00:28:58.166 --> 00:29:00.306 A:middle
ligatures are a great
example of this.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:28:58.166 --> 00:29:00.306 A:middle
ligatures are a great
example of this.

00:29:01.756 --> 00:29:04.136 A:middle
So another example,
as I mentioned,

00:29:04.136 --> 00:29:05.996 A:middle
is limiting the character
coverage of the font.

00:29:07.316 --> 00:29:08.846 A:middle
So, I've got this
really great app.

00:29:09.526 --> 00:29:12.536 A:middle
It's kind of technical and so
I think Menlo is a great choice

00:29:12.536 --> 00:29:16.566 A:middle
of a font for my --
presenting my user's content.

00:29:16.566 --> 00:29:19.986 A:middle
And as I'm sure it happens
to you a lot -- I --

00:29:20.726 --> 00:29:23.816 A:middle
so many at my documents include
the Unicode snowman character,

00:29:23.996 --> 00:29:24.396 A:middle
of course.

00:29:24.996 --> 00:29:27.676 A:middle
You know, again, I think
I've picked the right font

00:29:28.276 --> 00:29:30.576 A:middle
for this particular
very specialized app,

00:29:30.706 --> 00:29:33.526 A:middle
but I don't know about you, but
I think it's kind of a bit early

00:29:33.526 --> 00:29:39.256 A:middle
in the morning for Menlo
snowman, he's just too happy.

00:29:40.636 --> 00:29:43.186 A:middle
So really what I'd like to
do is I want to use Menlo,

00:29:43.186 --> 00:29:45.966 A:middle
but I don't want to
ever see Menlo snowman.

00:29:46.116 --> 00:29:49.286 A:middle
And so I want to create
a font instance that acts

00:29:49.476 --> 00:29:52.006 A:middle
as if it doesn't
even exist and I'd

00:29:52.006 --> 00:29:55.476 A:middle
like to just let the system
pick a different font,

00:29:55.686 --> 00:29:57.736 A:middle
follow back to different font
whenever it sees a snowman.

00:29:58.406 --> 00:30:01.966 A:middle
Anything will be
better right now.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:29:58.406 --> 00:30:01.966 A:middle
Anything will be
better right now.

00:30:02.456 --> 00:30:04.706 A:middle
So I mentioned earlier
in passing

00:30:04.706 --> 00:30:07.276 A:middle
that UIFontDescriptor can be
used to access font properties.

00:30:08.596 --> 00:30:09.846 A:middle
And so in this example,

00:30:09.846 --> 00:30:13.476 A:middle
I am going to be ultimately
creating a new descriptor

00:30:13.476 --> 00:30:17.086 A:middle
by modifying an existing one,
but the value of the attribute

00:30:17.086 --> 00:30:18.226 A:middle
that I'm going to be modifying.

00:30:18.306 --> 00:30:21.006 A:middle
First, I want to get from
my original descriptor.

00:30:21.006 --> 00:30:22.366 A:middle
Let me show you how that works.

00:30:23.396 --> 00:30:25.166 A:middle
So, again, we're going to
assume that we have our font,

00:30:25.166 --> 00:30:27.596 A:middle
in this case, in
the example I gave,

00:30:27.596 --> 00:30:31.126 A:middle
it's going to be
a font for Menlo.

00:30:31.716 --> 00:30:34.546 A:middle
We're going to get
this descriptor again,

00:30:34.856 --> 00:30:37.586 A:middle
the original descriptor.

00:30:37.636 --> 00:30:41.906 A:middle
Now, in order to compute what
its character set is going

00:30:41.906 --> 00:30:44.516 A:middle
to be, first we're going to
get its original character set

00:30:44.926 --> 00:30:47.266 A:middle
by invoking object for key

00:30:47.266 --> 00:30:50.806 A:middle
on the original descriptor
getting the character set.

00:30:51.916 --> 00:30:56.666 A:middle
We're going to mutate that by
removing that one character,

00:30:56.666 --> 00:30:57.836 A:middle
just that one snowman character.

00:30:58.376 --> 00:31:01.246 A:middle
And so now we have a character
set which is exactly identical

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:30:58.376 --> 00:31:01.246 A:middle
And so now we have a character
set which is exactly identical

00:31:01.246 --> 00:31:07.146 A:middle
to the original font's character
set minus that one character.

00:31:07.696 --> 00:31:11.636 A:middle
And then just as before, we're
going to make a new descriptor

00:31:12.966 --> 00:31:17.026 A:middle
by adding an attribute and the
nice thing about this method is

00:31:17.026 --> 00:31:23.856 A:middle
that it's defined as using the
new values to override anything

00:31:23.856 --> 00:31:26.516 A:middle
that is already in the font.

00:31:26.566 --> 00:31:28.046 A:middle
So there is no conflict here.

00:31:28.366 --> 00:31:31.386 A:middle
It's going to know that this new
character set attribute is going

00:31:31.386 --> 00:31:34.326 A:middle
to be the one that I want
and when I create a font

00:31:34.326 --> 00:31:37.286 A:middle
with that descriptor -- now
whenever I use that font

00:31:37.286 --> 00:31:41.526 A:middle
in my app, it will use Menlo
for all the text except

00:31:41.526 --> 00:31:43.216 A:middle
that snowman character and in

00:31:43.316 --> 00:31:48.966 A:middle
that case the font subsystem is
going to pick up fallback fonts

00:31:49.056 --> 00:31:51.366 A:middle
to use that to run to
that character instead.

00:31:52.496 --> 00:31:56.096 A:middle
So there're also some
great opportunities for you

00:31:56.096 --> 00:31:59.926 A:middle
to bring your own fonts to
your designs, your app design,

00:31:59.926 --> 00:32:02.886 A:middle
and this goes not
only for iOS but also

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:31:59.926 --> 00:32:02.886 A:middle
and this goes not
only for iOS but also

00:32:03.096 --> 00:32:04.526 A:middle
for OS X Mavericks as well.

00:32:05.176 --> 00:32:09.006 A:middle
So, if you're design
includes something custom,

00:32:09.476 --> 00:32:10.736 A:middle
this is how we'll make it work.

00:32:11.136 --> 00:32:14.166 A:middle
So bringing your own font
to the table is pretty easy.

00:32:14.166 --> 00:32:15.386 A:middle
We've got lots of options.

00:32:15.636 --> 00:32:18.806 A:middle
So when you're talking to
your designers or the foundry

00:32:18.806 --> 00:32:20.266 A:middle
from what you're going
to license your font,

00:32:20.746 --> 00:32:22.306 A:middle
they may ask you some
of these questions.

00:32:22.306 --> 00:32:24.356 A:middle
And so, these are the answers
you're going to need to know.

00:32:25.796 --> 00:32:29.026 A:middle
We support both -- two type,
an OpenType font containers,

00:32:29.366 --> 00:32:34.126 A:middle
both individual fonts and
as collections and in terms

00:32:34.126 --> 00:32:40.356 A:middle
of the layout information in
those fonts, we support both AAT

00:32:40.756 --> 00:32:43.216 A:middle
and OpenType layout information.

00:32:44.436 --> 00:32:48.496 A:middle
So, really, you shouldn't
have any problem being able

00:32:48.526 --> 00:32:51.766 A:middle
to get the font in a
format that we can support.

00:32:52.736 --> 00:32:57.556 A:middle
And then in order to make use
of that, it's very simple,

00:32:57.556 --> 00:32:58.996 A:middle
you simply place
in your app bundle

00:32:58.996 --> 00:33:03.216 A:middle
because that's how your
resources are bundled.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:32:58.996 --> 00:33:03.216 A:middle
because that's how your
resources are bundled.

00:33:04.856 --> 00:33:07.326 A:middle
And then the system can
automatically make those

00:33:07.326 --> 00:33:09.736 A:middle
available to your app on iOS

00:33:09.926 --> 00:33:13.546 A:middle
by using the UIAppFonts
Info.plist key

00:33:13.546 --> 00:33:15.866 A:middle
to specify the location on
those fonts and your bundle.

00:33:16.496 --> 00:33:20.006 A:middle
There's also a corresponding
Info.plist key with us,

00:33:20.226 --> 00:33:25.446 A:middle
different name on OS X, but
you may find, and I should say

00:33:25.446 --> 00:33:28.066 A:middle
that once you've
done this, it's --

00:33:28.206 --> 00:33:29.716 A:middle
it acts like any other font

00:33:29.796 --> 00:33:31.046 A:middle
that was previously
installed in the system.

00:33:31.076 --> 00:33:34.456 A:middle
So you can say, "UIFont
fontWithName and the name

00:33:34.546 --> 00:33:40.146 A:middle
of that font that you've
added and there will be.

00:33:40.426 --> 00:33:43.796 A:middle
But we found in some cases
that for various reasons,

00:33:44.006 --> 00:33:47.366 A:middle
this isn't what you want to use.

00:33:47.696 --> 00:33:51.016 A:middle
And some cases, we found that
foundries asked the developers

00:33:51.016 --> 00:33:54.676 A:middle
like you, you know, not have
their fonts just sitting

00:33:54.676 --> 00:33:56.696 A:middle
on unencumbered in
the app bundle

00:33:57.306 --> 00:33:58.476 A:middle
to prevent casual snooping.

00:33:59.796 --> 00:34:02.236 A:middle
And so in these cases,
you might want

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:33:59.796 --> 00:34:02.236 A:middle
And so in these cases,
you might want

00:34:02.236 --> 00:34:05.736 A:middle
to have [inaudible] the font
data in some way and in fact,

00:34:05.736 --> 00:34:08.346 A:middle
we have code example
available online

00:34:08.436 --> 00:34:10.116 A:middle
for how you might
accomplish this on your app.

00:34:11.485 --> 00:34:13.476 A:middle
But once you've done
that, of course,

00:34:13.616 --> 00:34:16.366 A:middle
the system can no
longer automatically make

00:34:16.366 --> 00:34:18.755 A:middle
that font available to
you, and so you may need

00:34:18.755 --> 00:34:19.946 A:middle
to add that font manually.

00:34:20.386 --> 00:34:22.335 A:middle
There're two different types --

00:34:22.485 --> 00:34:26.116 A:middle
there're two different ways
in which you can do that.

00:34:26.315 --> 00:34:29.216 A:middle
The first is by adding the font

00:34:29.286 --> 00:34:32.116 A:middle
as what we call a
registered font.

00:34:32.116 --> 00:34:35.485 A:middle
Using one of these
CT font manager APIs,

00:34:35.485 --> 00:34:40.525 A:middle
you can specify the location
of font data to be referenced

00:34:40.576 --> 00:34:42.696 A:middle
by name after it's been added.

00:34:43.696 --> 00:34:47.166 A:middle
These registered fonts, again,
behave just as if they had been

00:34:47.166 --> 00:34:49.496 A:middle
in your app bundle and
activated automatically,

00:34:50.116 --> 00:34:51.826 A:middle
so you just referenced
them by name.

00:34:52.226 --> 00:34:54.366 A:middle
There's another way in which
you can add fonts however

00:34:54.826 --> 00:34:56.146 A:middle
in which they're unregistered.

00:34:56.866 --> 00:35:00.416 A:middle
In this case, the font's
names can never be matched.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:34:56.866 --> 00:35:00.416 A:middle
In this case, the font's
names can never be matched.

00:35:01.646 --> 00:35:04.756 A:middle
And you might say, "well,
how was that even useful?"

00:35:05.096 --> 00:35:09.336 A:middle
Well, it's really great actually
because what you get back

00:35:09.926 --> 00:35:14.486 A:middle
from these CT font manager
APIs are new font descriptors.

00:35:15.266 --> 00:35:17.836 A:middle
Now, of course, these
are CT font descriptors,

00:35:17.836 --> 00:35:20.186 A:middle
cortex font descriptors, but
they are toll-free bridged

00:35:20.186 --> 00:35:22.826 A:middle
with UIFontDescriptor on iOS.

00:35:23.506 --> 00:35:25.396 A:middle
So, just a little bit of
casting is all you're going

00:35:25.396 --> 00:35:26.186 A:middle
to need to make this work.

00:35:26.736 --> 00:35:28.646 A:middle
Once you have one of these
descriptors, of course,

00:35:28.646 --> 00:35:31.666 A:middle
we've seen several times now
how you can create a font

00:35:31.666 --> 00:35:34.106 A:middle
from a descriptor, and that's
exactly what you can do

00:35:34.106 --> 00:35:34.476 A:middle
with these.

00:35:35.436 --> 00:35:39.626 A:middle
So even though you can't say
font with name, your fonts name

00:35:39.746 --> 00:35:41.046 A:middle
and get back the fonts.

00:35:41.276 --> 00:35:43.046 A:middle
In this case, you can
create a font directly

00:35:43.046 --> 00:35:43.876 A:middle
from a font descriptor.

00:35:45.206 --> 00:35:46.826 A:middle
This could also be
helpful for instance

00:35:47.276 --> 00:35:51.846 A:middle
if you license a
particular version of a font

00:35:51.846 --> 00:35:54.026 A:middle
that already exists
on the system.

00:35:54.086 --> 00:35:57.016 A:middle
And so, if you for some
reason has special layout

00:35:57.016 --> 00:36:01.406 A:middle
considerations and need to
use your own copy of one

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:35:57.016 --> 00:36:01.406 A:middle
considerations and need to
use your own copy of one

00:36:01.406 --> 00:36:03.756 A:middle
of our fonts, this is a great
way to make that happen.

00:36:04.586 --> 00:36:07.446 A:middle
Now, for making it this far in
the conference, in the session,

00:36:07.766 --> 00:36:12.426 A:middle
we'd like to show you
another little surprise here.

00:36:12.616 --> 00:36:15.336 A:middle
So in iOS 7 -- well,
iOS in general,

00:36:15.336 --> 00:36:18.716 A:middle
we've long had the problem
where on OS X, we have a bunch

00:36:18.716 --> 00:36:22.496 A:middle
of really amazing
beautiful fonts.

00:36:22.576 --> 00:36:26.466 A:middle
But until we can get that shrink
ray working, it's really hard

00:36:26.466 --> 00:36:30.356 A:middle
to squeeze a terabyte of storage
into a little phone that goes

00:36:30.356 --> 00:36:34.226 A:middle
in your pocket and so many of
these fonts we've had to leave

00:36:34.226 --> 00:36:37.986 A:middle
out of iOS because there's
just not enough room.

00:36:38.526 --> 00:36:42.256 A:middle
But there are cases when you
might know that you just need

00:36:42.256 --> 00:36:43.586 A:middle
to use a particular font.

00:36:44.406 --> 00:36:49.546 A:middle
And so, what we've done for iOS
7 is we've made a huge number

00:36:49.626 --> 00:36:51.426 A:middle
of fonts available to you.

00:36:52.126 --> 00:36:53.896 A:middle
We've licensed and hosted these

00:36:54.016 --> 00:36:55.556 A:middle
so that you can make
use of them.

00:36:55.556 --> 00:36:57.506 A:middle
These include literally
hundreds of fonts,

00:36:57.956 --> 00:37:01.466 A:middle
all of the fonts installed in
OS X as well as additional fonts

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:36:57.956 --> 00:37:01.466 A:middle
all of the fonts installed in
OS X as well as additional fonts

00:37:01.666 --> 00:37:04.886 A:middle
for particular support
of international scripts.

00:37:05.736 --> 00:37:07.426 A:middle
And the way -- thank
you [applause].

00:37:10.866 --> 00:37:12.606 A:middle
So the way you take
advantage of this is

00:37:12.606 --> 00:37:17.546 A:middle
by using a very long
API CTFontDescriptor

00:37:17.546 --> 00:37:19.696 A:middle
CreateMatchingFont
DescriptorsWithProgressHandler.

00:37:20.866 --> 00:37:25.306 A:middle
And really, what this is,
is it's a very special type

00:37:25.346 --> 00:37:26.576 A:middle
of descriptor matching.

00:37:26.866 --> 00:37:28.066 A:middle
So we've talked about
this already

00:37:28.626 --> 00:37:31.856 A:middle
and before we saw how
simple it was to match

00:37:31.856 --> 00:37:33.046 A:middle
on a descriptor and
get the results.

00:37:33.946 --> 00:37:35.636 A:middle
Well, with downloadable
fonts of course,

00:37:36.916 --> 00:37:39.636 A:middle
were at the mercy
of the network.

00:37:40.746 --> 00:37:45.226 A:middle
And so essentially what this is
API let's you do is it lets you

00:37:45.266 --> 00:37:48.396 A:middle
perform that descriptor
matching asynchronously.

00:37:49.116 --> 00:37:51.436 A:middle
And so the progress handler
is a block that you pass

00:37:51.436 --> 00:37:54.716 A:middle
in that gets called to handle
the various states during

00:37:54.716 --> 00:37:55.246 A:middle
the download.

00:37:55.926 --> 00:37:59.106 A:middle
And so what this means is that
in order to make effective use

00:37:59.106 --> 00:38:00.226 A:middle
of these downloadable fonts,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:37:59.106 --> 00:38:00.226 A:middle
of these downloadable fonts,

00:38:00.676 --> 00:38:04.316 A:middle
your app will probably have the
design some UI to allow the user

00:38:04.316 --> 00:38:06.306 A:middle
to recover from various
failure states.

00:38:07.076 --> 00:38:10.396 A:middle
But with that in
mind, it's very simple

00:38:10.396 --> 00:38:14.166 A:middle
to query fonts are available
via this download mechanism

00:38:14.536 --> 00:38:17.676 A:middle
by matching on the
downloadable attribute.

00:38:18.936 --> 00:38:20.436 A:middle
And we'll also be
publishing a list

00:38:20.436 --> 00:38:22.556 A:middle
of those fonts online as well.

00:38:23.326 --> 00:38:26.526 A:middle
So, to make use of
one these fonts, I --

00:38:26.686 --> 00:38:27.976 A:middle
your app can simply download it

00:38:27.976 --> 00:38:30.176 A:middle
and then the user's
content is available

00:38:30.336 --> 00:38:31.296 A:middle
in that particular app.

00:38:32.666 --> 00:38:34.506 A:middle
Note also that with iOS 7,

00:38:34.606 --> 00:38:38.196 A:middle
fonts can be installed
by managed profiles.

00:38:38.506 --> 00:38:40.016 A:middle
This could be great if you're

00:38:40.016 --> 00:38:42.546 A:middle
in an enterprise
distribution scenario

00:38:42.546 --> 00:38:45.176 A:middle
and you have multiple
apps that you want

00:38:45.176 --> 00:38:46.646 A:middle
to conform to a house style.

00:38:48.096 --> 00:38:51.046 A:middle
And so, those fonts can be
included in the profiles

00:38:51.166 --> 00:38:53.056 A:middle
and activated in that way.

00:38:54.196 --> 00:38:57.626 A:middle
Note however that this is
the first time in which fonts

00:38:57.626 --> 00:39:00.976 A:middle
on iOS can change while
your app is running.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:38:57.626 --> 00:39:00.976 A:middle
on iOS can change while
your app is running.

00:39:01.436 --> 00:39:03.556 A:middle
And so, if you'd like to react

00:39:03.556 --> 00:39:05.666 A:middle
to fonts becoming
available via a profile,

00:39:06.316 --> 00:39:07.356 A:middle
you'll want to subscribe

00:39:07.386 --> 00:39:10.136 A:middle
to the registered fonts
changed notification

00:39:10.696 --> 00:39:12.786 A:middle
so that you can react
when that happens.

00:39:13.746 --> 00:39:16.866 A:middle
So, as I've been talking,
we've been focusing

00:39:16.866 --> 00:39:17.816 A:middle
on Unicode text layout.

00:39:18.226 --> 00:39:20.836 A:middle
And Unicode is really
an amazing specification

00:39:20.836 --> 00:39:24.136 A:middle
because it allows us to
communicate using nearly any

00:39:24.136 --> 00:39:27.596 A:middle
of the world's languages on a
computer which is no small task.

00:39:28.106 --> 00:39:33.456 A:middle
But one of the sort of
problems with Unicode is for --

00:39:33.596 --> 00:39:36.796 A:middle
in certain situations, the
characters themselves --

00:39:37.306 --> 00:39:38.756 A:middle
we know that they can take

00:39:38.756 --> 00:39:40.686 A:middle
on different appearances
via the font

00:39:41.136 --> 00:39:45.546 A:middle
but there're also situations in
which the appropriate appearance

00:39:45.546 --> 00:39:47.906 A:middle
of that character is
dictated by the language.

00:39:48.306 --> 00:39:52.366 A:middle
That is its information that the
user has that isn't reflected

00:39:52.366 --> 00:39:54.866 A:middle
in the text, can't be.

00:39:54.866 --> 00:40:00.066 A:middle
And so, the system by default
does the very best job it can

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:39:54.866 --> 00:40:00.066 A:middle
And so, the system by default
does the very best job it can

00:40:00.066 --> 00:40:01.976 A:middle
in resolving these scenarios.

00:40:02.596 --> 00:40:04.186 A:middle
Typically, it does
solve by looking

00:40:04.186 --> 00:40:06.346 A:middle
at the user's preferred
language.

00:40:06.806 --> 00:40:10.716 A:middle
So, if the user is using
her phone in Japanese,

00:40:10.976 --> 00:40:12.346 A:middle
in the text appearing
in Japanese,

00:40:12.826 --> 00:40:16.166 A:middle
the system will select
appropriate Japanese behaviors

00:40:16.166 --> 00:40:16.456 A:middle
for text.

00:40:17.236 --> 00:40:21.246 A:middle
But there are cases in which you
or your content may know more

00:40:21.246 --> 00:40:25.296 A:middle
about what the appropriate
language is and the mechanism

00:40:25.296 --> 00:40:27.886 A:middle
for doing that is
by language tagging.

00:40:28.286 --> 00:40:31.086 A:middle
So, there's -- on
Mavericks and iOS 7,

00:40:31.086 --> 00:40:33.586 A:middle
there's a new string
attribute that allows you

00:40:33.586 --> 00:40:37.156 A:middle
to specify the language
as an ISO language tag.

00:40:37.156 --> 00:40:40.386 A:middle
And the presence of this
attribute indicates that,

00:40:40.666 --> 00:40:43.916 A:middle
that particular language
should be used

00:40:43.916 --> 00:40:48.646 A:middle
to override the default system
behavior in various ways.

00:40:49.306 --> 00:40:51.376 A:middle
You're going to be looking
at glyph substitution,

00:40:51.376 --> 00:40:52.816 A:middle
line breaking, and
font fallbacks.

00:40:54.156 --> 00:40:58.186 A:middle
So the first example is
one that's kind of --

00:40:58.186 --> 00:41:00.036 A:middle
may not be a particularly useful

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:40:58.186 --> 00:41:00.036 A:middle
may not be a particularly useful

00:41:00.036 --> 00:41:01.886 A:middle
because this relies
on a particular font.

00:41:02.586 --> 00:41:05.136 A:middle
But this is another example
of how fonts can participate

00:41:05.136 --> 00:41:06.906 A:middle
in the layout process.

00:41:07.156 --> 00:41:11.816 A:middle
In this case, I'm going to be
displaying a particular string

00:41:11.816 --> 00:41:15.566 A:middle
with two very specific Unicode
characters and I'm going

00:41:15.566 --> 00:41:17.986 A:middle
to be showing you the appearance
of that string when laid

00:41:17.986 --> 00:41:21.086 A:middle
out using one of two
different languages

00:41:21.196 --> 00:41:22.376 A:middle
that I've tagged
the string with.

00:41:23.296 --> 00:41:25.616 A:middle
In the case where I specified
English as the language,

00:41:25.746 --> 00:41:28.886 A:middle
we'll get, for these characters,
their default appearance

00:41:28.886 --> 00:41:32.676 A:middle
which you can see kind of looks
like a little hook or tail

00:41:32.676 --> 00:41:36.426 A:middle
on the bottom of each of
these, the S and the T.

00:41:36.676 --> 00:41:38.686 A:middle
But what's interesting
about these characters is

00:41:38.686 --> 00:41:44.146 A:middle
that when use for Romanian
text, they actually take

00:41:44.146 --> 00:41:45.036 A:middle
on a different appearance.

00:41:45.586 --> 00:41:48.656 A:middle
In this font, Verdana, actually
implements that appearance.

00:41:49.286 --> 00:41:52.006 A:middle
And so if I specified that
language as being Romanian,

00:41:52.486 --> 00:41:55.346 A:middle
you'll see that rather than
having a little hook or tail

00:41:55.346 --> 00:41:58.266 A:middle
on each of those glyphs,
we have what looks more

00:41:58.266 --> 00:41:59.556 A:middle
like a comma or a stroke.

00:41:59.556 --> 00:42:06.036 A:middle
And this is great as a
feature because it allows fonts

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:41:59.556 --> 00:42:06.036 A:middle
And this is great as a
feature because it allows fonts

00:42:06.446 --> 00:42:10.876 A:middle
to be more responsive
to the user's languages.

00:42:11.746 --> 00:42:15.766 A:middle
Another way in which language
tagging can affect the behavior

00:42:15.866 --> 00:42:18.076 A:middle
of text is in line breaking.

00:42:18.536 --> 00:42:21.616 A:middle
So here we have an example
where I have a Japanese string.

00:42:22.256 --> 00:42:27.596 A:middle
You'll note that I've asked to
lay this out in the space up to

00:42:27.596 --> 00:42:30.136 A:middle
that dotted red line
on the right there.

00:42:30.136 --> 00:42:34.276 A:middle
And you'll note that when
I'm doing so in the context

00:42:34.276 --> 00:42:37.766 A:middle
of an English user, the line
break position is actually

00:42:37.766 --> 00:42:39.156 A:middle
different than for Japanese.

00:42:39.886 --> 00:42:42.346 A:middle
That's because in the
absence of any information

00:42:42.346 --> 00:42:45.556 A:middle
about Japanese --
the Japanese text,

00:42:45.766 --> 00:42:49.546 A:middle
the system uses the default
Unicode character properties

00:42:49.606 --> 00:42:52.336 A:middle
which isn't really
appropriate for Japanese text.

00:42:52.876 --> 00:42:56.136 A:middle
Now, again, as I mentioned
earlier, if the user is running

00:42:56.516 --> 00:42:58.106 A:middle
with Japanese as their
primary language,

00:42:58.106 --> 00:43:00.526 A:middle
they'll get the correct
behavior by defaults

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:42:58.106 --> 00:43:00.526 A:middle
they'll get the correct
behavior by defaults

00:43:00.996 --> 00:43:03.726 A:middle
but you may be writing
an app in which you know

00:43:03.726 --> 00:43:06.676 A:middle
that text should always have --

00:43:06.676 --> 00:43:08.586 A:middle
should always be
treated as Japanese text.

00:43:08.886 --> 00:43:10.866 A:middle
Maybe you're writing
a dictionary app

00:43:11.276 --> 00:43:15.436 A:middle
or maybe the content is
being specified using HTML

00:43:15.436 --> 00:43:16.976 A:middle
and tagged as Japanese.

00:43:17.436 --> 00:43:20.276 A:middle
And so in these cases, the
system can adapt accordingly.

00:43:20.276 --> 00:43:25.626 A:middle
And one of the most common
examples when dealing

00:43:25.686 --> 00:43:30.306 A:middle
with this quirk of Unicode
is for languages like Chinese

00:43:30.306 --> 00:43:31.926 A:middle
and Japanese where many

00:43:31.926 --> 00:43:34.826 A:middle
of the characters actually
overlap in Unicode.

00:43:34.976 --> 00:43:38.566 A:middle
They can have the same character
but different appearances.

00:43:39.416 --> 00:43:43.006 A:middle
In this particular example, we
have a very obvious difference

00:43:43.146 --> 00:43:48.906 A:middle
of appearance when we're dealing
with either Japanese or Chinese

00:43:49.126 --> 00:43:50.826 A:middle
as the language for this
particular character.

00:43:51.456 --> 00:43:55.076 A:middle
So in this case, what the
system actually does is --

00:43:55.076 --> 00:43:58.386 A:middle
note that I haven't specified
a font on my attributed string

00:43:58.386 --> 00:44:01.796 A:middle
and so this is going to
immediately trigger fallback

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:43:58.386 --> 00:44:01.796 A:middle
and so this is going to
immediately trigger fallback

00:44:01.796 --> 00:44:03.336 A:middle
which is the process
of finding a font

00:44:03.826 --> 00:44:06.066 A:middle
that can actually
render that character.

00:44:06.616 --> 00:44:09.356 A:middle
And by specifying the
language attribute,

00:44:09.596 --> 00:44:11.646 A:middle
I've told the system
exactly what it needs to know

00:44:11.676 --> 00:44:12.826 A:middle
to make the right choice,

00:44:12.826 --> 00:44:15.996 A:middle
not just a good choice
but the right choice.

00:44:16.636 --> 00:44:20.166 A:middle
And in this case, it's going
to select one font for Japanese

00:44:21.206 --> 00:44:23.586 A:middle
and a different font
completely for Chinese.

00:44:24.366 --> 00:44:27.146 A:middle
So beside the appearance
of just this one character

00:44:27.146 --> 00:44:30.926 A:middle
in a real world situation,
the user would notice

00:44:31.226 --> 00:44:34.126 A:middle
that there're other
stylistic differences

00:44:34.126 --> 00:44:37.486 A:middle
or even other glyph differences
between those two fonts

00:44:37.486 --> 00:44:38.836 A:middle
and so this can be
done automatically.

00:44:39.296 --> 00:44:42.786 A:middle
So on that note, I'd like to
talk about one other technique

00:44:42.856 --> 00:44:46.576 A:middle
for changing the behavior
of fallbacks and that's

00:44:46.626 --> 00:44:48.766 A:middle
by making use of a
custom cascade list.

00:44:49.386 --> 00:44:52.386 A:middle
We've seen how an
app can tag a string

00:44:52.456 --> 00:44:55.666 A:middle
with the appropriate language to
get language specific behavior

00:44:56.236 --> 00:45:00.516 A:middle
but there are other cases beyond
just that when we might want

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:44:56.236 --> 00:45:00.516 A:middle
but there are other cases beyond
just that when we might want

00:45:00.516 --> 00:45:02.546 A:middle
to make a change to
the fallback behavior.

00:45:03.076 --> 00:45:07.316 A:middle
The cascade list attribute is
a font descriptor attribute

00:45:07.356 --> 00:45:11.036 A:middle
that you can add that allows
you to specify an array

00:45:11.036 --> 00:45:16.006 A:middle
of font descriptors that will
be used before the default list

00:45:17.426 --> 00:45:18.326 A:middle
when performing fallbacks.

00:45:18.676 --> 00:45:19.466 A:middle
So, what does that mean?

00:45:19.906 --> 00:45:21.266 A:middle
Well -- so remember, I mentioned

00:45:21.266 --> 00:45:24.116 A:middle
that the system has
a default behavior

00:45:24.116 --> 00:45:26.916 A:middle
that works as best it can.

00:45:27.676 --> 00:45:30.836 A:middle
But in this case, you have
the flexibility and the power

00:45:30.866 --> 00:45:34.246 A:middle
to insert something that's going
to be checked before that list.

00:45:34.376 --> 00:45:37.306 A:middle
So let's take a look an
example to try to clarify this.

00:45:38.026 --> 00:45:40.846 A:middle
So let's say I'm marking
on an Arabic dictionary app

00:45:41.686 --> 00:45:46.816 A:middle
and I have a -- I've specified
a really great font in my design

00:45:46.946 --> 00:45:52.176 A:middle
for the English headwords but
the behavior I'm seeing is

00:45:52.236 --> 00:45:56.666 A:middle
that when the text system
encounters the Arabic characters

00:45:57.206 --> 00:46:00.786 A:middle
in that string, they're
falling back --

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:45:57.206 --> 00:46:00.786 A:middle
in that string, they're
falling back --

00:46:00.786 --> 00:46:02.066 A:middle
the fallback font
that's selected

00:46:02.066 --> 00:46:04.366 A:middle
to render those characters
is Geeza Pro.

00:46:05.606 --> 00:46:07.606 A:middle
Now, some people will call
Geeza Pro time tested.

00:46:08.216 --> 00:46:09.606 A:middle
Others would call it
long in the tooth.

00:46:10.346 --> 00:46:14.706 A:middle
But more importantly, I think
what's important to note here is

00:46:14.746 --> 00:46:17.736 A:middle
that Arabic is a writing system

00:46:17.736 --> 00:46:20.626 A:middle
with a very rich
calligraphic history

00:46:20.966 --> 00:46:23.626 A:middle
and so there are a
number of different styles

00:46:23.626 --> 00:46:26.466 A:middle
in which I could expect
this text to appear

00:46:26.966 --> 00:46:29.576 A:middle
and Geeza Pro is just
obviously one style.

00:46:31.076 --> 00:46:33.166 A:middle
So what I've done is I've
licensed a really beautiful

00:46:33.336 --> 00:46:35.516 A:middle
Arabic font for use in
my dictionary and I'd

00:46:35.516 --> 00:46:38.576 A:middle
like the system to
manage the transition

00:46:38.576 --> 00:46:39.906 A:middle
between those fonts
automatically.

00:46:40.816 --> 00:46:42.526 A:middle
And so what I'd like instead is

00:46:42.526 --> 00:46:45.496 A:middle
when I specified my original
font from my headwords,

00:46:46.066 --> 00:46:48.626 A:middle
I'd like to let the system
take care of the fallback

00:46:49.026 --> 00:46:53.206 A:middle
by overriding the default
behavior, not going to Geeza Pro

00:46:53.476 --> 00:46:54.846 A:middle
and selecting my font instead.

00:46:55.696 --> 00:46:58.146 A:middle
So in order to do
that, I'm going to want

00:46:58.146 --> 00:46:59.646 A:middle
to specify my own cascade list.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:47:00.616 --> 00:47:01.626 A:middle
So I've got a font descriptor.

00:47:01.626 --> 00:47:03.776 A:middle
We'll, assuming that I've
constructed font descriptor

00:47:04.016 --> 00:47:08.366 A:middle
for my licensed Arabic
font and then I'm going

00:47:08.366 --> 00:47:12.276 A:middle
to build a cascade list which is
pretty simple using Objective-C

00:47:12.276 --> 00:47:14.126 A:middle
literal syntax, I'm just
going to have an array

00:47:14.126 --> 00:47:16.196 A:middle
with this single
object and that's going

00:47:16.196 --> 00:47:17.136 A:middle
to be that descriptor.

00:47:18.136 --> 00:47:21.366 A:middle
I'll assume that I have my
font for my English text.

00:47:22.566 --> 00:47:23.846 A:middle
Again, like we've seen before,

00:47:23.846 --> 00:47:26.766 A:middle
I'm going to get the original
descriptor and I'm going

00:47:26.766 --> 00:47:27.726 A:middle
to create a new descriptor

00:47:27.726 --> 00:47:31.566 A:middle
by adding my cascade list
attribute to that descriptor.

00:47:32.186 --> 00:47:35.026 A:middle
Now, whenever I make use
of the font that I can make

00:47:35.256 --> 00:47:37.406 A:middle
from that descriptor,
what will happen is --

00:47:37.676 --> 00:47:42.076 A:middle
I know that this font doesn't
support Arabic characters.

00:47:42.116 --> 00:47:44.466 A:middle
And so whenever the string
contains those characters,

00:47:44.466 --> 00:47:46.336 A:middle
the system is going to need
to consult the fallback

00:47:46.566 --> 00:47:48.546 A:middle
to find an appropriate
font to render that.

00:47:49.256 --> 00:47:50.686 A:middle
And so, this cascade list --

00:47:51.316 --> 00:47:55.436 A:middle
since I know this covers Arabic
characters, it'll be used rather

00:47:55.436 --> 00:47:57.566 A:middle
than the default fallback
which is Geeza Pro.

00:47:58.796 --> 00:48:04.166 A:middle
So, you may note also that this
particular example could be

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:47:58.796 --> 00:48:04.166 A:middle
So, you may note also that this
particular example could be

00:48:04.166 --> 00:48:07.396 A:middle
quite powerful when combined
with a previous example

00:48:07.396 --> 00:48:08.636 A:middle
of modifying the character set.

00:48:09.236 --> 00:48:12.756 A:middle
And so they're depending
on the needs of your app.

00:48:12.756 --> 00:48:16.236 A:middle
You may even be able to
combine the various techniques

00:48:16.266 --> 00:48:18.616 A:middle
that I've shown you for
a very precise control

00:48:18.696 --> 00:48:19.756 A:middle
of the fallback behavior.

00:48:21.016 --> 00:48:25.036 A:middle
For more information, there
are various resources available

00:48:25.036 --> 00:48:25.356 A:middle
to you.

00:48:25.356 --> 00:48:28.606 A:middle
There are a couple of
sessions that are available

00:48:28.606 --> 00:48:32.156 A:middle
on instant replay to you and I
encourage you to review those

00:48:32.186 --> 00:48:36.216 A:middle
because there're some really
fascinating concepts in there

00:48:36.626 --> 00:48:39.916 A:middle
as well as several of
the design sessions

00:48:39.956 --> 00:48:43.286 A:middle
on designing your user
interface for iOS 7

00:48:43.726 --> 00:48:46.016 A:middle
because that will give you I
think some really great ideas

00:48:46.076 --> 00:48:47.526 A:middle
for adapting text
style in your apps.

00:48:47.986 --> 00:48:49.656 A:middle
And I, as a user,
I'm really excited

00:48:49.656 --> 00:48:52.336 A:middle
to see what you guys
can come up with.

00:48:52.526 --> 00:48:55.176 A:middle
In summary, I just like
to drive home a couple

00:48:55.176 --> 00:48:56.166 A:middle
of points one more time.

00:48:56.456 --> 00:49:00.756 A:middle
The first is to -- in
order to adapt dynamic type

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:48:56.456 --> 00:49:00.756 A:middle
The first is to -- in
order to adapt dynamic type

00:49:01.006 --> 00:49:04.676 A:middle
in your iOS 7 app, you'll
do so using text styles.

00:49:04.676 --> 00:49:08.456 A:middle
Remember that this is -- this
requires a bit of flexibility

00:49:08.456 --> 00:49:11.446 A:middle
on your part in order
to adapt appropriately

00:49:11.446 --> 00:49:14.286 A:middle
to the user's desired
content size.

00:49:14.786 --> 00:49:18.836 A:middle
So please investigate using
auto layout but keep in mind

00:49:18.836 --> 00:49:20.596 A:middle
that those font metrics
are going

00:49:20.596 --> 00:49:22.146 A:middle
to change based on
user preference.

00:49:22.656 --> 00:49:25.906 A:middle
For developers in
multilingual situations,

00:49:26.406 --> 00:49:30.616 A:middle
language tagging is a great
feature that allows you

00:49:30.616 --> 00:49:33.746 A:middle
to specify language
sensitive behavior.

00:49:34.506 --> 00:49:37.336 A:middle
And what's really great
about it is that --

00:49:37.886 --> 00:49:41.466 A:middle
in those examples I showed you,
that attribute will flow right

00:49:41.466 --> 00:49:43.726 A:middle
up to your Text Kit and
you'll get perfect behavior.

00:49:43.986 --> 00:49:46.556 A:middle
For various specific
needs involving fallbacks,

00:49:46.556 --> 00:49:49.646 A:middle
you can influence the
systems fallback behavior

00:49:49.646 --> 00:49:51.246 A:middle
by adding a cascade descriptor.

00:49:51.646 --> 00:49:54.976 A:middle
Remember also that
profiles can install fonts

00:49:55.026 --> 00:49:57.666 A:middle
and so this is a new tool
available to you as well

00:49:58.056 --> 00:50:00.136 A:middle
and those fonts are
available systemwide.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:49:58.056 --> 00:50:00.136 A:middle
and those fonts are
available systemwide.

00:50:01.496 --> 00:50:05.006 A:middle
So with that, I'd like to say
thank you very much for coming

00:50:05.006 --> 00:50:08.036 A:middle
to hear about fonts and Text
Kit and a little bit of OS X.

00:50:08.036 --> 00:50:09.286 A:middle
Thank you very much.

00:50:09.286 --> 00:50:09.976 A:middle
Enjoy the rest of
the conference.

00:50:10.516 --> 00:50:12.780 A:middle
[ Applause ]