Creating a Font from Geometric Shapes: Part 4

Creating a font from geometric shapes part 4

I’ve been slacking like mad on getting this final blog post written; you get near the end of making a font, and you just wanna get the dang font made, you know?!

When last we spoke about this process, we’d finished constructing the letters, and it was time to move to spacing and kerning.

Spacing adjustment letter strings

Spacing is first – setting the optimum left and right margins for each letter. Fortunately, at least for the uppercase, you can figure out the best spacing for rounded letters like O and straight-sided letters like H, and then use that same spacing for other letters in those classes. The spacing that works for the left side of O will also work for the left side of C, G, and Q. The spacing that works for the left side of H will also work for B, D, E, F, L, M, N … the list goes on.

Once the basic spacing is done, then it’s time for kerning.

Kerning demonstrated in an animated GIF

(Note: This image is an animated GIF. I have no idea if this will show correctly in this blog post!)

Some letters don’t need much kerning – HIKE here is nearly good to go. CHOP needs a bit of nudging, and AVOW has so much extra space between the letters, you could drive a truck through there. This is why we kern! Serif fonts also take some extra care in kerning – if that H in CHOP just had a straight, flat side, spacing would be easier. Because of the serifs, we need to move the O in a bit closer, so it kind of snuggles in between the serifs and gets closer to that vertical stem.

Kerning is half math, half using your eyeballs and judgment. I could calculate the number of pixels I need to move a letter over, apply that, and sometimes it just doesn’t quite look right. I mean, look at the KE in “HIKE” up there. You’d think they don’t need to be moved; the tips of their serifs are the same distance apart as HI and IK. But because the E has a ton of real estate along its left side, and the K has barely any, they feel a little too far apart, and need to scoot slightly closer together. Good kerning is practically wizardry, and I’ll readily admit, I’m far from being a wizard. But I do my best.

Throughout kerning and spacing, you should always be looking back to your test paragraphs.

Basic text testing paragraphs

Especially if you let your eyes unfocus a little bit, you can catch small spots where letters are too close or too far apart, and need additional nudging.

I also made a few additional characters for this font:

Creating small superscript ordinals

I’ve never done ordinals like this before; it honestly never occurred to me. But we had passed by a store with a big “4th of July Sale” banner, and the “TH” was smaller and thinner than everything else – they’d clearly just typed it out in regular letters, then sized it down. To avoid that, I made properly-weighted ordinals here.

I also like to make around 300 extended Latin characters, for language support. Fortunately, the Font Creator program makes it really easy. It takes the basic letters you’ve already made:

Composite parts - basic letter shapes

And a set of accent marks in their own spots:

Composite parts - set of diacritical accent marks

And if you right-click on an accented character spot and select “Complete Composites,” the program will take the base letter from one spot, and the accent mark from the other spot, and throw them together into the accented character spot:

Automatically created composite accented characters

Granted, you’ll likely have to nudge those marks around a little bit; it may automatically put them in a little bit too high or too low, or off to the side, depending on the shape of your letter. But it gets close, and it’s a HECK of a lot easier than having to copy and paste the two parts in by hand for 300 of these suckers.

Font Creator also makes kerning those extended characters easier, if you set up kerning classes:

Kerning classes help make kerning less terrible

Here you can see that I have 12 items in my “A_upper” kerning class. It’s all of the letters A with accent marks over the top, as well as the plain A. This allows me to say, basically, “if any of these 12 characters is next to a V, move them 50 points closer together.” You can make your spacing consistent across all of those letters, so you don’t need to kern each of those 12 letters A next to the uppercase V.

As I brought the base font near completion, I decided I wanted to spend more time with it. I wanted to make a heavier version and a lighter version, to offer lots of variety.

Making different weights from one base letter set

Here, the middle TESTING is the basic one. In order to make these letters bolder or thinner, I widened or narrowed the thick stroke consistently across letters. (I didn’t make any changes to the thin strokes, which is fairly common. Look at Times New Roman, then look at Times New Roman Bold – only the thick stroke changes. The thin strokes and the serifs remain the same between the two.)

This was pretty fun to do:

Animated GIF showing how to resize to different weights

(Another animated GIF!)

For almost every letter, it was a matter of leaving the points on the left edge alone, and grabbing all of the other points and nudging them right or left.

This pretty much covers the construction of the font from geometric shapes. There are more steps to the font-making process, of course – naming, creating promotional images, discovering unexpected letter pairs that need to be kerned during the promotional image-making process, and so on.

I love naming fonts, so I’ll touch on that briefly. I try my hardest to find a name that suits the feeling of the font, whether it’s more formal or more playful, or somewhere in between. Since this is a more straightforward font (though the lowercase has some fun twists to it), I didn’t want a name like “Fonty McFontFace”; I wanted something a little more mainstream. While out driving here in the Phoenix suburbs, I passed by roads called Greenfield and Williams Field, and the word “field” stuck in my head. I made a big list of compound words ending in “field.” A few of them were already being used as font names, but “Berryfield” was available, and I liked it!

So that’s how my Berryfield font came to be! Here are a couple of the promo images I made for it, because I love making those too.

Berryfield promo image - a set of t-shirts

Berryfield promo image - a fake magazine article

I had a great time making Berryfield, and sharing its secrets with you!