Finding Fonts – A Guide

0. Introduction

What typeface should I use?

I’ve lost track of how many times I get this asked. Probably twice a week, maybe more. Even in projects where I work as a consultant, this question is usually the first step — even with amazingly skilled graphic designers. Heck, when Michael Paul Young asked me to collaborate at YWFT‘s blog, this was the subject.

Whether a simple desire for novelty, a frustration of what they’re using is just not quite right or a total lack of sense of direction, this always, always gets asked. And it’s not out of inexperience or incapacity (you can relax, now): there’s a wide offer of typefaces, nowadays, as well as a high demand of visual singularity and novelty, where typography is in a all-time spotlight.

Sure, there’s more pressure, these days. Massimo Vignelli’s idea that you can get around with just five or so typefaces to all your projects is a very dated one — from a time where the offer wasn’t wide, either in quantity as in quality. I’d say it’s intellectually lazy, coming from a Modernist hegemonic standpoint. Still, this idea had its era.

But, at the same time, there are solutions. It was never this easy to find new typefaces, and font production technology has significantly improved since digital type’s dawn. Also, media have improved significantly, where resolution is becoming less of a problem, books are in their golden era (quality wise, I’m not talking about economics), what we can now do with the web is less and less archaic and the list goes on.

For the reasons above (and because the overwhelming majority of people in the mailinglist asked me to), I’ve decided to put up this little guide on how to find the typeface your looking for. Alright, let’s get this going.

1. Why Are You Concerned About It?

Wait, what? Come on, Fábio! After that introduction? Yeah. I mean, why are you really concerned about it? Font selection is mostly a decision-making process and, for that, you need specific problems.

So, this is usually my first question, or something along these lines. And I like to start here, because I want to know at what level people are feeling stuck. The replies go from I don’t know where to look to this one sort of works, I just don’t like the terminals. As you can imagine, the approaches to these two differ wildly.

But the most usual reason, from my experience, is that people have no idea about what to do, no research was done. They have no idea about how the project will look and feel. Or they’re just emotionally overwhelmed, daydreaming about and epiphany that will spare them from the lengthy process of finding the right typeface.

As a summary, ask yourself why: it’ll tell you what to tackle first and, most likely, the very core of your project needs.

2. Know Your Brief

A graphic composition is a sum of graphic components who mutually influence eachother. And this is highly quotable. Probably it was Einstein who said it.

As such, I think that it’s not relevant whether you start, you have to start somewhere. Still, having a good brief, one that gives you direction and keeps you from derailing, is paramount.

This brief should also help you a big deal when it comes to chosing a typeface (or more) for your project: it’ll give you your target market, the overall vibe of the project, the project goals, the current problems to solve, the scope of the applications and so on. You know the drill.

But having this beforehand — and I can’t stress this enough — is mandatory. Not that someone who is consulting for you as a type expert won’t help you to get, but this person won’t do it magically: if you don’t ask yourself these questions, someone will: or the project is set to fail, big time.

Hence, the more problems you have, the more constraints you have, the better. Seriously. This will help you tremendously down the road, when it comes to do binary decisions.

3. What Kind Of Vibe Are You Looking For?

This is probably the first question, after having your brief. Skip the latter and, all of a sudden, you’re elaborating it: I mean, you can’t really skip the brief; one way or another, you’ll have to do it, or redo it.

The whole process of typeface selection involves a lot of guessing, so we want to make it as educated as we possibly can. So when you ask yourself this question, it should be somewhat obvious. And what I mean by obvious isn’t something as a 16th century Dutch with baroque italics (although it’s as valid as anything else, since everybody thinks differently), but more of an emotional tone.

What we want here is to start broad and funnel down to as little options we can. But at this stage, the feeling we want people to have while reading already chops a sea of typefaces in more than half.

Think of typefaces as a subtle visual cue that should act as an emotional reinforcement to the trance-like state that happens while reading.

I mean, the experience of reading, lengthy or brief, is some sort of assisted hallucination, where we internally emulate the discourse someone wrote. So, as a hypnotist of sorts, we want to associate that experience with a set of emotions, and we do this by the visual choices we do, not just with type.

