Refined Construction 1: Recycling Basic Font Shapes

Normally, my fonts tend toward handwriting styles. They’re faster to make, so I’m able to go from having an idea to having a finished product quick enough that I don’t get bored with the font or start to hate it. (Which is a case with every creative thing, right? Sometimes you just can’t stand what you’ve made when you’re done. And usually those are the ones that other people like the most.)

But the font I’m working on right now is very different, and very time-consuming. It’s a far more refined, regimented, and rules-oriented font than I usually do. And it’s a great opportunity to share with you the huge amount of work that goes into the more “plain” or “ordinary” or “boring” fonts.



I started out by drawing my letters on “graph paper.” (I use quote fingers there because I drew them digitally over a grid pattern. I’d totally use graph paper if I was using paper, though. Love graph paper. Used to use it to draw dungeon maps back in the day. Graph paper gaming geeks unite!) Though they don’t line up with the grid right now, because as I finished the letters I just shoved them willy-nilly to the bottom of the screen.

Anyhoo. The uppercase letters are five squares tall, and the shorter lowercase letters top out at four squares tall. (I like a nice, high x-height.) The uppercase O is also five squares wide, and the lowercase o is four squares wide. Those, along with the bunch of weird lines and shapes in the upper left, were the building blocks of the entire font.

These may look neat and tidy, but once they were vectorized and imported into my font creation program, they were pretty rough (my digital pencil doesn’t make the sharpest corners). So I rebuilt all of the letters from scratch, using the same technique of recycling the same few parts. You may think this was doing the same work twice, but doing this first set was invaluable – it let me figure out my widths, heights, and how the letters all related to each other before I got into the font program. It’s like sketching out ideas before hopping on the computer to make a logo; that early work is a necessary and useful element that helps shape the final product.



First off, I set my guidelines. There are a ton, so let’s go over them:

1. Ascender height: this is where the tops of lowercase ascenders (see the top of the b) will hit
2. Rounded Caps Height: this is where the top of any round-topped uppercase letters will hit.
3. Caps Height: this is where the top of any flat-topped uppercase letters will hit.
4. Rounded x-Height: this is where the top of any round-topped lowercase letters will hit.
5. x-Height: this is where the top of any flat-topped lowercase letters will hit.
6. Midline: this marks the exact middle between the baseline and the caps height line.
7. Baseline: this is where the bottom of any flat-bottomed letters will hit.
8. Rounded Baseline: this is where the bottom of any round-bottomed letters will hit.

So I’ve talked about the main lines (caps height, x-height, baseline) before. But I haven’t touched on the idea of having different guidelines for flat letters and rounded letters. It’s because we need to create an optical illusion here. If a letter with flat tops and bottoms sat next to a rounded letter (let’s say we have an N next to an O) and they had the same caps height and baseline, the O would actually look shorter than the N, because of how little of its real estate touches the baseline and caps height line before it curves away. So in fonts like this, the rounded parts stick out a tiny bit more, so that the human eye is tricked into thinking they’re the same height.

Looking at these two letters, you can see that the flat tops of the U hit the regular caps height line, but because the bottom of the U is rounded, I’ve gone that tiny bit farther down to fool the eye. And in the lowercase b, you even have a combination: the stem has a flat bottom, so it only goes down to the baseline. But the bowl, because it’s rounded, goes that little bit lower.



Now that all of the guidelines are set, it’s time to start rebuilding the letters from the ground up. One of my most important tools here is a rectangle that marks out the width of the vertical strokes and the height of the horizontal strokes. I’ve built this guide so that the horizontal strokes are a little bit thinner than the vertical strokes. I could have made it a perfect square, but I wanted a little bit of variation in my line width.

Then I can take that rectangle and build my letters so that they all have uniform stroke widths, even with something weirdly curved like the uppercase S here. The original import is on the left, and it isn’t bad, though it’s pretty rough. Using it as a guide for how wide I want the overall letter to be, I placed my rectangles in the spots where I’d need them to dictate the height and width of strokes. Then I moved the rectangles over and built a completely new letter S on top of them. The final product is on the right, and as you can see, it’s far more refined and clean (with far fewer points and curves) than the original.



Here’s the same process with the D. I used that rough original as a guide to how far out I wanted the bowl to reach, placed my rectangles, then moved the rectangles over and built a completely new D over the top of them.

The key with a font like this is unity between your letters. Even the length that those horizontal strokes go before they start into their curve is dictated by that magical rectangle!

Now, let’s take a look at the lowercase letters. A whole bunch of them can be created from a very few shared shapes:



We’re going to start with these three shapes (and one of these shapes is made from parts of the other two). First off is a straight up-and-down bar, the same width as the magic rectangle, reaching from the flat baseline up to the ascender height. Already, we have one letter completed: the lowercase l! Next is the lowercase o, crafted from four magic rectangles that were lined up and centered. And because that o is rounded, you can see that it’s hitting both the rounded x-height and the rounded baseline. The third shape takes the top half of that lowercase o and adds in two chunks of the lowercase l.

Let’s take these pieces and put them together!



We’ll start by creating the lowercase b. All I’ve done here is taken that lowercase l, put the lowercase o on top of it, and merged the two into one shape. I could have left it as-is (in the middle), but I wanted a tiny bit more distinction between the stem and the bowl, so I moved the points where the two shapes up and down just a little bit (see the blue arrows), then readjusted the curves to be smooth. Just that tiny adjustment makes the letter look a bit less schoolbook-ish.

