Design / Typography · 2014-01-10

Glio Font

(A Glio Digital Innovations project)

I collaborated with Madi on this project. Her blog post regarding the process below:

With the recent simplification of our logo, we made the decision to develop a typeface around the lettering of the logo. For a first attempt, the result is relatively satisfying, but the process of getting to a completed typeface was quite the learning experience. I visited ilovetypography for valuable resources, advice and tutorials in the creation process.

Translating the look of our logo into a set of characters that includes the alphabet, numbers and a few punctuation marks was a fun experience. Beryl and I started with the shapes of the lower case glyphs in Adobe Illustrator. We determined the weight and other metrics such as the cap-height and x-height. Before we continued with the rest of the glyphs, we pasted the lowercase shapes into Type Tool 3 – a Fontlab product – and generated a sans-serif font which we could test. We tested the ascender & descender heights & sidebearings. After some tweaking we applied what we learned to the rest of the glyphs to complete the font.

The kerning is still not perfect, and we don’t have enough experience in type design to perfect it. Using layout software, the kerning can be adjusted for print purposes. The problem is beautiful kerning for our webfont – and for that we used typebutter.com. After some time spent fine tuning and figuring it out, we were able to adjust the kerning for the font on our website. This font is now also applied to the Digital Creatives website.

We are far from type design experts. We found that creating a font is a much more intricate discipline than expected. We learned a lot and will definitely attempt it again, should the opportunity arise.

gliofont

 

Below some examples of the font in action:

welcome-screen DCpta-meetup02-Full