So, if we’re aiming for something that feels serious, professional, respectful and trustworthy, we’re not choosing Comic Sans, are we? (And no, Internet, I don’t hate Comic Sans. It’s beautifully made.)

4. A Needle In A Haystack

How do we find a needle in a haystack? With a fucking big magnet.

Now that you have your set of feelings and emotions (I know how it sounds, thank you), you probably have some idea on how to translate these visually. This is where your research stage kicks in.

Diogo, a graphic designer friend, has an hilarious expression for when, in a project, one has too many options and is trying to figure out what to decide: swimming in mayonaise. I’ll spare you the physics of trying to swim in a non-Newtonian fluid, but you get the idea.

There are a lot of options. And this is good, although it can feel overwhelming. So, try to amass potential candidates, leaving out what doesn’t fit the tone of the project (even if you really like that new typeface).

Start with a big chunk of typefaces. And then, exclude, exclude, exclude. This initial stage consists in leaving out the ones that, at first glance, the ones that do not serve your project’s vibe.

But how do you know what kind of typeface serves certain vibes? Well, tough question, tough answers. You’ll have to trust and train your gut: the more experience you have, the more sensitive to subtleties your intuition is. Not the most charming and life-changing answer, but hey, it’s the truth and it works.

Still, you don’t have to be a ultra-geek of type anatomy. Some knowledge helps, sure, since those little feet refering to serifs might not be a tag in a font search engine; but being fairly educated in type classification will help you a lot. Go to a font retailer and check how foundries have tagged their typefaces. Chances are, most of them have highly subjective/emotional tags, hence the whole vibe talk above.

But the most important thing is to have an idea of what you want, and let that guide you.

5. Survival Of The Fittest – The Process, Tech & Paper Shredders

In practical terms, here’s the process: you get your brief, set your tone, have an idea of what you want and you start looking for it. You get a fuck ton of options, and you start reducing that amount by quick elemination. So, let’s say you end up with 20 candidates (this seems like the mid-range scenario, to me); so, what’s next?

Testing, my dear friend, testing.

Print them all (or make digital mockups if it’s for screen, or anything else that is closer to your final medium), see if they fit with the rest of your visual elements, see if they perform on the size you want (assuming that you know that type isn’t drawn the same way for every size). If not, toss them out of the list, thus reducing it.

Over time, the more you have worked with typefaces, stress-testing them constantly, the more you’ll have a sophisticated hunch of what works or not. For me, while interacting with Graphic Designers and Art Directors, this is the biggest tell on how experienced they are: they say stuff like something close to Arnhem, but with a bigger x-height, a bit wider and teardrop terminals instead a fancy, classic but contemporary serif for small sizes.

The mindset to adopt while excluding cases is to be over-critical. And that’s why good designers fail to have a lot of matches on Tinder. With this said, exclude options at the slightest doubt: you can always get back to them, and it makes choosing manageable. When it looks good and feels good, well, it’s good.

So, the only way to do this fast is not to skip it. In time, you’ll be faster; once your visual type culture and experience has expanded.

6. Where’s the Haystack?

Right. The amount of channels in the industry is growing exponentially: more and more foundries are offering typefaces outside of resellers, if not stepping away from them completely.

So, yes, you’ll have to widen the number of channels where you search for typefaces, and you’ll also have to curate them.

Resellers are still an excellent way to search for fonts (with some more picky on the quality of typefaces they sell than others), since they have a huge database of stuff and decent searching tools.

In addition to this, be sure to follow some typedesigners and/or foundries who’s work you admire. Especially when it comes to pairing typefaces: it’s common for foundries to release typefaces that work well together, as well as, due to personal style, there’s usually something familiar between type families.

7. Font Pairing 101

Since we’re on it, we should talk a bit about font pairing.

The Internet is crowded with decent articles on this, so I’ll concentrating on the stuff you shouldn’t be paying attention. Maybe in another article, perhaps?

For starters, forget about pairing lists, especially if they don’t tell you why two given typefaces work together. These will keep you ignorant and won’t help you next time you have to solve a similar problem.

With this, I’m not saying these are useless. Typewolf‘s collection, for example, is absolutely stellar, and it’s database of pairings is enourmous. Still, it doesn’t pretend to give you suggestions nor “definitive pairings”: it simply shows you want people are selecting, in a very tasteful curation; if you want to expand your visual culture in type pairing, go there. Seriously.

