カスタムフォントの選び方

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 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 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 . 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 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 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 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 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.