Designing a Font with Code

Years ago I started using a very simple SG made up of lines as my "logo". I evolved this over time and thought it would be even better if I had a whole font in the style of it. So here's how I created my personal font with code and refined my logo in the process.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 # £ ?

At first my logo was made up of quite haphazard lines. Then I tightened them up to be at only right-angles on a 4 by 5 grid, and that became my logo for a few years. I liked the logo and wanted a whole font in that style. It is common for companies to have custom "logo fonts". However the "SG" could possibly be mistaken for "5G" so some modifications would have to be made to distinguish letters from numbers in a full font.

Years on, I finally took the leap and made a font based on my logo. At first I considered web-based font editors but didn't like the idea that they could disappear at any time, so turned to open source design apps. I tried Inkscape's font design palette, but I found it a little limited and cumbersome to use. Then I tried the popular FontForge, but the UX isn't great on OS X and it was too complicated for my needs of creating a simple geometric font.

ze
ro

After my fruitless experimentations I realised that I could simply code my font! As I wanted it to use a grid and be made up of only simple shapes, I decided to describe each character in ASCII, then write a script to convert the ASCII representation to SVG, and finally another script to run the SVGs through FontForge to create the font.

1000..1000
0.....0...
4002..0.00
...0..0..0
0003..4000

For the ASCII to SVG side I used my own design-as-code tool VectorSalad. It enables describing a design in simple Ruby code, in fact I was able to write the entire character generation script in under 50 lines!

DESIGN.​CODE { ART }

Using this ASCII design format and automatic SVG generation it was quick to tweak characters and see the result. There were several letters I iterated on, including rounding off the "S" to not look like a "5" and changing the style of "a" to look neater.

I used Python for the SVG to font script as FontForge has a Python API. It's quite powerful and got the job done without much code. Though I had a lot of trouble with UTF-8 characters (interrobang‽) and I'm perpetually frustrated that all software doesn't just use UTF-8 by default, then we wouldn't have to think about it.

I have open-sourced the code files with the intention that you use them as inspiration on how to use VectorSalad for some scripted design tasks. Perhaps create your own different fonts, or find other cool uses for VectorSalad.