Font pairing usually deals with factors as style contrast or similarity, vertical proportions (not vertical metrics, since you can adjust those), texture’s colour, construction and so on. The best advice I can give for now (since this subject deserves a separate article) is go and read about how type designers make superfamilies, while also checking for patterns with font pairings.

8. Wrapping Up

I hope you found something useful in this article. Again, this is my view on the selection process, and there’s room for a lot of funk when it comes to this.

Hence, I’d like to encourage you to try stuff out and see what resonates with you, without being accritical. If you want to be good at this, learn as much as you can about type, while putting ideas to test.

For more articles, new releases and random stuff about type, be sure to subscribe in the form below, or follow me on Facebook, Twitter or Instagram. Happy stalking!

Making a Font: Maximal – Part III

Part I | Part II | Part III


Welcome back to this series about the production of Maximal. If you’re a newcomer, don’t forget to check Part I and Part II, so you know where you’re at; or better, what we’re talking about here.

This article is about programming. Since we’re dealing with such a massive amount of glyphs, developing/adapting some tools to make production easier is a big deal. Besides, the (pseudo-[we’ll get to that]) randomness of this typeface involves – you got it – programming.

1. Generating Glyphs

slide-013

Let’s start with something not so code-y.

As planned, we need 30 glyphs per letter, apart from the main glyph. For organization and management sake, if the base glyph is E, for example, I want to call the variations E.ss01, E.ss02, E.ss03 and so on.

Why? Well, I use FontLab Studio, and it lets me batch generate glyphs. At the same time, it ignores what’s after the period and generates a component with the letter E, which is handy to start editing. So, in FontLab Studio, if I want to generate a whole bunch of glyphs, I need to input something like this:

E.ss01 E.ss02 E.ss03 E.ss04 ...

Writing down 30 of these, one by one, for hundreds of glyphs, is tiresome. So, I’ve made this little app, just for this project, that does just that. Feel free to use it for your own needs, since I’ve thought that you might just do that and made it in a way that you can choose your own prefixes.

I won’t go over the app’s programming, though, since it’s plain old HTML + Javascript (something very easy to find on Google for clarification) and you can check the source code on the spot.

2. Making Classes

slide-015

Most of OpenType features work by substitution glyphs and/or groups of glyphs. For example, if you have a f+i ligature – and let’s say that that ligature has the name f_i – your code to display the ligature whenever you type fi would look like this:

sub f i by f_i;

Simple, right?

Now, as we’ve settled on Part II, we have 30 variations of each glyph, which leaves us with a bit more than 13.000 glyphs to manage. Can you imagine coding everything glyph by glyph? Not a very appealing idea, right?

Well, we have classes at our disposal. Basically, we can grab a bunch of glyphs and store them in a class, repeat that for every style set (while keeping the same order) and instead of substituting the glyphs, we substitute the class. For those staring and blinking: instead of coding 13.000 times, we’ll just make it 31. Bear with me.

In OpenType coding, a class is identified by the prefix @. So, let’s say we have two classes, class1 and class2. If we want to substitute all the glyphs stored in class1 by the glyphs in class2, it would something like this:

sub @class1 by @class2;

If it’s your first time tinkering with OpenType features (or not, anyway), have a look at Tal Leming‘s The OpenType Cookbook and bookmark it. Seriously: it’s that awesome (and did I mention free?).

2.1 So, What’s What?

So now that we know how classes work and the basics for writing OpenType substitution routines, lets go through the classes in our font. Here’s how I’m naming them:

ss00 => Our default glyphs
ss01 => Stylistic Set 01
ss02 => Stylistic Set 02
...

And so on. My main goal here is to draw your attention to ss00, which is our non-modified glyph set. This class will be the default one and no glyph substitution will be applied.

The reason for this is, well, people might want to use it without the pseudo-random craziness, as well as any other style. At the same time, you might want to change a glyph or two, without the program changing it back to some other glyph.

With this said, we have three features in our OpenType code:

  1. Default: how the font behave out-of-the-box;
  2. Stylistic Sets: the 30 different glyph sets;
  3. Contextual Alternates: where the pseudo-random magic happens, with glitter and fairies.

