Creating a Font from Geometric Shapes: Part 3

Creating a font from geometric shapes, part 3

Character construction continues! I’m not going to get into every single character to show how it’s made from either the basic geometric shapes, or from parts of previously made characters, but I do have a few to share that I thought were the more interesting items.

First off, let’s not forget that there’s punctuation to create as well! Some seem easy (for the pound/hashtag, it’s just two wide strokes and two narrow strokes), but some are more of a challenge.

Creating the braces from a small O and a circle

Here I made the braces (also known as curly brackets) from the larger of the two small O shapes cut into quarters, plus some of the smaller circles. I was super proud when I figured this one out.

Some of the numbers are easier, while some are weirdly difficult.

Creating the 2 figure from a Z and C

For the 2, I used the bottom part of the Z (which got its bottom part from one of our first letters, the E) and combined it a top I got from rotating the C by 180 degrees. I tried it with the serif end as well, but I preferred the look of the rounded end.

Now, some weird math:

Creating the 3 figure from two of the 2 figures

This is likely the only time where 2 plus 2 equals 3. I chopped the curved part out of both 2s, then did some serious smoothing and tweaking where the two meet. I also used one of the smaller circles for the “point” at the center of the 3.

Making the 5 figure from a pile of other shapes

The 5 was definitely my least favorite number to create, because it has a LOT of weird parts. And as it’s shown here, it still isn’t finished; there’s still a ton of nudging and small adjustments to be made. I highlighted the parts of the 6, E, and 3 that I used to create this Frankenstein’s monster.

How about more punctuation?

Creating the ampersand from the 3 and tilde

I love, love, LOVE ampersands. I’m going to link you to a brief history of the ampersand, if you’d like to head down the road of ampersand-obsession with me. But for those who want it simple, the ampersand (or “and sign”) is based in the combination of the letters E and T. Some of them make that “ET” shape really obvious, while others aren’t as clear.

I’ve opted to follow Cooper Black’s lead, and go with the rounded E with a curly crossbar at the end (to fill the role of the top of a T). I’ve flipped the number 3 horizontally, then pulled out the tilde accent mark I have. I didn’t share the making of that tilde, but you’ll also see evidence of it in the tail of the Q!

This is another character where it’s close, but needs a few more tweaks.

This one really baked my noodle for a while:

Creating the at sign from small and large letters O

The “at” sign is a complicated little booger. I started with the full-size O, and the smaller of the two little O-shapes. I gave the smaller O a wee bit of a stem at the top to make it into more of a single-story lowercase a shape, chopped apart the lower right corner of the larger O, and then did a bit of finessing, curving the side of the O around to connect and create the bottom part of the a’s stem.

This one needs a lot more finessing. In fact, I’ve not only made a lot of small corrections to it since I took this screenshot, I popped back in mid-blog-post to tweak a couple more spots.

Sterling character from the number 2

Next up, an interesting currency mark. The dollar sign is just an S made slightly smaller, with stems out the top and bottom. Likewise the cent sign with a C. Boring! The Yen sign is an uppercase Y with the equals sign laid over the top. But the Sterling character is totally its own thing! A fancier L with a curved top and a crossbar.

I cut a 2 in half, flipped the top around, reconnected the two parts, and smoothed them into a gentle curve. Then I took one of the simple serif bits, put it in there, and curved the connections.

Creating small figures from larger ones

Last for the creation images today: did you know that fonts should have some small numbers in them as well? I took the full-size 2, which measured 800 units high, and bit by bit simplified and shrank it down so that it’s 500 units high. It’s a far simpler shape, but it keeps the same line widths as the rest of the font, so it fits in.

On its own, this wee 2 will appear if you ever refer to an item as squared: 3²=9. In a font, it’s called “twosuperior.” I’ve also used the same 2 as the base of the one-half character.

(Ooh, and see the arrow? Yep, I’ve included four directional arrow characters. Two serif bits set at 45 degrees up and down, then our thinner stroke for the shaft.)

So now, we have a full set of letters, numbers, and basic punctuation!

Testing out characters for weight and balance

(You can see that tilde showing up in the tail of the Q here.)

This, by the way, is my favorite pangram: “Amazingly few discotheques provide jukeboxes.” All 26 basic Latin letters are included at least once, it’s only 5 words long, and it actually makes sense!

So what’s next? Tweaking galore. I’ll be doing two things side-by-side: adjusting the spacing around each character, and adjusting the width of any strokes that seem too heavy or light compared to the other characters. The spacing will be more basic at this point, so that letter sets like HOHOHOH and NONONON are evenly balanced. Kerning is a different process that comes afterward, where specific pairs like AV or WA or LY are balanced with each other so that they don’t have gaps you could drive a train through. (I mean, look at the last two letters of AMAZINGLY up there. Gross!)

** Onward to part 4, the final post in this series!