Jason Burkholder
Jason Burkholder

Writing

How to design your own custom font

type typography anatomy font attribute design jtb jason burkholder.jpg

Over a decade ago my aunt told me there’s a service that converts your handwriting into a type-able font . Back then it required printing out a form, filling out multiples of each letter by hand, snail-mailing it out, and waiting for god-knows-how-long. Now you can do it all in a day for free. Whether your motivations are personal or professional there are really powerful tools out there to help you create your very own font with minimal effort. Here’s what you might need for varying desired outcomes:

  1. For a personal level you only need a pencil and paper.

  2. For a professional level you need an understanding of the anatomy of typography.

  3. If you want it to be digital, you need a basic design software (Sketch or Illustrator)

  4. If you want to be able to type it on a keyboard, you need a font editing software (Calligraphr or Glyphs)

  5. If you want to sell it, you need a marketplace (Your website or Creative Marketplace)

You’ll learn how designing 4 good letters will get you 90% of the way towards a professional font. What you’re about to read isn’t a science as much as categories and exercises to produce a good font. Everyone’s process will vary greatly, and what works well for me could in fact be detrimental to you. Read ahead with your habits, skill-set, and bandwidth in mind. I’ve broken my experience down into 6 categories:

  1. Sketching

  2. Digitizing

  3. Replicating

  4. Playing

  5. Refining

  6. Exporting

Sketching (LCPX)

First realize that there are three basic shapes of font characters: [R]ectangular (EFHILT), [C]ircular (CGOQS), and [T]riangular (AVWXZ). All letters and numbers are constructed from these basic shapes and some by combinations of them ([R+T]: KMNY, [R+C]: BDJPU, [R+T+C]: R). The importance of noticing this is that if we design one letter from each basic shape [R, T, C] then we have the back bone to create the remaining letters in that shape before advancing to the shape combinations. Second, determine what type of font you want to make. If you are simply looking to digitize your handwriting, I’ve written a paragraph below about that. If you are going to design a professional digital font, the bulk of this post is for you my friend.

Sketches for California

Sketches for California

If your goal is a handwritten font I suggest writing standards (like a chalkboard). Using a black pen or heavy pencil, write each letter (and number) of the alphabet over and over without erasing. Write 10-15 “A’s” in down in a column, then 10-15 “B’s” and so on through Z’s and 9’s and any punctuation you would like to include. If you’d like to use measured guides to keep things even, draw your guides almost invisibly and make sure to use a very lightly colored pencil (like yellow or pink). This will make transferring it to the computer much easier. Writing your font in standards will give you a stock pile of letters to select from as well as refine your work through replication and playfulness. (see image)

If your goal is to make a digital font, sketch for ideas but not for perfection. Sketching is a medium best suited for generating free form ideas. Switching to a computer early on saves time and headaches. Don’t sketch your entire alphabet on paper perfectly! Don’t do it, because you’ll spend all that time over again on the computer. Instead, pursue the feeling and character of your font on paper, or sketch small elements like serifs, ascenders, curves or angles. When you find yourself excited to move a couple ideas forward break from the page and move to the screen. You can always hop between the screen and the page as often as you need but remember that you’re making a digital font and computers are awesome. Copying an element digitally takes a fragment of a second, redrawing or tracing an element by hand could take an hour. Remember, there are 52 letters in a font (upper and lowercase), 10 numbers, and 30+ units of punctuation. Work smarter not harder. Exercise: Time to sketch some letters: “L”, “C”, “P”, and “X”. Draw some basic guidelines: your cap-height and median (x-height), to explore letterform height ratio and how high to place your crossbars. Then start with an uppercase “L”, drawing it a few times across your guidelines. Each time changing one or two elements (thickness, lengths, serifs) to see what you like and don’t like. Now do the same for an uppercase “C”, “P”, and “X” — try to recreate these new letter using elements you liked from your first lessons learned. Pay attention to angles, curves, and thicknesses that you like, taking note and applying those to the next sketches. Hone in on consistent patterns, these will make up the characteristics of your font ecosystem. You will be using these specific letters replicate more quickly and create a design fingerprint across your font. Once you have these 4 letters that you (at least sort of) like it’s time to digitize .

Digitizing (5 min per letter, total 20 min)

Get your sketches onto to your computer and into Sketch (or Illustrator) as simply as possible. Take a picture on your phone and airdrop, text, or email to yourself. The quality just needs to be good enough see the edges as lines not a blocky pixel staircase.

designing your own custom font

Exercise: Tracing. I like to use single lines to create my letters and adjust the line’s thickness to match my sketch rather than tracing the letters outlines with the pen tool. The reason? Consistent letter thickness and simple adjustments to the angles and curves when we replicate and refine. The goal of digitizing your font is to get its basic shapes into a vector format that can be scaled, duplicated, manipulated, and rotated without losing any consistency, quality, or resolution. Try and keep the different limbs of the characters separate for now. Using the uppercase “P” as an example: create the stem and shoulder separately and keep them as independent shapes for now.

