Creating a Font from Geometric Shapes: Part 2

Creating a font from geometric shapes, part 2

Welcome back! In part 1 of this series, we created a Font Creator file, and built our basic straight strokes. Now we’re going to make a few more basic shapes, and dig in with making some letters.

Many of our letters can be made with those straight strokes, but you know there’s one more major shape that we’re going to need:

The letter O, starting with a big circle

We need a full-height circle as the base for the letter O. Then the letter O will serve as a building block for C, G, Q, and the zero. Parts of those characters will also be used to create other characters as well.

If you remember from the previous post, we’re building our letters to be 800 units tall. So this may be a surprise, seeing my circle at 820 units tall. But there’s a reason to the weirdness, and that reason is that for some letters, we have to create a little bit of an optical illusion. See, if you put the letter E next to the letter O, and they’re both exactly 800 units tall, the E will look a little bit taller than the O. This is because so much of the E (the full-width strokes along the top and bottom) touches the baseline and the cap height line, while so little of the O (just a wee point at each end) touches those same lines. The O is the same height, but to the human eye it looks shorter.

So to make up for the failings of the human eye (now, now, don’t poke your eyes, they can’t help themselves), we have to make characters with rounded tops and bottoms a little taller, so that they look the same height as the rest.

Moving on!

Narrowing our circle slightly into an oval

I could leave the O as a perfect circle, but it seems just a little too wide that way. So I’ve brought the sides in 30 units on each side. It narrows it down into a slight oval shape, which I think just has a little bit more character than a full-on circle.

That’s it for the outside of the O. Let’s do the inside!

Creating the counter inside the O

Here’s where the calculator comes in very, very handy. SO. Remember back to the previous post, where we started with two stroke widths: 180 and 100 units. But we narrowed those inward at the middle of the strokes; the 180-unit stroke was narrowed 10 units on each side, so at its narrowest, it’s now 160 units. And the 100-unit stroke was narrowed a bit less, so it’s 85 units wide at the narrowest part.

To avoid the O looking too heavy, I’m going to match its thick and thin strokes to those narrowed parts. So here comes the math:

The outside circle is 820 units high. We want the top and bottom to be 85 units thick. 820-85-85=650 units tall for our interior oval.

The outside circle is 760 units wide (because we narrowed it by 30 units on each side), and we want the sides to be 160 units wide. 760-160-160=400 units wide for our interior oval.

Whooo! Math is fun. The oval inside looks right; the sides are balanced, and the thick and thin strokes look right, so we’re good to go.

Changing the direction of a counter

As you can see, however, the inner oval is colored in gray the same way the outer oval is. We should be seeing the white grid background through that center, right? What we need to do is reverse the direction of the inner oval.

You may now be wondering, “What? Reverse direction? What’s that?”

When a computer draws the letters of a font, it does it in much the same way that we draw letters with a pen. If you draw a circle on a piece of paper, you’re starting from one point, then drawing the circle in either a clockwise or counter-clockwise direction until you get back to the starting point. Fonts are done the same way; each outline is drawn in one direction or the other. By switching the direction an outline is drawn, you’re telling the programs that use those fonts, “cut this shape out of any shape drawn in the opposite direction.” So if the outside of our O is drawn as a clockwise circle, we need to switch the inner oval to counter-clockwise, so it gets cut out.

Font Creator makes it easy—just select the inner shape, right-click, and select “Change Direction” from the options that pop up.

The letter O, ready to gO

Like this! Now our O is ready to use.


Taking a peek at Cooper Black, I see that the inner oval is set at a slight angle. So let’s see how we feel about that!

Optional counter-tilt in the letter O

Here we’re tilting that inner oval backward 10 degrees. It’s cool! But I’m giving myself extra work already with the slight curves on the straight strokes, and I already know from some test letters I did that the tilted oval makes the C and G much more difficult to build. So I’m going to stick with a straight up-and-down oval for this font.

Just to check, let’s bring our thick and thin strokes in, to make sure everything matches up:

Checking the stroke width of the O

Looks good! Not that I doubted that the math would work, but … I doubted that my math would work. Thank goodness for calculators.

And speaking of using calculators to make circles, there are just two more building block pieces to make:

Additional circle building blocks

I’ve made two more O-shapes; one of them is 500 units tall, and the other is 400 units tall. Their tops are the same thinner stroke width as the full O, and their sides are the same thicker stroke width. (But optical illusions are at play again; doesn’t the smaller circle here feel like it has thicker sides?)