I won’t dwell into the first two, since they are very simple and a lot of people around the interwebs have already documented it way better than I could. Again, I recommend Tal Leming’s OT Cookbook.

3. OpenType Random?

slide-012

OpenType does have a rand feature, introduced by Adobe (S3), but it remains largely unsupported (yes, even by Adobe). XeTeX seems to support it, though, since it allows raw OpenType features.

The usual way type designers go around this, is by creating a pseudo-random glyph substitution routine that cycles throughout.

3.1 True Random vs. Pseudo-Random

So, why isn’t rand widely implemented? Adam Twardoch, in this Fontlab Forum thread, has some very insightful points:

So, pseudo-random code, instead of pure randomness, grants control, it’s predictable and avoids headaches in processing power and editing. Sure, there might be situations where a full-throttle random implementation is desired but, hey – you can always code your own to tailor-suit your needs.

3.2 Pseudo-random Substitution

Pieter van Rosmalen, in this thread on Typophile, shares the code that will be our basis for this font. Here’s the code that we’ll be using as a starting point:

feature salt {
   lookup rotate {
      sub @ss00 @ss00' by @ss01;
      sub @ss01 @ss00' by @ss02;
      sub @ss02 @ss00' by @ss03;
      sub @ss03 @ss00' by @ss04;
      sub @ss04 @ss00' by @ss05;
   } rotate;
   lookup rotate;
} salt;

There are only 5 classes, instead of 30, because I want you to understand this: making this work with 30 or more (and we’ll get there), is simply a matter of extending this logic.

So, first of all, pay attention to the single-quote mark. In OpenType, this means change just this one. Let’s imagine this scenario: we want that everytime that we type EE, we want the last E to be substituted by the glyph E.ss01. The code would look something like this:

sub E E' by E.ss01;

Simple, right? Let’s move on.

3.3 Extending the Code

I did mention that our final code would be an extension of this. So, we want the following to happen and in this order:

  1. Check the first pair and change the last glyph with another one;
  2. Store the last glyph of the first pair and use it as the first of the second pair;
  3. Change the last glyph of the second pair;
  4. Do this throughout the algorithm.

This doesn’t seem random at all, right? Well, the trick here is to appear random: so if we have an algorithm that is complex and big enough, it will appear random.

So how will we make this algorithm easily? Automation, again, for the win: I wrote another HTML/Javascript program just to do this task. You can find it here.

And again, the source code is viewable, so use it however you want to.

So now, when we type something in, our font looks like this:

slide-014

4. Wrapping Up

I hope you enjoyed this post! If you did, you can always share by using the buttons below. For more juice, scroll down and subscribe to the mailing list!

See you in Part IV! Cheers!


References:

  1. Thomas Phinney on Pseudo-Random OT code – Adobe Forums;
  2. Tal Leming’s The Open Type Cookbook;

Bézier Curves and Type Design: A Tutorial

[2026/09/14]: This article became the most popular I've ever written. Since it was written a long time ago, I decided to rework it: polishing the wording to facilitate comprehension, fixing dead links and typos, and adding interactivity. Still, it remains faithful to the original — a lot of people discussed it and helped me flesh it out into what it became, and I want it to continue reflecting that process. Enjoy!

Whenever I am asked to assess the quality of a typeface or logotype, or when someone asks me for help with their typefaces, one of the most common problems I find is bad Bézier curve design.

And every single time this happens, it’s not people’s fault. It is a fatalism of existence: if people knew better, they’d do better. Surprisingly, it seems that a lot of people have trouble wrapping their heads around this: students struggle with it, fellow lecturers despair.

And then there’s that heart-stabbing situation when someone drops by and says “Hey, I just finished this font, can you have a look and see if something’s missing?” and I feel obliged to say, with grief, “You have to redesign it all over: it’s poorly designed, Bézier-wise”.

So, in order to save some people from this hassle, read along.

1. Problems

First of all, we should understand that each piece of desktop publishing software is going to compile the font files in its own way. Moreover, each one of them is going to convert the curves through its unique algorithm, sometimes unleashing hell.

Flash IDE [now Adobe Animate], for example, is notorious for wrecking curves. It does so based on the size of your vector artwork in order to keep the file as small as possible. If fonts are not embedded, the same happens.