What about letters that have varying widths in their limbs? Excellent question, here’s a good hack:

  1. Create a new line with its thickness set to the thinnest part of the varying width

  2. Trace it against the inner boundary of your letter’s limb

  3. Clone it and drag it to the outer boundary

  4. Clone a third line if needed to fill any gap between

  5. Group these 3 lines together (just the shoulder, not the stem)

how to design a digital font

A quick reminder, you’ll be re-using these building blocks as much as possible as starting points for other letters. Think of this Digitizing step as “digital play-doh:” empowering you to create cookie cutter clones, piece building blocks together, and change each slightly as you wish. Looking closely at any font you’ll realize that groups of letters behave very similarly. You want to capitalize on and exploit these similarities to your advantage. Visually speaking a “W” might better be named “double-v” not “double-u”. All fonts are different, but all fonts individually are consistent. Remember that you’re creating a visual ecosystem. Ok, now that you have you 4 letters quickly digitized it’s time to move on to Replicating .

Process work for my L, C, P, X. Not nearly perfect, but that’s ok.

Process work for my L, C, P, X. Not nearly perfect, but that’s ok.

Replicating (1 hour per case)

This is the fun part. The reason why “L”, “C”, “P”, and “X” are so important, is that with those 4 shapes you can get 22 letters just by leveraging the design you’ve already made. Here are a few things to keep in mind while replicating:

  • You want to get from “A” to “Z” as quickly as possible.

  • Get each letter to a point that is “good enough” and fixable later.

  • Clone curves, verticals, serifs, etc. Reuse as much as possible.

  • Try and make letters from existing limbs, if you don’t like it flag it to change later and move on.

  • What follows are patterns I discovered while designing JTB-California, they may or may not work on a direct 1:1 relationship with the limbs of your letters, but you might find an entirely new and better pattern! (which is the goal)

There’s value to seeing your letters evolve into an alphabet, you’re “A” might evolve after your make your “R” or “V”, but you’ll never know that if you spend all day perfecting your “A”. Just by getting through the alphabet quickly you’ll notice which letters are solid and which need more attention. Try to avoid getting caught up perfecting a single letter, and instead try and move your font forward collectively in waves. Below I’ve made some GIFs showing my replications in real time for each letter. I’ve color coded all unique limbs so you can really see how a few elements can scale into an entire alphabet. I wish I had used guidelines in my replicating process, it would have saved me a lot of time in the refinements step. This shouldn’t be prescriptive for your process but hopefully thought provoking on how to design a cohesive font that self-referenced and iteratively evolves towards awesomeness!

Replicating an “L”

You can leverage the basic limbs of your “L” to create 5 more consistent letters in under a minute. Like a time bandit you’ll steal back hours of your design day!

An uppercase L can scale to 6 letters in less than a minute.

An uppercase L can scale to 6 letters in less than a minute.



Replicating an “X”

This step has two parts. To start, clone your “X” to create your “N, Y, & K”. You’ll also need elements from your “L”. We’ll worry about uniting the various limbs and final treatments in the next section. The goal here is to get rough shapes down for each letters using consistent angles.

An uppercase X scales to 9 letters, but takes two parts.

An uppercase X scales to 9 letters, but takes two parts.

Next, convert your X into a V (adjusting the angles slightly) and use those new angles to make: V, W, A, M, & Z. Time to make that “double-V” we talked about.


Part two, convert your X into a V and use those angles to make: V, W, A, M, & Z

Part two, convert your X into a V and use those angles to make: V, W, A, M, & Z

Replicating your “C”

The target here is replicating your “C” into a “G”, “Q”, “O”, & “D”. Borrowing angles and stems from your X and L. In this variation I’ve flipped the “C” to reflect it on a diagonal axis to complete the “O” and “Q” as well as the bowl for the “D”.


Replicate Circular Letters Font design jason burkholder.gif

Replicating your “P”

Use the bowl and stem from your “P” to quickly make a rough “B” and grab a diagonal from either your “X” or “V” to complete your “R”.


Replicate combination Letters Font design jason burkholder.gif

Take deep breath and a step back. 23 letters down, only 3 more to go to close out the uppercase. “S”, “J”, & “U”. Generally speaking your “S” will need to be constructed with entirely new lines. However keeping in mind what you learned from replicating and building your initial “P”. I’d suggest drawing a single line for your “S” and duplicating for line width variation, or simply keep a single line for a consistent thickness—your font, your call.

Ultimately I thought this was a bit top heavy so I iterated and widened the base.

Ultimately I thought this was a bit top heavy so I iterated and widened the base.

To get my “J” I borrowed part of the curvature from my “C” and rotated it 20˚ to match the stem.

Replicate J Letters Font design jason burkholder.gif

Of all the characters I designed the “U” gave me the most trouble. I probably spent an hour on it alone. What I learned was I was trying too hard to solely compose it from existing limbs and was failing by over complicating it (as seen on the far left). But I tried a few options out that ultimately led to a simpler letter that worked well alongside the rest of the alphabet. But I’ll get more into that in the next section on being playful.

create your own custom font

Playing

