The Story of Campy the Typeface

This post isn’t about camping. For most Campnab members, this article will be pretty dull. So, unless you want to read 3,306 words about the time I built an amateurish type family, you might want to skip this one.

Goodbye, September!

The past few months have been a blur for me. What I can tell you is that at some point in September, I saw this item in my task list:

When I next looked up, it was mid-October. In no scenario does that time investment for a custom typeface make a lick of sense. Then of course, few of my life choices do. This type design project is another example of what happens when my lack of priorities collides with my obsessive-compulsive tendencies.

All of this began from a reasonable spot. I had recorded a handful of videos like this one:

Since these videos were pretty boring, I thought I’d dress them up with some drawings and bits of text.

Campnab is a two-person project, and we’re very hands-on. Incoming calls ring to my cell phone (even when I’m out skiing). Eric and I personally respond to all chat requests. I figured that a kind of hand-made look and feel fit with our nature.

I also thought a boiling line effect (a simple technique that animates drawings) would help. What I didn’t realize was how long it’d take to draw all of these. Actually, draw them twice to achieve that animation effect. With each new video I made, I regretted this decision even more.

So, instead of hand drawing all of this text, I thought I’d design a typeface to save some time. I figured that I’d “keep it simple” (famous last words). My initial thought was to create a basic Latin alphabet in a single weight—with an alternate to create that boiling line effect.

It seemed pretty easy at the outset

I started designing some typefaces ~20 years ago in Illustrator. Although I didn’t complete those projects, I treated them seriously. This time, I did not. Campy the font started with the idea that I’d “digitize my printing”.

After searching for tools to help me do this, I found Fontself. This app is an extension that runs in Illustrator, allowing novices like me to create a simple typeface. I installed Fontself, read their instructions, watched some tutorials, and gave it a go. For $39, I figured I had little to lose.

The first pass went smoothly. I opened Fontself’s included template and started hand printing each glyph. I then exported the hand-drawn glyphs to my iPad as a PNG. On the iPad, I opened up Procreate (which I love) and started printing out my letters using Lisa Bardot’s Bardot Brush. Here’s how it looked:

Once I finished drawing each glyph, I exported the drawing back to my Mac. With it on my computer, I traced the drawing using Illustrator’s built-in Image Trace function. I kept the drawing big when I did this so that the tracing didn’t get sloppy. (I find that Image Trace results in messy feeling results when the source file is too small).

From there, I used the Simplify tool (in Object > Path) to remove some unnecessary vector points. This process took some fiddling to get right. On one end, it seemed like the process removed almost no points. On the other, it eliminated so many that the results were pretty ugly.

And that’s when I got carried away

I think typefaces are a bit like software. The first time I set some type in my own font, it felt like I was running a program I built for the first time. I know that they’re only shapes, but it felt like magic.

My mind started racing. What if I created additional weights? Should I make a matching emoji font? Could I add outlined versions? What about all of those non-Latin characters? Extended? Condensed? Display? Ohh, this could be fun.

I added another weight and ran some tests of it in use. I then showed a sample to a few friends. It looked like this:

Eric seemed to think it was pretty neat, but I knew he could feel me going down a rabbit hole. Hans noted that he often needed a font like this: something that felt hand-drawn but wasn’t too wonky feeling.

Patrick suggested adding crossbars to the uppercase I to avoid confusion with lowercase Ls. (I later chose against this as it felt less like how I’d actually print that letter. So, I curved the bottom of the lowercase L to address his concern.)

Too far to turn back

From that point on, I’m not quite sure what happened. It was just days of drawing, importing, refining, and reworking. At one point, my friend asked me to go for a bike ride. Here’s a screengrab from that chat session:

The following month (plus) somehow dissolved on me. Every day, I’d start thinking, “why don’t I just push a little further and then call it.” At the end of each day, I’d made some progress—typically enough to realize just how long I still had to go.

There were no evenings or weekends. Whenever my wife talked to me about this project, she gave me a sympathetic look. You know the one? It seems to indicate that she married a guy who couldn’t overcome his obsessive tendencies. I didn’t think it was really about obsession, though. Instead, I just didn’t know how much work I had left.

Have you ever heard the joke about the Norwegian, Swede, and Finn who took part in a swim race across the Gulf of Bothnia? The Norwegian swims 100 km, realizes the distance is too great, and swims back. The Swede gets 250 km before turning around. The Finn makes it 3/4 of the way across before deciding that he can’t make it… and swims back home.

That’s how this project felt. I didn’t know if I was 100 km in and should just give up or if I was so close to shore that I needed to push on. The further I went, though, the worse I felt about throwing away the time I’d already invested.

That said, every morning, my Mom and Dad received an email from me with the same general message:

Building systems is 20/80

Do you know the Pareto Principle? It states that “roughly 80% of consequences come from 20% of causes”. When it comes to creating a type family, I think there’s a sort of inverse corollary. It suggests that you’ve completed roughly 20% of the work when you can see 80% of it.

