I made a font (from scratch) in one day.

Posted on May 5, 2017
I made a font (from scratch) in one day.

[Edit: I have since added extra language support and a refined design to this font, which is now available for download at odibeesans.com]

I’m a huge fan of Adam Savage’s One Day Builds. At the beginning of the day he starts with a pile of materials, and ends up holding something that he once coveted (this one is my favourite). So with this in mind, and with a day off this week, I set myself a challenge;

Create an entirely new font, from scratch, and submit it to Google Fonts in under 24 hours.

I had a couple of letters already sketched out in my notebook. I wanted to create a tall, sans-serif, display font that could be used in posters, or large scale artwork. In my early days at Men’s Health, I would have to use fonts like ‘Tungsten’ or ‘Heron‘, which were terrible for chunks of body copy, but amazing when used in headlines, or for promotional material (which was my main job there). This was the style I set out to create.

Starting at 1pm on Wednesday, I went straight to Adobe Illustrator with the two or three letter styles I had sketched out. I set up five grid lines on my artboard, one each for the descender line, baseline, x-height, cap height and ascender line. I then decided on a width for the capital letters, and from there, the thickness of the stem (e.g. the width of the letter I). I did a lot of research on letter proportions and ratios and actually measured some existing fonts, working out how the lowercase letters should relate to the caps. From here, I made some rules:

X-height = 2x height of ascender/descender.
Stem width = 1/4 capital letter width
Lowercase width = 3/4 capital letter width

From here I created the letters O and B first. I made a decision that any letters that would usually have curves, would have a rounded corner instead. Most letters would be a tall block shape, but with letters like O, B and D, the edges with curves would have rounded corners. The outside corner would have a 12mm radius, and the inside had 6mm. With these rules agreed, plus a height for my crossbar (across the letter H) I started churning out my capital letters.

My font was very simple, but with one defining ‘flourish’, if you will. Any aperture, which is the opening in a letter, like the cut in the letter C, or the end of any arc, like the curved end of the letter J, would be cut at an angle. The hardest letters here were G and K.

With the CAPS completed, I moved on to the lowercase letters. This was undoubtedly harder, but with my rules agreed upon, it was just a case of churning through them. I used a lot more of my ‘flourishes’ here, especially at the end of the ascenders and descenders. The letters f, ga and e were the trickiest, as they were completely new styles.

At around 9pm I was moving on to some of the extra glyphs, like the question mark and exclamation mark. I was moving a lot faster now, and before bed I had managed to work up around 35 of them. In the morning, I completed the numbers 0 to 9 pretty quickly, and then began to actually create the font file.

This was completely new territory. Ian Barnard, a calligrapher pal on twitter with my surname, recommended a program called Glyphs, which you can download for a free 30-day trial. I downloaded Glyphs Mini and watched a couple of tutorial videos, then realised I’d set up my illustrator file completely wrong. So I had to paste each character in manually and scale it up to match the guides in the app.

At 10am, with my characters in place, I went about spacing and kerning the letters. This part was incredibly time consuming. There are a series of keyboard shortcuts in this app which you absolutely must master before setting out on this. And before starting the kerning process, you have to get your letter spacing as close as possible to how you want the file to look. Apparently as a rule of thumb, measure the width of the counter of the letter O (the hole in the middle) and divide that by three. That is the spacing distance you should start with on the left and right side of your letters.

At 11am, with the spacing set up (accounting for wider letters like M and W) I started kerning. This was a massively painstaking process. I visited this website, and pasted in their example kerning text. Using the keyboard shortcuts (use this tutorial) I plodded through and adjusted kerning groups for every single distance that didn’t look right to me. The obvious ones are between V and A, but there are so many letter pairings within that example copy that I wouldn’t have thought of. Once complete, I converted the kerning text to all caps and did the whole thing again, to pair the capital letters.

By 1pm, I exported my font and converted it to a ttf file ready to submit to Google (via this form). I can almost certainly guarantee that it won’t be accepted. There are quite a few glyphs still missing (like square brackets and copyright symbols) and I also didn’t have time to include the multitudes of accents required for full language support, but I will add to this over time.

It’s not the greatest of fonts, but it’s not too bad for my very first go. And considering I had to teach myself how to use the Glyphs software from scratch, and I completed it in a single day, I’m pretty proud! If it gets accepted by Google Fonts, I’ll submit the link for a free download!

The name?

Odibee Sans

…pronounced “oh-dee-bee”. It’s my very own ‘One Day Build’ (ODB).

Press:
Adobe Illustrator (tweet)
Adobe Create (tweet)
Font Squirrel

Digital Arts
Web Designer Depot
Freebie Supply
Befonts
Flexible (dribbble)
Free Design Resources