Chandler Van De Water

Chandler Van De Water’s thoughts on Design, Process, & Life.

Aug 6, 2012

Creating Cubano

I created a font called Cubano. Here's how I did it.

Why Webfonts?

Let's start with the topic of webfonts. Fonts have always been and always will be integral to great print material, there's no doubt about that. But are they integral to the web? Can't we just use sweet images? What's wrong with utilizing standard fonts that everyone already has? Typography on the web isn't just about looking cool or having selectable text or just being the new web "thing." It's about accessibility for the impaired, search engine optimization, and, with the ever-growing rate of mobile usage, it's about the best experience possible on every device.

When it comes to fonts on your site, you can either use a terribly boring font, which doesn't convey your message or have your branding, you can use an image, or you can use webfonts! For the web, consider our font situation up to this point. We can agree that we’ve seen a lot of these before, so it's no surprise that we like to find a new face for our designs. But when you find that new face, what has been our typical approach? Most likely, you started to slice up some images.

When you simply utilize an image for a header, you have to use an <img /> tag or you have to use an <h1>, hiding the text with CSS and using an image in the background. While we've been using them for as long as I can remember, they're both hacks if you think about it. We've always wanted variety in type, either for pragmatic purposes like readability, or for emotional purposes like connotation, tone or brand. Beautiful fonts have been around much longer than our ability to use them as live type on the web and so we made due and found ways to include our precious fonts by using images.

But with webfonts, we can have our cake and eat it, too.

At least, we’re headed in that direction. Obviously, webfonts aren't legally available for all of our favorites yet, but rest assured that it won't be long. With certain licenses like those provided from myfonts.com, you can host webfonts from your server just like you host images. Services like Typekit and Fontdeck allow you to include an ever-growing list of legitimate fonts on your website and foundries like Hoefler & Frere-Jones, House Industries and the like are working on their own font-hosting services. Even free services like Google Web Fonts are making a name for themselves. The industry has made a shift and it's for the better.

The Power of WebFonts

Not only are webfonts versatile, they are powerful. If you haven't heard, the latest craze is responsive design, meaning that you serve up a site that will scale and shift its layout, images and type according to the user's window size, all the way from the massive external monitor to the mobile device. In addition to this, we’ve got these retina displays that make all of our current images look like crap and who wants blurry type?! No one, that's who. Here are a few reasons that webfonts are the jam:

  1. Webfonts Are Math. Vector data. No pixels. This is rad. This means that our webfonts are infinitely scalable. This fixes our responsive and retina display problem, because fonts have the potential look great at any size, on any screen resolution. At the time of this writing, Windows still renders fonts like a goat's butthole but it'll look awesome everywhere else. When we start displaying websites on billboards, (great idea, I know) webfonts can handle that! This makes our work more future-proof, which is ultimately unattainable but sounds really cool.

  2. Webfonts Aren't Letters. Let's get creative. Remember wingdings from the video earlier? We chuckle at that font but it’s pretty dang smart if you ask me. The web is riddled with wayfinding in the form of icons so why not utilize the vector-format, infinitely scalable nature of webfonts for all of your icon needs? I realize that there are some accessibility issues surrounding this but I'm just trying to get you guys to start to think outside of the box. For some great examples of webfonts that do this very thing, check out Pictos, Chartwell and SymbolSet.

  3. Webfonts Are Small. Font file size is important, especially when you compare it to image file sizes. When your image sizes get fairly large (see retina images), font files can generally be smaller in size. Given that you can scale them infinitely without increasing their file size, having multiple versions or losing pixel definition, they're a pretty great alternative. You may not give a crap about the difference of 10 kilobites between a font file and an image, but if you're a mobile user on a limited data plan, you appreciate every iota of data you can save.

  4. Webfonts Are Yours To Conquer. Lastly, while font-making is an rich art-form with lots of history, it's definitely something you can consider doing yourself. We’ll get back to fonts on the web and how to implement them later but in the meantime, go check out Glyphs, an amazing font creation tool that is constantly under development. I will be referencing this app throughout the rest of this post.

My First Font, Cubano