Drawing letters and converting them to vector shapes was one thing. Each shape was then labeled accordingly, pulled into Fontself, and the app then spat out a font file. (Another neat feature was how clicking one button in it can auto-space and auto-kern all of the glyphs. Magic, I tell you! MAGIC!)

None of this work is complicated; it’s just time-consuming. Fontself’s provided template contains 208 glyphs in the Basic and Advanced Latin character set. Campy has seven weights. So, making one across-the-board change to the family (assuming 30 seconds per glyph) could take 728 minutes. Oh, right, then there’s the italic for each weight. Make that 1,456 minutes (or ~24 hours).

Sure, I didn’t need to apply most changes universally to every single glyph. That said, sometimes I did. For example, I hated the idea of having unnecessary vector points create file bloat, so I manually redrew almost every glyph. I learned that redrawing one in less than a minute was pretty fast.

Consistently inconsistent

The question I kept asking while refining this type family was: “How much is too much?” I knew that too much variation in each stroke made the text set in Campy harder to read. Conversely, as I cleaned up each glyph, the fonts felt less hand-drawn and interesting.

For this reason, I avoided creating one glyph and essentially “thickening” it for heavier weights. I reasoned that if I instead drew out every single letter, the family’s varying weights would all feel unique.

However, this brought back that consistency issue. So, I overlayed each glyph in its respective weights, looking for significant conflicts. For example, I figured the tail of a Q could either extend from the stroke, or run through it—but it needed to do so consistently in all weights.

I fought with weights and variation at length. For each weight, I’d set long blocks of text and squinted. Doing so helped me isolate which glyphs stuck out or felt like they were disappearing. I then tweaked each inconsistency to reduce the variation between stroke thicknesses. I even set up rectangles that I dragged from one glyph to the next. These helped me gauge how far out each stroke was from the rest.

Jumping between weights was also a bit awkward. The iPad’s pencil is pressure-sensitive. This variability meant that some weights felt heavier than they should—because my hand varied from one to the next.

So, I set large swaths of text and looked to balance the steps between each weight appropriately. Sometimes I’d resolve this by adding a tiny stroke to an entire weight. I then merged that stroke into the glyph. (Again, these are of clunky methods, but I’m an amateur.)

Given their added mass, heavier-weight fonts are more challenging to resolve than their lighter counterparts. For this reason, I needed to add width to heavier faces, reduce the depth of horizontal strokes within them, and reduce the stroke radius in spots. I’m sure these sorts of accommodations are run-of-the-mill for real type designers. For me, they involved some fiddling.

Then came the name. My first thought was to call it “Skookum”, as I like the sound of that word. A family friend often used it to imply that something was slick or well done. (It turns out that this word means strong or monstrously significant, which wouldn’t have been appropriate.) Also, a little research led me to realize that the name is Chinook Jargon. Upon learning this, I decided that it was a good day to avoid appropriating indigenous culture.

In the absence of a better name, I used Campy as the a working name. Sure, it’s boring, but no one else seemed to be using it, and it felt suitable. Plus, it is sort of campy, given how awkward it is in spots.

Git ’er dun

Fontself is a valuable tool. It has limits, though. One of these is in how it sorts exported fonts in the menu. (Most folks might wonder why this would matter, but I found it very difficult to see these out of order.) This shortcoming led me to a Mac font editor called Glyphs. Glyphs excites me about as much as a trip to a guitar store.

I dove into tutorial videos and Glyphs’ FAQ section. I learned conventions and keyboard shortcuts. I also started imagining building additional type families. It’s at around this time that I reminded myself that I am not Jonathan Hoefler. As much as I find type design captivating, it’s a complex craft. I might hack something crude together, but I needed to return to my day job.

This reality-check led me to reign in my project. I reasoned that doing so was not only practical. It’d allow me to test the family in daily use. In doing so, I’d spot the significant issues and could fix those bugs in the future.

So, now it was time to drop some dead weight. First off, I ditched the possibility of Display variations. I retooled the existing Display weight to become the Black version of Campy.

I also set aside the Condensed face I had roughed together. I gave up on the idea of an alternate version for boiling line effects. Drawing, converting, refining, and working out the kerning pairs for another 1,456 glyphs seemed kind of absurd, even to me.

I had already drawn each italic glyph in every weight. However, these now required days of reworking to match the changes I’d made to the rest of the family. So, I cheated.

I copied the non-italic versions and renamed them Italic. I then selected all of the contained glyphs, sheared them at an 11° angle, scaled them horizontally to 98%. I also manually tidied up the elements that suffered most from these programatically applied treatments. What I describe here is a crude way to build italics, but “real artists ship”. (In my case, this could also be “fake artists ship”.)

I wish I could say that I did more in Glyphs, as it’s such a fully-featured product. However, at this stage, I essentially pulled in the files I’d exported from Fontself. From there, I was able to use Glyphs’ more extensive features to deal with completion tasks like correcting font sorting, adding metadata, and exporting various formats.

One handy function in Glyphs is the option to select specific glyphs for subsetting. A font that weighed in at 265 KB (from Fontself) shrunk to 57 KB when exported it from Glyphs. Subsetting that same file cut that its size down to a reasonably svelte 26 KB.

The real world