Some programs, like 3D applications, simply break the curve into several facets. So even if you are doing something in Illustrator to use in 3DS Max, for example, read on; it might save you some trouble.

2. Reasons

Usually, all of this revolves around how PostScript and TrueType deal with outlines: TrueType uses quadratic Bézier curves, and PostScript uses cubic Bézier curves.

I know, I know, geek stuff. Here’s the simple explanation:

And for the visual type of person, here’s an image:

So, if we were to draw a circle in both curve equations, they would be drawn the following way:

Let’s count the number of points needed for each circle:

Counting points might seem unpractical and silly, but it can tell you a couple of things right away:

If this is so, it seems that cubic curves win over quadratic ones; so why aren’t quadratic curves obsolete?

3. Digging deeper

But how are Bézier curves calculated? Let’s start with quadratic curves.

3.1 Quadratic Curve rasterization

We have our three points: two anchors (in and out) and one control point. Let’s call the anchors A1 and A2, and call the control point C. Next, let’s connect A1 to C and C to A2 with straight lines, as shown below:

Drag the orange points to reposition them.

Now, we’ll add two points: one that travels from A1 to C and another that travels from C to A2, and they’ll take exactly the same time to make their trip. And for the sake of this exercise, we’ll also add a straight line that connects the two traveling points (shown in black, below):

Drag the orange points to reposition them.

Again, let’s add a new point, one that travels between the two black points, taking the same time to travel from one point to another (shown below in white). If we track its path while traveling, voilà, we have our quadratic curve rasterized:

Drag the orange points to reposition them.

OK, so now you know how a computer renders a Bézier curve:

3.2 Cubic Curve rasterization

So, what about cubic curves? Is the rasterization done the same way?

Well, yes, sort of. It just adds another level of our “traveling points”. Have a look:

Drag the orange points to reposition them.

See what they did there? Right, a moving quadratic curve inside a cubic one!2 Here’s some deductions on cubic curve rasterization:

3.3 Going back and forth

The addition of multi-order intermediate points can go down to infinity, and it’s possible to break cubic curves into quadratic with minimal loss in quality. The other way around, well… it gets tricky.

Quadratic curves are always conic sections, while Bézier curves that have more than one level are a result of curve funkiness, meaning, a collage of cone sections’ sections.

So if we were to write an algorithm to convert cubic curves to quadratic, we would have no problem: we would just check for cone sections that would fit on that curve.

But if we were to write one to convert quadratic to cubic, the best the program could do is an approximation of the original outline, usually keeping the anchor points it already had, but adding one more control point per anchor. So, file size wise, not a good idea; processing power wise, even worse.

Edit: As it was stated over at Hacker News by simias and jacobolus, and kindly explained by nanofortnight, the above statements are wrong — in fact, the truth is the very opposite.

If we were to convert a quadratic curve to cubic, it would be the exact same curve, as nanofortnight demonstrated. But, as jacobolus pointed out, due to the integer structure of font compiling, this conversion might not be exact.

And when we go to convert cubic curves to quadratic, it’s not as easy-peasy as I stated above. For further reading on this, check this out.

Is this a problem, then? Well, these conversion issues are the reason why DTP software and printers favour PostScript, i.e., cubic Bézier curves. If the drawing was provided in quadratic curves, the software could easily convert them to cubic; if it was already in cubic, it would simply keep it that way.

So, while designing type, you opt either for TrueType or PostScript. And, while this makes me favour PostScript, if you start with one, stick with it.

But why do type design applications offer cubic curves only or have them as default, as a drawing method? Well, as debated, conversion from TrueType to PostScript is optimal and the other way around is not. And the third reason comes next.

4. File Size

We already know that you can draw the same thing with cubic curves using fewer points, but there are also some other things that we can take into consideration, regarding file size.

4.1 Always work with integers

FontLab [Studio3], for example, doesn’t even let you use decimal coordinate data, and no sane developer will build a vector drawing application that would allow point data to infinity. Since we still need a worldwide network of computers just to find some more pi digits, no one gets to treat themselves to perfect circles.

But then again, if your eye can’t tell the difference and, in fact, you still have to cheat the circle to make it look like a circle (when you adjust forms optically), using decimal numbers on type design is just some sort of geek stubbornness.