Earlier this year, I created a font called Cubano (you can grab the donate version on losttype.com; the full version has 3 additional faces). I'm relatively new to this industry with no formal training in type design but I've gotten a lot of great feedback on this font, including this very flattering tweet from Erik Spiekermann. Because I'm not a german stickler who grew up setting metal type for fun, I've gotten a lot of questions surrounding how I made my font.

Firstly, making a good font requires much work and much attention to detail; remember this before you ever seriously start on a font. Secondly, a good font should be unique in some way. Typography means "impression writing" (Greek roots typos, meaning "impression" and graphia, meaning "writing"). We want our fonts to make an impression on those that view it. To impress, you need to make something unique, which can be difficult in a saturated market. Thankfully, fonts are defined by their nuances, so subtle changes can make a world of difference.

For me, Cubano stemmed from a client project gone sour. For this particular rebranding project, I sketched out their logo first and, after I couldn't find any faces I liked, I decided to draw the letters in Illustrator. During that process, I utilized snap to grid quite a bit but I quickly realized how painstaking and frustrating Illustrator was for making the glyph shapes uniform. When you can't know the distance of a bezier handle from the bezier point, the only way to duplicate curves is to duplicate the shape and then you have to join paths and it all gets really janky pretty quickly. But, I was only making a few letters, so it was fine by me. Later, when I discovered Glyphs, it blew my mind how powerful and helpful the program was for illustrating uniform shapes.

I'll skip the boring part where the client didn't like what I created and refused to pay me. Instead, I'll focus on what I did when I found the files on my computer later on and decided to draw out the rest of the alphabet. Now let me stop here and offer some advice: Don't start in Illustrator. Glyphs is way better for font creation and, once you learn it, it will save you a lot of time. I realize that there are other apps for font creation such as Fontlab but I like Glyphs and this is my blog. I digress.

I drew the full uppercase and then the numbers and started showing it to people, asking for advice and feedback. I attended Brooklyn Beta last October and randomly showed my buddy Jon Tan (who cofounded Fontdeck) who gave me some great feedback on my font shapes and also told me about Glyphs. The app is an investment but no more than Photoshop or Illustrator is, if you plan on making a legit font. So, after working on Cubano for as long as the trial would allow, I ponied up and purchased it for $300. Now, let's get into the specifics of how you can start building your font utilizing a program like Glyphs:

Making a Dang Font

Now, before you even open the program, you should already have an idea of what you want your font to look like. I would highly suggest doing plenty of sketching on paper. Later, you can import your favorite sketches to a background layer in Glyphs and trace them. Otherwise, you can get pretty fast with the program and just start there. What follows is my process for font making and although this is no hard and fast rule, it worked for me.

