Subscribe to the OMGLORD Newsletter!

A weekly newsletter with thoughts on design, helpful resources and interesting features. Your inbox is your temple so I don't simply email what has been on this blog. Subscribe for exclusive content delivered straight to inbox every Sunday* CET.

Create your own font with Fontstruct

Create your own font with Fontstruct

Im not a type designer, but I like type. A lot.

When I was giving this blog a facelift I was playing around with what was originally going to be a super condensed monospaced typeface. This little side project evolved into what is now Ecke, a geometric typeface with sharp edges and corners. I decided to use it as part of the blog so that I could create headings that were bold but a little quirky, and it also made for a nice mark for omglord.

I use the term ‘typeface’ and ‘font loosely as experts spend months, even years, designing typefaces and crafting a finished product with perfect characters and kerning. However, if you are not a professional type designer and want to create something simple and fun—this was the process I went through.

Starting in Adobe Illustrator, I established the rough look I was hoping to achieve with letters A, B and C. Once I had this worked out, I progressed with the rest of the alphabet, not necessarily in order though. Youll find that you can reuse parts of letters to create new ones, for example the letter B created the R, and the W is simply the M flipped upside down.

Some letters were harder then others and I made variations to test which was going to work the best. I iterated on the letters, then created words to test how they would marry in with the rest of the family. Below is just a few examples of the many minor iterations.
 

ITERATIONS.png


I had finished the 26 characters but quickly realised how time consuming it is to manually create words using vector files. I needed a font, even kerning individual letters wouldnt take as long. After a solid google search looking for tools to turn vectors into font files, I found a web app called Fontstruct. There were obviously many programs such as Glyphs that I came across, however these were all a little too expensive for my non-commercial side project. In this case, the path of less resistance (aka the free app) won the battle but not necessarily the war.

Fontstruct edit mode

Fontstruct edit mode

Fontstruct was easy enough to get my head around and start using straight away. Basically I redrew all of the letters, using my vector files as a reference point. There are many limitations in Fontstruct so naturally some of the characters changed along the way but aimed to keep things as consistent as possible, not only with the letters but the glyphs as well. Basically you construct the letters using ‘bricks’ and these don’t come in a huge set, making it literally impossible to create certain angles.

Fontstruct preview mode

Fontstruct preview mode

There are two main views within the program: edit and preview. Both are rather self explanatory, in edit mode you build the letters and in preview mode you can see all the characters you have created so far and adjust the spacing. This is another restriction as you can only adjust the spacing as a whole, and not between individual character combinations. With little-to-no control over this, using the font file will require some attention and detail because the kerning will look off between letters.

Once you have completed your typeface, you can download a True Type File (.ttf) as the final product. Unfortunately Open Type (.otf) is not an available option. Fontstruct prepares a simple personal use license for you which is a nice addition, and you can edit the plain type file if you wish to add a few more specifics.

With the constraints of Fontstruct aside, having a font file has made my work flow quicker and more seamless when compared to only having a vector file. If I ever iterate a comprehensive version of this typeface I will definitely invest in proper software, however this was a good platform to start with! Hopefully this helps some of you wanting to create your own fonts and if anyone has used other software / has recommendations, please shoot me an email as I’m always interested!

Facts and Fallacies About the Creative Industry

Learning About Typography

Learning About Typography