I’ve made half-circles to use as building blocks for letters like B, P, and R; and the full circles will be used for numbers like 6, 8, and 9.

All right, we have everything we need. Let’s start making some letters!

I used the letter E as a test when I was trying out different elements for this font, because it serves as a base for a lot of other letters. So let’s make an E!

Building an E, setting up for the curves

Here I’m using the thicker stroke at its full 800-unit height, three copies of the thinner stroke at a shorter width (I’ve done some adjustments since I took this screenshot; right now they’re 620 units wide), and three copies of our shorter serif piece, two of which are tilted at 10 degrees.

I’ve also constructed a little L-shaped guide, with a 40-unit width and a 40-unit height. That’s helping me get my serifs all at the same spots, so when I merge the shapes together, I’ll have uniform curves in all of the corners. As you can see on the right side in this image, I’ve set the point where the thinner stroke goes from the half-circle to the straighaway exactly 40 units away from the same point on the thicker stroke. When I merge everything, I’ll have to create a new point on the thick stroke where the lower arrow is pointing, so I can then make a curve between the two points where the dotted line is.

Testing the curves and merge on the E

And here’s a test version of how the final E will look. The way the serif at the top right bumps up is something I spotted in Cooper Black, though a lot of other fonts use it too.

I think the E is looking good, so now we can use it as the base for other letters:

Variations on the E to make F and L

It’s pretty easy to copy over the E pieces, remove a few, and make the F and the L. I just added in the horizontal serif piece at the top for the L and the bottom for the F, and used my 40-unit spacer piece to line up those serifs evenly.

Next up, let’s take the O we made:

Converting the O into a C

and turn it into a C!

I’m using the same serif piece up at the top. The circle I’ve used at the bottom is 140 units across, which felt like a nice midway point between the thick and thin strokes. Once I merged the pieces, I did make some small adjustments, like deepening the V where the top stroke meets the serif. Trust your eye on these things! If a stroke looks a little too thick compared to other letters, make it a little thinner. If a curve seems too steep, make it more shallow.

Once I have all of the letters built, I’ll do testing of random words to see how the letters all look next to each other. That’s when there will be a ton of tiny adjustments to make sure everything feels balanced.

Converting parts of the C to an S

Once we have a C, we can chop off its top, fiddle with its curve, make two copies of it that are 180-degrees from each other, add in our thick stroke in between so we get the same stroke width as the rest of the letters, and create an S!

(I will admit, the S is often one of the hardest letters to make. There will be dozens more tiny adjustments to make to it, once it’s in testing next to the other letters.)

The E and smaller circles for B, P, and R

Coming back to the E, we can chop it in half, then use the left side as part of the base for the B. The smaller half-O shapes make up the right side.

Flip that B over so the bigger half-O is on top, and it’s an easy change to a P. Then add an angled thick stroke to the P to get the R!

Again, there will be a lot of fiddling and adjustment. Especially with the leg of that R; I may have to tweak it a degree at a time until I find just the right angle for it. I’m a stickler for an R leg.

Angling the building blocks for A, V, and M

Tilting the basic strokes at an angle will get you more letters, like A, V, and M. (And W, and K!) I believe the strokes of the A were a 20-degree tilt; then the V is just the A rotated 180 degrees with its crossbar removed. I’m still fiddling with the M—I may adjust the angles so the letter gets narrower or wider once I start testing it in words with other letters, since it’s wider than most of the rest.

These letters are the reason I took the time to make my big straight strokes with the perfect half-circles at the ends; the rounded ends are on full display at points in these.

Angled for an X, then combined for a Y

A slightly stronger angle to the strokes gets the X, and then the X becomes the top part of the Y. I’ve brought in the I for the bottom of the Y (it’s so simple, I haven’t shown it here; likewise the H, which is just two Is with the crossbar borrowed from the A). Cut away the parts you don’t need, merge the rest, measure out that 40-unit distance for the curves, and there you have it!

Last up for this post, a couple of numbers:

Circles for the 8 and 6

I’ve widened the two smaller circles and overlapped them to make the 8. Then I’ve taken the larger of those two circles and combined it with the top piece of the S, which I was then able to massage and finesse into becoming the 6. Which can flip over, and a few adjustments will make it into the 9!

Some of these will be easier than others, for sure. That 6 was a challenge to make, and it still has a few more little nudges and adjustments before it’s right.

** Next up in part 3, we’ll make even more letters, and keep on truckin’ deeper and deeper into the font!