As you open up a new file, you'll notice that the upper- and lowercase glyphs are listed with example glyphs in place. If nothing is selected, you can switch glyphs by simply typing the letter. If you double-click a glyph, it will open the glyph for editing. Along the top of the application window are the various tools you can use. Opening the Palette window give you various tools to manipulate your shapes–it can be pretty different from Illustrator but in some ways, much better. Now, when you're starting a new font (let's consider a sans-serif), think about how each font letter is built from other, more basic letters. You'd want to start with the most basic shape, which, in most cases, should be the uppercase "I". You can use this to build out most of the other letters. Once you establish what your font height will be (you can edit the metrics of your in the Font Info dialogue with ⌘I) and how wide your average stems will be, you can begin building out all your characters.

Depending on where the personality of your font resides and whether you want your font to be a display face (headlines) or if you want it to be used for body copy (paragraphs), you may or may not include lowercase glyphs. If you‘re going to make a display face, start with an I, then H, T, L, E, F. Then try an N, followed by M, W, V, K, Y, X, Z. Remember, this is just a suggestion. If you feel inspired about a certain letterform, work on it. After those were complete, I started working on the generally curved letters. Start with an O, then, Q, C, G, D.

With letters like O, Q C G and D, make sure you optically correct them. When a letter is curved on the top and bottom, it should extend outside of the cap height and baseline just a touch. Use the curves established in your circular letters to guide the right sides of your P B R. Notice that Glyphs allows you to see the X and Y coordinates as well as the distances between any number of nodes and/or bezier handles. Super helpful!

A Few Pointers

  1. If you plan on rounding the corners of your font, draw the sharp version first. You can easily round and visually correct rounded corners from the filter menu within Glyphs. It may require some tweaking afterwards but you'll get much more uniform curves, especially with an italic face.

  2. Utilize different shapes–it's much easier to tinker with. i.e. For a simple H, use 3 overlapping rectangles instead of making one shape. In Glyphs, hold spacebar to get a preview of what the glyph looks.

  3. If you plan on doing multiple weights of your font, you'll want to use interpolation. I'm not going to cover that here but basically you can have the computer do most of the work for creating all the weights in between your light, regular and bold versions.

  4. When making Cubano, I studied a lot of great fonts that I loved and tried to reproduce what I liked. I'm not talking about reproducing their nuances, I'm talking about the principles found there. While I didn't use all of these, here are some features you should consider including in your font: optical correction, uniformity, tapering, tilted axis, brackets and more. You can find a pretty extensive list of typography terms at typographydeconstructed.com.

Kerning

One of the definitive characteristics of a truly great font is kerning. Kerning is the distance between characters and it can truly make or break a font. In Glyphs, you can create kerning pairs or kerning groups and apply them to multiple sets of letters. An easy way to make sure you start on the right foot is to make sure the spacing on the left and right side of each letterform is consistent.

Do not fix inconsistent spacing with kerning.

If you spend the time to build your letters correctly, most of your "straight" shapes should rarely be kerned. But for your shapes that have a similar left side, like H, P, I, K, L, R (and possibly a few others like M and N), should all have the same kerning group. In Glyphs, the kerning group on either side of a letter in the "K" field and set the kerning group in the "G" field.

Try Type Method to practice your kerning and use Kern.js to easily grab the CSS to fix web kerning.

Ok, so let's say you're ready to spend months and months without end drawing and kerning your perfect font that will make you millions. If you're using Glyphs, you can easily export it using ⌘E and it will poop out an .otf to use most anywhere you please. But you want to use this font on the web, specifically, right? Introducing, FontSquirrel! This site is rad. Amongst other things, it will take your .otf font you just made and poop out a bunch of font files for use on the web, including WOFF, which is my favorite.

But, how do we implement these fonts? This has been around for a while, but I'll quickly go over how you can implement your webfonts using the CSS @font-face property.

In your CSS, utilize this amazing code or search for the "fontspring @font-face syntax" on ~~Bing~~ Google.

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

.myfont {
    font-family: 'MyFontFamily';
}

and then, in your HTML you can add class="myfont" to your elements. In your CSS, you could easily apply that font-family to any number of elements.

Yay, now have pretty fonts that you made on your website in selectable-text glory! But say you want some sweet fonts that are way better than this Papyrus knockoff you made. Just pirate them and run them through Fontsquirrel and viola! You have Gotham on your website and a hefty lawsuit with Hoefler & Frere-Jones! Relatively inexpensive or free services like Typekit and Fontdeck may be a better option – they aren't very hard to implement. As I mentioned earlier, foundries like H&FJ and House Industries are also working on their own webfont services, which is rad.

Conclusion

The web is a pretty optimistic place with plenty of creation and innovation but even with the plethora of knowledge that is shared, it can be a little intimidating and disheartening trying to learn how to do everything (and how to do it properly, no less). It seems like you just learned how to use tables with sweet inline CSS and then poof, tables suck and you're supposed to use divs with semantic markup and CSS layouts and then you have a stroke cause what the heck is jQuery and then they come out with HTML5 (with logo that you kind of want to copy) but you don't even know what an <aside> is and now everything has to be responsive with retina images, which is bad news for you because you went into a coma back a poof.

But, you can do it! Stay optimisitic! The web is a wonderful place and people will help you learn how to do anything. The key word here is optimism, so don't be afraid to fail. It's NOT PRINT (praise the Lord), and you can always change stuff later. It's better for you to try and fail than for Comic Sans to have no competition.