Remember you’re building a font ecosystem. Playing is an exercise to strengthen your font. I was only able to conclude the “U” after placing it next to other letters and seeing how it looked when spelling out words, it made it clear what I needed to get to in terms of width, weight variation, angles, and balance. The “U” reminded me I was designing a font and not just a single letter. I encourage you to constantly be playful throughout your font design process. I also suggest having a “playpen” so to speak, for all your playful variations to live. This could be a separate artboard or page. That way you can keep things organized and create a bit of a mood board as you play while retaining some structure and cleanliness to where you’re actually building your font.

In this section you’re going to want to have each letter as its own group. I prefer to have my alphabet spelled out in a single row and copy the source letter and pasting a clone in the playpen to experiment and explore with, while preserving a source-file for each letter. A fallback in case you change an angle or line and want to revert back to the original. Keep your source letters in a row and clone them down for variations. Last thing to do before you start playing is group and name each letter together (i.e. group all limbs that comprise your “A” and name the layer “A”), and make sure they’re all the same color.

design your own font

Basic ideas for being playful:

  • Spell out words (Musicians, posters, book titles, etc)

  • Make imaginary logos

  • Create patterns (by combining letters on top of each other)

  • Place your type on images

  • Play with color, scale, and rotation

Here is what my “playpen” looked like. Anytime I finished a letter I took a quick trip over to the playpen.

Here is what my “playpen” looked like. Anytime I finished a letter I took a quick trip over to the playpen.

Clockwise from upper left: (8,9), (B,C,D), (S), (&), (C,S), (A,C,J)

Clockwise from upper left: (8,9), (B,C,D), (S), (&), (C,S), (A,C,J)

Each shape was pulled from the negative space of the letters

Each shape was pulled from the negative space of the letters

Title across a linocut print I made:  check it out here

Title across a linocut print I made: check it out here

Motioned blurred letters atop a film photo I took in upstate NY.

Motioned blurred letters atop a film photo I took in upstate NY.

A throwback to my roots. LA, CA. I achieved the rising sun from the interior of the “O”. T-shirt anyone?

A throwback to my roots. LA, CA. I achieved the rising sun from the interior of the “O”. T-shirt anyone?

San Fran, with a nod to the golden gate made from J’s

San Fran, with a nod to the golden gate made from J’s

Refining

Now that you’ve got a consistent alphabet, it’s time to focus on the details: edges, corners, and angles. During this stage I found it extremely helpful to realign my alphabet onto a set of guidelines. As I fine tuned it was necessary to have those reminding constraints. Once I started playing around with my font I immediately realized which letters were good to go and which ones needed some refinement—take note of the ones that need help for easy reference for refinement. The main things to focus on during this pass at your font are: balance, consistency, and parity. Up until now your individual letters are likely pretty scrappy from replicating, now’s the time to readdress those and tighten them up.

Here are a few tips that came up during my refinement stage:

  • Adjust terminuses to align #balance

  • Treat the edges, corners, and angles #consistency

  • Place adjacent to and overlay your letters #parity

  • Clone alphabet and then outline all strokes and merge into a singular letters

Below are some examples of my letters before and after refinement:

Before and after refinement

Before and after refinement

Exporting

Now the final step. Personally, I worked exclusively in Sketch, and with each stage of the process I created a new page to house the next iteration of my font. I found that Sketch handles merged shapes by keeping all the original shapes in a nested layer within the new shape. This was causing some trouble when I wanted to adjust a single contour line that was the result of multiple joined shapes. As a workaround I needed to batch export all letters as .svg files and reimport them all in order for each letter to truly be a singular shape. Once I did this I was able to make small adjustments a whole lot easier. I don’t believe this is necessary in Illustrator. Once you have your final letters in a comfortable state, I suggest going through and naming each letter appropriately.

The next and final step is to get this custom designed font into a font file you can install and start typing with. There are a few ways to do this, but I’ve included the easiest route: a free software called Caligraphr. First, based on the amount of characters you designed, you can tailor a custom template on their website to download with only those characters. Then place your letters on the template and upload a Caligraphr template to your design file (resource below) and place each letter into the correct box making sure each letter is aligned evenly. Then export that artboard as a .pdf and and upload it directly to Caligraphr, from there you can adjust your font in the browser or simply download the font file. Finally install it on your computer and start typing away with your newly design custom font! Below is a list of 7 steps I took to start typing with my newly designed font.

Simple steps on Caligraphr:

  1. Create a free account

  2. Create and download a custom template based on the character set you’ve designed

  3. Insert your template into your design file and place your letters in the template

  4. Triple check your letter’s horizontal and vertical alignment within the boxes of your template

  5. Export your completed template and upload it to Caligraphr (uncheck the “automatically clean templates”)

  6. Finally “build” and download your font from the “My Fonts” page.

  7. Double click the .otf or .ttf font file and install it to your machine and voila!

Jason burkholder creative director typgraphy designer create a custom font california.png

I’d love to know if this was helpful, or how I could improve it to be even more empowering. Not all the techniques I’ve outlined above will directly translate to your font style, but my hope is that in theory you’d be able to draw something useful to fuel your own font design. If you’re interested in downloading California for your own usage you can do so on HERE.

Jason Burkholder