This post intends to be a journal of my progress with the creation of my own typeface. It’ll be updated as updates are available. You can see the typeface in all it’s glory on its specimen page.
I’ve wanted to design my own typeface for nearly two decades. Now seemed like as good of a time as any. I thought it may be worthwhile to document this process and therefore I’m going to chronicle my process in this post. With any luck, the final update in this post will be when I’m “finished”.
Why write about this? First and foremost, I want to track what I learn through this process so I can refer back to something if I’m foolish enough to do this again. Secondly, I thought this post could encourage others to give something like this a try as well. Who knows, I may just end up with something decent—and if I can do it, anyone can.
In order to prep for my foreray into type design, I watched most of this series on how to use Glyphs to create a typeface. I viewed close to half of the videos, so I’d say success is all but guaranteed.
I chose Glyphs as my tool of choice as it appears to be the best of what I’d say is a mediocre set of options. I spent the first hour or two in a cage fight with the app to understand how to draw paths. It’s fine, but there was still a considerable learning curve given I cut my teeth on Illustrator and still consider that to be the finest vector drawing tool I’ve used.
I’ve decided to design a sans serif for this project because I’m not a complete masochist. I’m unabashedly reverse-engineering existing typefaces to help form my letter forms. The two fonts I’m using as my reference point are Avenir and Helvetica Nueue. Yeah, those are two very different typefaces, but there are distinct stylistic points of interest in each of them. I’d like to pull what I like about each into my font.
I learned that all good typefaces start with the lowercase n, so that’s where I started. I don’t particularly like it.
I think thicks and thins will need more contrast, but it’s good enough for the time being. One nice thing about starting with n is that you basically get h for free. The letter m is a little more complicated. I learned that the first hump should be slightly more compressed than the second. I’m not entirely sure why yet, but I’m just going to run with it.
I’m starting to schedule out a letter (or two for each day). I’m hoping that I’ll be able to put one or two hours a night into this project after we get our daughters to sleep.
OK, so I devised a plan and that’s to race towards a full coverage of all glyphs and refine from there. I’m trying not to dwell on how much work this is going to be—especially when taking weights and italics into account… I’m hopeful that making solid progress in the weeks to come will give me the momentum to keep this going. And speaking of progress, I’ve landed a first pass on over 40% of the glyphs I’m planning to design. Some of them are hot garbage, but they exist and that’s what I’m going for.
Here’s a sample of my typeface interspersed with other commonly used sans serif fonts. No, I’m not going to say which one is mine.
Maybe I’m delusional, but I don’t think my font stands out as clearly worse than the comparing fonts. I definitely see things that need to be improved, but all very doable. I’m also starting to better leverage Glyphs as a tool. It’s by no means sparking joy, but the grudge-match phase is behind me. I’m semi-hopeful that I’ll have a first pass of letter forms complete by the end of the next weekend.
The most interesting tidbit I learned today was that horizontal strokes need to be a smidge thinner than vertical strokes as horzontal strokes appear optically thicker than their counterpart. Note to self: you have a lot of horizontal stroke clean up in your future…
Not many updates for today. However, there are two big takeaways. The first, is that I’m firmly convinced now that I can do this. I can’t guarantee that the final outcome will be anything to write home about, but it will get made.
The second is that I’m quickly coming to the conclusion that I’ll end up having to make a font testing tool for this project. I’m learning that Figma takes some coercing to detect a font update and online tools are fine, but nothing to write home about. I’m looking at the the following resources as a starting point:
I was able to fit in time to get some simple symbols out of the way. It’s the kind of no-brainer task that can happen after a full day of work that doesn’t take a ton of thinking but keeps progress humming. I’m well past the 50% mark in terms of glyph coverage.
I don’t think it’s even worth sharing examples given it would just be a smattering of horizontal and/or vertical lines. Lines are easy. Curves are not. I know I have a lot of pain ahead of me with the remaining lowercase letters.
No work gets done when there’s a sick kiddo in the house. I’m hopeful that I can make some serious progress with the three day weekend.
That said, I’ve been chipping away at some of the simpler symbols here and there before I go to bed. Here’s some of the progress made since Monday.
The more I noodle on this project, the more I know this is just going to take a lot of time.
Today was a big day, so much so that I’m convinced I’ll have a full draft character set by the end of the weekend. I have all capital letters in a first draft phase. Capital S was a pain in the ass and will likely need numerous tweaks to get to a better place.
I was able to spend some general refinements related to stroke angles. I’m trying to limit the number of angles I use to help with overall visual continuity. So far I’ve limited myself to the following angles: 17°, 30°, 40°, 49°, 55°, 60°, 69°, 75°, and 83°
That seems like a lot (and maybe it is), but so far each has felt necessary. I’m going to try to whittle down these angles in the days/weeks to come. There’s plenty to improve upon, but I’m still pretty excited with the progress.
Well, I’m a little more than a little surprised, but I got all my initial characters drawn. The lowercase a and s were major pains and they’ll need massaging. Nonetheless, I never thought I would get this far this fast.
One thing that I put a lot of effort into is to use as few vector points as possible—for a couple reasons. The first is that is makes curves cleaner in general. This is something I learned a lifetime ago when drawing a lot of icons. The second is that it keeps the font’s file size down. Less points, means less information. Less information means a smaller file size.
This was a major milestone and I couldn’t be happier. Next up is building the bold weight for the font!
The sick kiddo got me sick, so I’m not putting any time into the typeface today. However, I started to broach the creation of a bold weight. What I’ve learned is that I have ink traps in my future. My lowercase a in particular is in dire need of an ink trap.
One thing that I’m really happy I did was to design my regular weight to be on the lighter side. I did this because I don’t use light weights a ton and so I wasn’t interested in building out versions of every glyph for something I’d never utilize. I plan to make this font variable and so I’ll likely up the weight a smidge for body copy—which is totally A-OK for me. I’m hopeful this will have cut a ton of time and effort from this project. We’ll see…
Work and sickness have slowed progress down, but major progress has still been made. My big focus has been on spacing. And I’m not going to lie, I leaned heavily into reverse-engineering the spacing of other fonts to speed up progress. Make no mistake, my final result went through my own translation, but I relied on the logic from other fonts to drive me work. This is a big part of why I knocked this out with relatively little effort.
One important note—while I have spacing in a generally decent space, I have not touched kerning. And I know that’s just going to be a ball of yuck. An important yuck, mind you, but yuck nonetheless. Knowing myself, I’ll likely wait as long as possible to do that, so next I’m on to creating the bold weight.
OK, bolding this font isn’t a complete cakewalk, but it’s also not as tough as I initially expected. Glyphs gives you a nice head start with the ability to offset outlines. The big thing to know about font weight management is that you need to keep the same number of points in each weight. Otherwise things break. Luckily, I made two initial design decisions which paid off nicely. The first is that I put a lot of focus in using as few points as possible in each glyph’s vector form. The second is that I started with a pretty thin (perhaps too thin?) stroke thickness for the regular weight.
This meant that there was plenty of room for each glyph to expand without colliding into itself and less points in the vector path meant less opportunities for points being awkwardly close to each other and creating yucky paths. I have had a few issues pop up in the process so far (ahem, lowercase a…) but far less than I thought would be the case.
This weight range is plenty for my needs, and so I’m getting oh-so-close to having Regular and Bold master weights complete. I also toyed with variable font export. And the progress? Well, look for yourself.
On a completely unrelated topic, I once again need to give a tip of the cap to Remotion which enabled me to programmatically animate the font weight of my typeface and then render as a video. Such an amazingly cool tool that I plan to utilize quite a bit in the near future.
I’m hopeful I’ll have weights in a first-draft form by the end of the weekend. I never would have imagined I’d make this far by this point.
No major updates from today, but I do have my first regret which is to not have accounted for ink traps earlier on. I now have a ton of retrofitting of existing glyphs to include ink traps. I’m hoping like hell that doesn’t break anything…
I also have a roster of characters that need to be unhit by the ugly stick. Namely, a, e, m, 2, 4, 7, and &. There are plenty others, but those are the most egregious—especially the m.
So, this weekend will be all about bolding, ink trapping and un-uglifying some key glyphs. I’m crossing my fingers that I make decent progress.
Well, I did it. I finished up the bold weight for all glyphs in the typeface. Glyphs made this about as easy as you could expect. The unnerving part of this process was joining all overlapping shapes of each glyph into a single path. That was a point of no return.
The lowercase a was a complete pain in the ass to get working due to the bold weight’s paths getting modified during the bolding process. Learning how to debug that was a whole process in and of itself. Many, if not most glyphs were easy-breezy though.
In addition to finishing up the first pass of the bold weight, I also un-uglied some of my worst offending designs. Below are below/after/difference screenshots.
Lowercase a had one curve that were way too strong. I chilled that out and while the change is hilariously subtle in the image below, I think it makes a big difference.
Lowercase m was one of the first letters I made and it shows. The point between the two humps was way too low. That got resolved.
The number 2 was far too curvy. I made it so that the bottom was more orthogonal. It feels far more stable now.
Number 4 was just too narrow. I widened it up a smidge to appear more balanced when paired with other numbers.
Number 7’s thins were just too thin. I just reduced the line contrast a bit.
So, now that those are done, I need to chip away at my new least favorite glyphs, namely &, ?, and 3. I also plan to italicize the weights next. I’m honestly a little dumbstruck that I have a semi-working typeface in this amount of time. With any luck, I’ll have something really fun to share tomorrow.
Italics: Check. Kind of.
It turns out Glyphs makes it really easy to auto-magically italicize a glyph, but there clearly needs to be some more human TLC put into this. This phase hasn’t hit the TLC phase, but it’s nonetheless great to have basic italics added to the font.
Here’s an example of italicized text.
I’m able to render out what italicized text looks like directly in this post because I’m now using the font on this blog. I’m going to have to alter the design a bit more to optimize for the new typeface. I’ll get to it.
One thing I’ve been working on behind the scenes was to build some tools to proof each glyph. There were some existing tools to export proofs as a PDF, but that just didn’t sit well with me. I wanted something more web-based to proof the typeface given it will primarily be displayed on the web. So, I wrote some build scripts to generate generic HTML that can be styled to proof a typeface. I’ll share what I have on pjonori.codes once it’s a little cleaner.
Until then, I had the chance to style my proofing HTML into a showcase page for the typeface. Given this is my first typeface, I’ve named it Olivia Sans after our first child. I never had wild aspirations for this project. I simply wanted to make a typeface I liked that would hopefully be something my daughters could use for their own creative projects. As far as I’m concerned, that’s success.
And yes, our second daughter is already lobbying for her own font. I’m hopeful there’s a Gianna Serif in her future…
Oh man… Kerning… This is just going to be a lot of work. I’m using the Glyphs’ kerning tutorial as my starting point. My guess is this is going to just be a pain in the ass. I’m hopeful I’ll have an update by the end of the week.
Thanksgiving and some family issues made updates a little thin since the last post. However, I did put an ample amount of time into kerning. And, it’s much better than what it previously was. Most of the work was around how a, c, e and o sat next to F, K, k, P and Y. There’s still plenty to work on, but it’s less glaringly awful.
Kerning is a trudge at baseline, but the fact that kerning values cannot be automatically be applied to all masters makes it even worse. Luckily, there’s a script to copy all kerning values to all masters. I used the following script graciously shared here:
sourceMaster = Font.masters[0]
targetMasters = [Font.masters[1], Font.masters[2], Font.masters[3]]
sourceKerning = Font.kerning[sourceMaster.id]
for targetMaster in targetMasters:
targetKerning = sourceKerning.deepMutableCopy()
Font.kerning[targetMaster.id] = targetKerning
So, now words like “walked” should look much better than they used to. I will continue to chip away at kerning, but it’ll likely be small, continuous improvements as I see them as opposed to some big Kernapalooza event.
On another note, I’ve been working to clean up my scripts for generating typeface proofs. My goal is to release the code—I can’t guarantee it’ll be useful, but it worked for me.
It’s becoming a game of nanometers now where I’m making smaller and smaller adjustments to individual glyphs based on how much they annoy me. Lowercase a will likely be in perpetual improvement mode. I look at Helvetica’s lowercase a and if I can get even infinitesimally close to its form, I’ll consider it a success. I finally isolated the thing that has been driving me nuts—the top and bottom of the letterform weren’t balanced. The top was far too recessed and once I pulled the two closer it immediately looked better.
I was also able to remove an unnecessary point from the vector path, so not only did I improve upon the form, the font file size is now just a smidge smaller as well!
No typeface updates, but I did end up publishing the generator script I used to make my Olivia Sans specimen page. It’s rough, but it’s a start. I hope to make improvements as this project progresses.
As you can see, updates are slowing down because progress is slowing down. I’m officially in the tuning phase. I cleaned up the ampersand, question mark and some really subtle adjustments to the number 3. I also found a stray spacing issue with my lowercase y. All of these are minor, but they’ll no doubt add up.
One big update and a small one as well. I finally took the time to learn how to properly export the font. I now have a functional typeface that I can use in my design tools. That’s been bugging me for some time. While it’s not a direct improvement to the design of the font, it’s pretty damned important nonetheless.
The smaller update is that I improved upon the number 2. In all honesty, nearly the whole range of numbers need work, but I’m glad I have one in a better place. My guess is that I’ll be making numerous improvements to all numbers in the following weeks.
I made some minor updates to the numeral 3 and uppercase K. Both glyphs were only minimally adjusted to be completely honest. Italics remains a hot mess. That will be the next big focus in the new year.
Progress has slowed as you can see, but that’s because the typeface is meeting my needs for the most part. The italics remain a wart on the overall design, and so I recently cleaned up the uppercase P and the numerals 2, 3, 5, 6, and 9. That addresses most of my discontent, but there’s obviously ample room for improvement. Here are a couple that come to mind:
So, progress has slowed, but there’s still plenty to do. I also have hope that I’ll eventually break ground on a serif font.