Transcript
[ Background Sounds ]
>> I have a hunch that most of
you probably found yourself in
this situation before.
A long list of names, a lot of
scrolling, many doubts, until
you have to embrace the fact
that you don't know what you're
doing, so you just wing it.
But is there a better way to
pick fonts?
Yes, there is.
You're probably familiar with a
San Francisco font, the system
font.
It's minimal, functional, and it
provides great visual continuity
between the system and your app.
But sometimes, you need
something different.
Perhaps you want your app to
exude sophistication?
Or feel literary?
Be awkward?
Or just loud and upfront?
How do you figure out which type
facing style is the right one
for your app?
Well, you need to answer at
least two questions.
What is my intended use?
And this will touch on the
functional aspects, "What
impression do I want to make?"
This requires to look into how
style affects the visual mood of
an app.
Once these questions have
answers, you can stop thinking
about the pairing of fonts.
But first, I'd like to introduce
two terms in the context of
typography: Structure and
contrast.
To better understand typography,
it is usually helpful to look
into calligraphy.
Calligraphy is the art of
writing, and to write, you need
a tool.
For instance, here are three
commonly used tools around the
world.
On the left, we have the brush,
which is essential to most East
Asian calligraphy and
typography.
In the middle, we have the
Rodney pen or Kalamos.
It has defined Roman letter
forms, the Arabic Naskh style,
or many index scripts.
And on the right, we have the
pointed pen, the tool that gives
precise control of a stroke
modulation, a feature that
really shines with some Cyrillic
glyphs, for instance.
But whatever the effect a
calligraphic tool has, it can
always be described in terms of
structure and contrast.
And here's structure.
You can think of it as the path
a tool follows to achieve a
particular shape.
Those of us who like to be
fancy, also use the Latin word
ductus to refer to structure.
Now, to demonstrate contrast,
let me use a personal favorite
among the tools I just showed,
the pointed pen.
If I drag it across the screen,
I get a very simple line.
Now, if I do the same but this
time, pressing as I drag it, I
introduce weight.
And this modulation of the
stroke is what we call
"contrast."
So, let's now apply this to
letter forms.
Here are two structures for
lowercase N, or two ducti for
fancy people.
The one on the left, can be
traced with a single stroke.
This kind of structure is called
cursive, and is inherently
dynamic.
The one on the right, requires
several constructed pen strokes,
and therefore feels more static.
These monolinear designs have no
contrast right now.
So, let me add some.
As we add weight to the vertical
strokes, the difference between
thick and thin increases, until
we reach high contrast.
If I now add weight to the thin
strokes, we move toward low
contrast.
Now the main difference with our
starting point is mostly weight.
So, you may be thinking now,
"Well, this is all fine and
dandy, but why do I need to care
about this?"
So, let's have a look at those
two sentences.
At this particular size, the
bottom line is much easier to
read than the top line.
And we can easily understand why
if we look closer at each
design.
On top, we have Big Caslon.
And below, Adobe Caslon prompt.
Both designs are revivals of the
work of British type founder
William Caslon, but one is
designed for this play, and the
other one for text.
Now what does this mean,
exactly?
The thin strokes in Big Caslon,
produce high contrast, which is
an appealing graphical feature.
It looks sharp.
But if you scale it down, the
thin strokes will eventually
disappear and will make reading
quite unpleasant, if not
impossible.
On the other hand, Adobe Caslon
Pro has lower contrast and can
be used as smaller point sizes,
because of its sturdier design.
And now the key difference
between those two designs is
spacing.
For optical reasons, reading
stays comfortable if the space
between letters increases as the
point size decreases.
Adobe Caslon Pro has looser
spacing and this contributes to
a nicer reading experience at
smaller size.
Display and text are really just
loose terms describing usage.
This play type is meant to draw
attention.
So, you typically use it at
bigger point sizes, which in
turn allows you to use styles
with more high -- with higher
contrast and more elaborate
details.
Text type is about making the
reading experience comfortable.
When picking a text font, you'll
want to make sure the contrast
of the type face is such that it
will scale down nicely.
The spacing should also feel
comfortable at small size.
And in general, try avoiding
extremes of weight or style.
A good reading experience is
usually the one you don't
notice.
For display, you have more
freedom.
This is the right place to use
the more extreme weights or
decorative styles.
Even in display though, stay
aware of spacing.
A headline usually looks better
if it's tightly spaced.
Alright, now let's talk about
what everyone is really
interested in, style.
Becoming better at selecting
fonts as with most things,
requires practice.
There's a lot of stuff to learn
and it's perfectly normal to
feel overwhelmed at first.
But there's really only one way
forward.
You need to learn how style
produces an impression.
Remember that app I called
sophisticated in my intro?
Well, I picked that term but
it's by no means a universal
qualification.
What style conveys is strongly
tied to subjectivity, and will
vary from one person to another.
There is one thing you can learn
about though, and that is what
people come to associate with a
given style.
In other words, their
expectations.
So, let's look at the type face
used for the name of the app,
Cochin.
The style itself is called
transitional old style.
Most of you probably never heard
of it, but you've likely been
exposed to it in books and/or
magazines.
Cochin has very small, lowercase
letters compared to the upper
case.
This gives a classic appearance,
which will feel elegant to a lot
of people.
But these proportions also
happen to be exaggerated, and
that makes it feel a bit
whimsical.
The companion to Cochin, Snell
Roundhand, is a design mimicking
calligraphy.
And you don't have to be a
calligrapher to get a sense of
how much skill this calligraphic
style demands.
It's elaborate structure and
high contrast, lends some
preciousness to this design.
So, if I round them up, I have
elegant, whimsical, elaborate,
and precious.
How's that for sophistication?
So, why now would this feel
literary?
The two typefaces we're looking
at right now, although there is
a display, and a textile, both
have typical features of a
classical book face.
That's why we feel inclined to
look at this choice as literary.
But that kind of association is
not natural at all.
It just comes from the fact that
most of us have been exposed to
those styles in books.
To complete this brief study in
style, I'd like to look at the
fame and crazed geometric
sans-serif.
This is a great example of how
the feel of a typographic style
comes both from form and usage.
The first appeal of that style
is probably -- it's very simple,
geometry, and I'll venture into
saying that we've seen renewed
interest recently in that style
because of our current design
infatuation with simplicity.
But because this style is all
over the place right now, you
may be inclined to think that it
feels very contemporary and
fresh.
But the nerd in me disagrees.
This style is almost 100 years
old.
And don't get me wrong, I love
old stuff, but I just won't call
it fresh.
But that's the beauty of style.
It has many layers, and new
layers of meaning get added
constantly.
To become better at picking font
styles, you need to become aware
of those layers, old and new.
So, with our growing knowledge
of typographic style, let's look
at a few strategies to pair
fonts.
Note the use of the verb "pair"
here.
There is no rule against using
more than two typefaces, but
trust me, you're better off
starting small.
You can always add style later
on if you really need them.
The first point I'd like to make
here, is about the impact of
proportions when pairing fonts.
Let's imagine for a moment, you
have to design an app for WWSC,
the Worldwide Sign Painters
Conference.
You start off nice and easy with
this system font, but we're
missing that sign paintery-vibe.
So, we go back to the font menu
and I kid you not, there's a
sign painter typeface in there.
Sounds like a perfect match,
right?
Well, I should mention that us
type nerds have a term for that
situation.
When someone picks a typeface by
its name, we call that an LTypI,
or Lack of Typographic
Imagination.
There's nothing wrong with it,
but picking feature out just
because your app is about the
future might be too much of a
shortcut.
So, if you're going to pick it,
make sure it's because the style
is appropriate and it serves its
functional purpose.
At the end of the day, a
[inaudible] should really just
be the cherry on top of the
cake.
So, back to this cherry, I'll
risk offending a few of my
peers.
You start working on a schedule
for the event, and you decide to
use both fonts for typographic
contrast, SF and sign painter.
But something's off.
The title's look smaller.
And to make them look matched,
we'll have to increase the point
size on that sign painter style.
Now, where does this difference
come from?
Type designers draw glyphs
within the bounds of a virtual
box called a font body.
Inside this box, proportion will
vary from one design to another.
The height of a font's body is
what is referred to as the point
size.
So, at the same point size, two
fonts can appear to have
different scales because of
their design.
Let me show you how this could
be relevant.
Let's say you're working on a
dictionary app.
Dictionaries require a lot of
typographic hierarchy, and using
only the weights and italics of
a [inaudible] might not be
enough.
You have those descriptives
stand out, for instance.
So, we decide to go look for a
serif typeface to create
typographic contrast.
And to try and avoid to tweak
point sizes left and right,
let's find a serif typeface that
has close proportions to the
[inaudible].
This is easily done by setting
all candidates side by side.
They're the same point size and
evaluating their apparent scale.
There is nothing wrong with
picking a typeface of smaller or
greater scale, but just bear in
mind that you'll have to adjust
point size if you go with that
twice.
So, let's make our life easier
here and look for the closest
match available.
And we have a winner.
Now, bringing that back in our
layout, we introduce typographic
contrast, and we're done.
No need to tweak point sizes.
If you're worried that this
approach might limit your
stylistic options, please don't.
There are thousands of good
typefaces out there, and quite a
few type designers release from
families, with multiple styles
of consistent proportions.
So, let's now experiment a bit
with pairing text and display
styles.
So, let's start nice and easy
again with a [inaudible] in a
news story layout.
This typographic layout has
strong stylistic continuity.
The only difference between text
and headline, are size and the
use of italics.
But we might be after something
with a bit more of a punch.
And the first way to get there,
the easiest way to get there, is
to first leverage weight.
Sticking to a single typeface
and pairing some of its variant,
is a very efficient way to
achieve design consistency.
But since we're here to
experiment, let's keep on trying
things.
We now change the kind of
typographic contrast from a
weight difference to a stylistic
difference.
When doing these kind of
pairings, make sure that the
stylistic difference is strong
enough to be obvious.
Here we have two typestyles of
both different structures, and
stroke contrast, so we're in a
good place.
By the way, it is sometimes good
enough to have a strong display
typeface and using the system
font at the same time.
You're defining your own style,
but also taking advantage of
[inaudible] performance as a
typographic workhorse.
But let's keep on experimenting
anyway.
I think I'd like to use a serif
typeface down there.
We return to an understated and
calm effect like we had in the
beginning, but with a quite
different flavor.
This will now feel more bookish
because of the type choice, but
also because of the subdued
relationship between display and
text.
Books tend to go from
[inaudible] typographic contrast
because they're about long
reading, and of grabbing your
attention all the time.
On the other hand, a news layout
may be more [inaudible] this.
Here we're using san serif for
both display and textiles, but
their structuring weights are so
different that we still maintain
clear and strong typographic
contrast.
The display style grabbed your
attention, provides context,
this is what you're about to
read, and makes the layout look
appealing and then the textile
will let you read the content
with ease and without
disruption.
So, as you've now seen, there's
obviously a lot you can do in
terms of style pairing.
And I've only given you a
glimpse of the possibilities of
course.
The key element is typographic
contrast.
Whether I did it through size,
weight, or style.
Finally, if you want to become
better at picking fonts, there
is really no way around learning
more about typographic styles,
their histories, and evolving
trends.
This is how you'll become more
confident in front of that font
menu.
And don't worry, you won't
become typographic rock stars
overnight.
And yes, that's a thing.
But at least you know where to
start.
And I have no doubt that you'll
soon grow into tremendous
typographers yourself.
Thank you.