I’ve learned that those with simple answers often don’t understand how complicated a topic is. For example, it’s easy to criticize certain software programs. However, if you were to talk to someone who worked on that project, I bet you’d learn that their job was far more complex than you could have imagined.

Type design is similar. To many, a font looks like a set of simple shapes. By this point in the project, I had learned just enough to recognize how little I knew. Worse yet, I hadn’t even considered varying operating systems, browser rendering issues, and how some apps might override the typeface’s treatments. (I’m looking at you, MS Word 💩.)

Glyphs affords type designers control over every aspect of a typeface. In truth, Glyphs allows the designer so much control that a novice (i.e., me) feels bowled over by all of the fields. So, I looked at that army of options and just stuck my head in the sand. What could go wrong?

Well, one thing might be vertical text alignment in fields, in Firefox. We tried to resolve this by tinkering with alignment settings, but this shit gets super-complicated super-fast. Unconvinced? Check out Vincent De Oliveira’s Deep dive CSS: font metrics, line-height, and vertical-align and see if you go cross-eyed as quickly as I did.

Another is font rendering. Firefox renders text as though it’s written in marker on newsprint. (I like Firefox, but seriously?) This rendering problem is most prominent in the eye of Campy Black’s lowercase e, which fills in badly. (I made a joke about this that only two people found funny.) Campy sets pretty well in Chrome and Safari.

The first time I saw Campy in use in a comp of our website, I went into a cold sweat. It just felt wrong. What had I done? A month of work, and the thing looks this bad? Oh, crap!

I sent the comp off to Eric S., knowing he’d feel the same way. I was ready to chuck the whole project once I heard back. It turned out that he thought differently. He liked Campy, and so did his son, Evan.

I showed it to a few others, and they shared Eric and Evan’s sentiments. I, too, came around in time. I suppose this illustrates how severely we can respond when a change makes something familiar appear alien.

I felt pretty good about Campy when used in other settings. For example, Campy seemed more at home in these testimonial blocks than the previous font:

It also seemed to work on t-shirts:

Meanwhile, implementing Campy on the Campnab website cut in half the number of typefaces in use. This size reduction was helpful from a webpage load-time standpoint.

Campy is only partly complete and contains several weird bits I need to clean up. The family is a bit too wide. The lower case e falls apart. That hash symbol is oversized. Quotation marks are too much like inch and foot symbols. Additionally, some letter combinations collide terribly.

This is the brand

Despite all of these problems (and those I didn’t mention), Campy is growing on me. I mostly feel this way because this type family is so suitable to the Campnab brand. We don’t want to feel overly polished as such a small operation, and Campy ensures that there’s little risk of that.

Campy is also personal. For a long time, I tried to do work that seemed clever. It never felt honest (or all that clever). So, I don’t try that hard any longer. Instead, I work to find suitable approaches—even if serious designers find them amateurish or laughable.

I like how home-spun treatments can put the viewer at ease. As a kid, I hand-drew dumb greeting cards for my family members under the moniker “Eric’s Cheap Card Company”. Those cards were silly, but they always drew out a smile. I think Campy channels the same sort of vibe.

Along the way, I started to look upon Campy as being akin to Comic Sans, albeit more restrained. I consider this a positive association. You might mock Comic Sans for how awkward some of its glyphs are; however, you can’t deny that some folks love it. In a way, Comic Sans is a little like folk-art in that professionals deride it, but everyday people find it endearing.

Over the past month and a half, Campy has effectively become the Campnab brand. Once we put it in place, every element with a straight/hard edge no longer fit. So, we started to remove them.

I put wobbly borders on some of our Instagram images:

I redrew the icon and wordmark, so it too was a bit wonky:

It seemed to work in some ad mock-ups, too:

If I could go back in time, I’d think twice about creating a custom type family for Campnab. It was an awful lot of work, and the return certainly doesn’t justify that time investment.

I don’t have a time machine, though. As such, I have to look at the positive side of this experience. The most notable is that I can now type anything in Campy, and it instantly feels like Campnab.

Hey, I like it!

Yikes! That post just went on, didn’t it? Sorry! That said I wrote this summary for those who asked me for a detailed explanation of the process. If you’re still reading, you’re probably one of those three people.

I’m still somewhat uncomfortable with Campy. I know it isn’t a professional type family. Additionally, I probably built it entirely backward. Heck, real type designers probably cringe when they see type families like Campy.

Even though Campy isn’t a serious type family, I like it. The thing has some personality. It’s also about as friendly as a kid’s sign for a lemonade stand.

More than that, I got to spend a whole month just working on a project every day. I don’t normally get that much time to focus on craft.

This project offered a welcome time-out from some of my other tasks. This break also allowed me to put on my headphones and rock out to the same tunes I loved when I was a teenager.

If you’d like to try Campy in your own projects, you can licence it from the Campy the Font page. Please note that it’s a work in progress and a bit rough around the edges. As such, I’ll listen to the feedback I receive, make improvements, and email updated files as they come available.

So, that’s the story of Campy. I’m Eric Karjaluoto. You stay classy, San Diego.

Back to Blog index