Bézi-yay!

How I Got Started.

Back in 2017, I was prepping a lecture about digitizing type for my first quarter as an adjunct instructor at DePaul University. This process, I have learned through various sources over the past few years but as I a began to think about it, there wasn’t much out there on the internet helping people learn this method. I started seeing the wonderful forms and structure of Neil Secretario. He would post the beautiful Bézier shots to his Instagram page and I was fascinated by them. I knew I wanted to learn that too, but wasn’t quite sure of myself as a lettering artist yet. I quickly realized that Neil had perfected the letterforms and the structure. If I could get over the idea that my letters weren’t the best and simply replicate the structure, I could eventually build my own. So I did. I began taking screenshots of his wonder Bézier posts and traced over them. I never claimed them as my own, and I never even shared them, but I used it to practice and build confidence. Soon, my lettering ability caught up and I began to use the same process on my own pieces, and that’s where it all began.

Ever since I learned how to do draw letters digitally with this method I have been trying to teach it to others. Creating that first lecture was my reminder that this process wasn’t easy to explain in writing. So I decided to take on the challenge. I sought out a way to describe this process to anyone without me actually being there to talk them through it. 2 years later I finally finished it and I am so excited to share. While I wanted to make it as a zine I knew this was information I wanted to try and give out for free. I learned it for free and it feels weird to charge others for this information. So here it is. 2 years of writing, workshopping, testing, and refining. If you care to support the time it has taken, the printed zine is available in my shop. It is a more in-depth guide even have a few extra tips for more advanced users. Go forth and digitize those letters…the right way.

About This Process.

If you’re seeking advice from this guide, you have probably seen seen something similar to this when it comes to the vectorization of type. You may have wondered, “How do they do that?” Or maybe even, “What’s the point?” (pun intended). Well, the reason for spending so much time doing it is twofold. First, it reduces the total number of anchor points in a single piece, making it easy to adjust curves while maintaining proper structure. Secondly, beginners often struggle with finding a starting point when it comes to digitizing their type. It creates a concrete method and a place to start with each letter. It’s what I refer to as The 90º Method. But first, let’s start at the beginning.

Understanding Béziers and Anchor Placement.

A Bézier curve is a mathematical method for drawing curves created by Pierre Bézier. Curves are created by drawing a line in between two points—called anchors—and altered by the handles on each of the points.

All basic, 2D geometric shapes are created by anchor points and Bézier curves. With all shapes created in Illustrator, anchors will naturally be drawn at the extremes of each path. Any paths that are straight will not have any handles, just anchor points.

When dealing with round or curved shapes, you’ll begin to see the effect the handles have on the curves. As you can see, the anchors are proportionally spaced to create a smooth curve. If the handles are pulled disproportionately, the curve will feel slightly irregular, flat, or pointed unnaturally.

Defining the Extremes.

Every line, straight or curved, has a slope. Slope is defined as the change in value on the x-axis divided by the change in value on the y-axis. A simplier way to remember this is “rise over run.” If the change in vaule of both the x and y axes are positive, the slope is positive. If either of them are negative, the slope is negative. Knowing every point in which the slope changes from negative to positive is important because the point in which it shifts is at the extreme. This is known as an extremum.

Like I said before, Béziers curves are a mathematical equation for defining a line. Although we don’t need to know algebra to draw letters (thank God), this is helpful to recognize when a curve changes directions.

So every time the slope changes (i.e., any change of direction), the line needs a little bit of support, and there should be an anchor point placed there.

As you’ll notice, the line starts out moving up and to the right before switching and starting to move down to the right. The same thing happens here at the bottom on a curved line. The line starts out moving down and to the right before switching and starting to move up to the right.

But this rule doesn’t just apply to top and bottom of forms, but also to the left and right of each one as well. Any time that the slope changes from positive, to negative, there is an extrema.

Finding Your Extrema (pt 1)

There are two ways to easily define those extrema when it comes to letterforms. The first is the easiest, but will leave a lot of fingerprints on your computer screen. When looking at whatever you need to digitize, simply follow the line with your finger. Pay attention to which direction you’re moving in, and say aloud which direction your finger is moving in.

As you are following along here, your finger keeps moving up and to the right. The moment your finger is no longer moving up, but down, the slope has gone from a positive value to a negative value. This is an extremum.

Finding Your Extrema (pt 2).

The second method is super simple too, but can look a bit overwhelming when working with more than one letter at a time. This method is done by using guides. To make them visible go to View > Guides > Show Guides. Start by dragging guides from your rulers (View > Rulers > Show Rulers to make visible) until it touches the letterform. Start with a single letter. Wherever it touches a letterform there is an extremum.

Unfortunately, Adobe Illustrator only has the rulers on the top and left sides. You can start by dragging one from the top until it touches the letterform and one from the left until it does the same. To find the extremas at the right and the bottom, you have to drag a guide across the form completely and then move it back until it touches the letterform.

Done? Okay, great! But you’re only part of the way there. While we have defined the exterior extrema (Figure 10.b), we know that there are others.

Once again, every time a line has a change in slope or direction, there is an extremum. This means that there are extrema inside of individual forms, too. After placing your guides, we now have to look at the interior ones. I always start by following the exterior line of the form, dragging guides until it touches each time, vectically or hoizontally, but do whatever works for you.

Penning Out the Form.

Now that we have defined our extremum, it’s time to start penning out the form. Bring up the Pen Tool (P) and start at any extremum on the letterform. Remember, that is any place where the slope changes directions or the guide meets the letterform. Simply click and let go without dragging. Continue around the form placing an anchor point at each of the extrema. Don’t worry about a smooth form (yet); we will take care of that later.

Now it’s time to pen out the rest of the extrema by continuing placing an anchor point at each of them. Once you’ve penned all the way around the form, retun to the point where you started to complete the path. Now we can begin smoothing out the curves. Bring up the Anchor Point Tool (Shift + C). Start one point at a time clicking on the anchor and dragging. Hold Shift while doing so in order to keep your handles locked at 0º, 45º, or 90º. This will create handles on the anchor point that will produce a curve as a resulting path. After creating handles for each point, you can use the Direct Selection Tool (A) to tweak each side individually. Be sure to continue to hold Shift as you edit.

You’ll continue doing it for each point along the path. After a lot of anchor point converting, and even more refining, you will have something that looks like the original sketch and you can move on to the next letter.

The 90º Method

This is where the “90º Method” comes into play. With this method, the goal is to keep as many handles as possible locked to 0º, 45º, or 90º. By doing so, you will find it easier to address each curve indivdually. This is done by simply holding down the Shift key every time you go to adjust a handle.

Some people find this to be unnecessary, but I would say that this method gives each letterform a structure that is easy to analyze and refine. Of course, you will never be able to keep all your handles locked at those angles, but this method will work for the majority of the pieces you create. Some curves are a little too complex, so always use your best discretion.

Want to Learn Even More?

Well you’re in luck. This is just the basics and there’s plenty of other tips I have to share. If you’re interested in learning more, check out my zine. It’s full of additional explanations, useful examples and more than a handful of helpful tips and tricks.

Oh, and if you need a little more practice, here are a few letters to get started on!