Now, you may think we’ve created only the letter b. But depending on the style of your font, you may have actually created 5 complete letters, and the majority of a 6th.



And here they are! Some horizontal and vertical flipping, and the b turns into the d, p, and q. Shorten the stem, and you have the a. And take that a, add the bottom half of the letter o to the bottom, and you have the g.

Yes, this is the single-story a, while in the original set I drew up at the top, I used the two-story a. I just wasn’t completely happy with it, so I built the a both ways. And for those who prefer one over the other, I’m going to include that two-story version as a stylistic alternate, so the end user can choose whichever they like better.

Side note: some studies say that this kind of flipping of the same shape makes a font difficult for those with Dyslexia to read. However, other studies have shown that Arial and Helvetica are among the easiest fonts tested for a reader with Dyslexia, and both of those fonts use this same technique. That test even pitted Arial and Helvetica against Dyslexie, a font specifically created to be easier to read. So it’s definitely something to keep in mind, but the jury isn’t in yet on what, exactly, makes a font more accessible.

Side note over. On to the next set of shapes:



For this one, we’re taking that lowercase l and combining it with the third arched shape we made. Put them together, then once again make the spot where the curve meets the stem a little more distinct (just like we did with where the bowl met the stem on the b), and we have a lowercase h. Shorten the stem, and we get the n. Flip it around, and we have the u.

(And I can’t help but look at this image and read it as “huh huh nuh hun,” some sort of dorky laugh. I hear it in my head in the voice of Butt-Head from the old Beavis and Butt-Head cartoon, and now I hope you do too.)

You can even take that n and make it a little less wide, put two of them together, and then you get the m. (I tried making an m out of two full-sized n shapes, and it was just too darned wide. So they do have to be adjusted a bit.)

Not all of the lowercase letters can be created this way, from a Frankensteined-together mess of parts. (For example, the lowercase s was just as much individual work as the uppercase S from earlier.) But you may see other familiar elements appear throughout sets of letters:



Often the f and the t are vertical flips of each other, with just the crossbar moved up or down; and the j can be the same shape with the same curve, just with the crossbar removed. Also, the angled strokes of the v can be modified for the entire back half of the alphabet: v, w, x, y, and z. (I even took the bottom curve of the j, which was a flip of f and t, and used it for the bottom curve of my y.)

Even some of the uppercase letters can spring from the same base:



The Q is an obvious copy of the O, with just the tail added in. But chop a chunk out of the right side, and with some tweaking you have your C. Take the C and add the crossbar, and there’s your G.

Not only does this all make construction of the letters easier for you, but it’s a way to ensure that you have tons of elements of unity between the letters, which is essential in a font this simple. If you had different stroke widths or curves, they'd stand out in a bad way.

Now, how about the numbers?

I’m glad you asked. Because believe it or not, there’s some great recycling that can go on there as well!



Here are the numbers 3 and 2, which both build on a base of the uppercase S.

For the 3, I’ve chopped the S in half, flipped the top half around, then merged the two shapes. You can see from the differences between the third and fourth shapes on that top line, it took shockingly few adjustments to get to that final 3-shape.

For the 2, I’ve started with a flipped S, and combined the top half of it with the bottom half of the Z. It definitely took more adjustments to get those two shapes to merge together well, but starting with those two shapes is so much easier than building the character from scratch. And it adds that all-important unity.

Once these are created, they can also be used as bases for other characters. Looking at that final 2, can you see that you have most of your question mark already made? Or with some tweaks, how flipping that 2 gets you close to £?



Here are a couple of additional numbers made from things we already have. The 3 is practically the 8 already; all it needs is a chop in half, duplication, and flipping your dupe to make sure things are symmetrical. Then by using parts of the S and the zero, you can make your way to a 6. (And you can spin that 6 around to become a 9.) I’m actually not 100% happy with this 6, and will be going back to rework it – it feels a little bit lopsided and uneven. But when I rebuild it, it’ll be from the same parts.

Again, like the letters, not all numbers can be created by using parts of other characters. But for those that use even little parts of others, it can really help tie the font together.

And remember back to the magic rectangle, which dictated the width of the vertical lines and the height of the horizontal lines? In this font, it’s also serving double-duty as the period. And the tittle over the lowercase i and j. And it’s the base of the comma, and is used in both the colon and semicolon. It’s the bottom of both the exclamation mark and question mark. It serves as the dot-over-letter accent mark, and two of them make up the dieresis. That little guy is busy!

Now, I’m far from done on this font. But I have some ideas of where else it can go.



If you have a strong base, there’s no end to the variety of things you can do. These are just some ideas I’ve been throwing around in my head. First is the base R, followed by an extended version, then a super-duper-wide version. I’m also thinking of a condensed, narrower version – having all of these available make it easier for the end-user to utilize the different widths, instead of stretching or squashing the font. (Because remember: stretching a font makes the designer cry.)

On the bottom row, I copied the letter, then thinned down the copy to create an inline font. Then that skinnier version can be brought out on its own, and then you have a layered font. (Type your stuff in the regular version, make a copy of it over the top, then change that top copy to the skinny version. It’d look the same as the inline version, but you can then make that inner line a different color, instead of it being transparent as it is in the inline version.) A version with racing stripes? An outline version? And probably both a bold and italic version of the base font – there are plenty of options to play around with this font to give users a variety of options.

Of course, once the letters are created, that’s just the beginning. Line spacing, kerning, testing – there’s so much more on the horizon. I better get to it!