And there’s the workflow issue: ask any professional type designer if they use Illustrator — or another vector drawing application that uses decimal numbers by default — and you’ll find that very few say yes; and even those who do still have to adjust their drawings in a font editor.

It’s way easier to nudge with the keyboard arrows than to use a text box to input integer values. On the other hand, a lot algorithms used for font handling in DTP software simply round the points to integers, so they can handle them with less storage and processing resources.

Edit: And, as Pomax kindly pointed out, the OpenType specs only allow for integer point coordinates anyway.

But the big issue here is file size: if you have a file with integers and 4 points, it will be smaller than a file with two decimal figures and 2 points. Make some thousands of points and the difference in file size balloons, as well as processing requirements.

5. Always work with cubic curves

Cubic curves win, for all the reasons mentioned above: easier to draw with [there are more reasons for this, keep reading], better conversion to quadratic than the other way around, smaller file size. You know the drill.

But it is also worthy of note that this is why cubic is the safe default when we start drawing fonts — conversion to quadratic is lossless, so your outlines are always reproducible by other tools and designers.

6. Keep anchor points at extrema – and handles straight

This is a big one. Most of the time, the most common problem I see is that the anchor points are haphazardly positioned, spread all over the place. This results in jagged lines, poor rasterization, bigger file sizes (who hasn’t tried to fix something by adding more, right?), increased difficulty in drawing, and the list goes on.

If you want to draw a smooth curve, having the anchor points at the horizontal and vertical extrema and keeping the handles vertical or horizontal is enough. It gives you better control over the curve path and less stuff to adjust: it keeps most of your curve segments under 90º and transitions predictable.

Edit: And, although implied above, is good to mention: do not invert the path direction with your handles (thanks to Pedro Amado for pointing that out). Here’s what I mean:

Keep in mind that we’re talking about what should be in your final output. Although I recommend keeping your placements tidy and as close as possible to what it should be, inverting the direction like in the image above can be a way to draft quickly4.

Edit: 7. Explicit Inflection Points

Hrant Papazian made me notice, on Twitter, that I’ve missed a point (pun intended!). The example above, on the right, lacks an explicit inflection point.

“What the hell is that?”, you may ask. Well, in an ideal scenario, all points should alternate between vertical and horizontal handle position. Why? Because we want to keep each curve segment without inflection points, in order to have an optimal conversion from cubic to quadratic.

“OK, lovely, but you haven’t explained what an inflection point is”. True. Here it is: the inflection point is where the curve changes direction. So, if you’re walking from left to right and start leaning to the left, the place where you start doing so is your path’s inflection point5. Simple.

So, in the example in §6, the curve changes paths between the two horizontal handles, creating an inflection point. How to avoid it? Well, make it explicit; i.e., add an anchor point in that location. This way, the curve is split into one-direction-only segments:

bezier010

For more  information on inflection points, have a read here.

Edit: Also worthy of note, pay attention to how the handles retract at every step of the way. Even if you thought “Yeah, of course it does” — kudos to you, tap yourself in the back on my behalf — the bounding box for coordinate control also got smaller. This makes our life easier while editing: we get a better view to what we’re doing.

8. Final considerations

I know this was lengthy and somewhat technical, but I believe it’s important to know why instead of just how. Computers have limitations – and will always have – so it’s important to make the best of it; and for that, knowledge is key.

I hope you had as much fun reading this as I had making this article. Thanks for your time!


References:

  1. Anchor node is a general term for insertion and end points of a curve segment. Since the curve always goes through these, they “anchor” the curve to it. ↩︎
  2. This algorithm for drawing/splitting curves is de Casteljau’s algorithm. ↩︎
  3. FontLab has supported floating point coordinates since version VI. But it still compiles to integers. Just a relic of how long ago this was written. ↩︎
  4. Let me also state that whenever I do this, I add the extrema points right away: there’s not much control in drawing such a huge angle and inversion with just two points, especially when it comes to curve tension. ↩︎
  5. I encourage you to go back to §3.2, where you have the interactive cubic curve animation. Drag points around so that you have a curve and countercurve and pay attention to the gray line — you can see exactly when the curve “flips” direction. ↩︎