Making of the logo font

October 14th, 2007

This year the Helvetica typeface is celebrating its 50th anniversary, so everyone is talking about fonts. Not that I’m about to propose a replacement for Helvetica, or anything such, still I’ve created my very first font, and therefore I’ve wrote this post about it.

Although my blog logo is still just scraped, it’s time to write about the making of the font used there. I felt spending a couple of hours creating the font makes things learned worth sharing.

I named this font ArcNBrick mostly because of the basic concept behind its glyph shapes, where everything is built up of - surprise - arcs and bricks.

The tool I’ve chosen to build the font was FontForge, a cross-platform, open source application designed for the very purpose of creating fonts of different types.

Creating letter o in FontForge
Let’s take a quick tour of how I’ve started building a font with FontForge. First of all, the concept behind my font allowed me to work without any pre-drawn, scanned helper images, even though FontForge supports those. Let’s discuss the basics of drawing glyphs, then.

  • All paths are built up of curve, tangent, and corner points. Curve points are marked with a circle, tangent points with a triangle, and corner points with a rectangle.
  • Control points (marked with x) help you to shape the curves as desired.
  • Outer boundary paths should be drawn clockwise, while inner boundaries counter-clockwise

After learning these very few basic rules from the tutorial, I was very soon up to speed in drawing the glyphs for all the letters. In order to accelerate the process and also preserving design consistency, I used cheap transformation tricks to create glyphs from one another. For example the letter b is a perfect candidate to create letters d, p, and q.

So, drawing letter d consisted of the following operations: select all on letter b, copy, paste to letter d, then element: transformations: transform: flip horizontally, and finally element: correct direction. Drawing letter p wasn’t much harder: select all on letter b, copy, paste to letter p, then at element: transformations: transform: first flip vertically then move y by -200, and finally element: correct direction. That was it. Very soon, all letters took shape, so I’ve built the TrueType version to give it a go.

ArcNBrick font sample

As you can see, the result is nothing useful for everyday use, yet, you might find it appealing for short, emphasized labels used in logos, for example. Should this be the case, feel free to download and use my ArcNBrick.ttf. Make sure to leave a comment here on where and how this font was particularly useful for you, I’d be happy to receive feedback!

I need to confess that I haven’t tackled any of the issues that would make a font professional, such as hinting, accents, proper encodings, to name a few, but by this time you’ve already guessed that I am by no means a typographer. Yet it was fun building a unique font from scratch and seeing it working in a word processor. Some day I might even try building some wingdings fonts too, who knows…

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google]