John Cido's profile

apetino - A playful journey

The design process of Apetino began with a custom typeface for JSS branding. At the time, I tried to create something that fits into a strict geometrical grid yet still works as a general typeface. I enjoyed making it happen, and I hope you guys could find it useful or interesting. < 3
A: apetino

At the very beginning, apetino is a rename approach for a branding project. The name comes from Bon appétit (Enjoy your meal in French). I designed a concept logo for it, and it was kept aside for a while since it's not our final choice.
After we settled on the final choice, I took some time to take a look at this obsolete solution. Since this logo does deliver a sense of clean and close, I decided to expand the characters set and work on it further to make it works as the logo font.

Since I used a straightforward yet strict grid system to build the original apetino logo, I decided to push it further. I set a 1:4 stroke width to letter o width ratio. And picked several curve blocks based on different oval radius.
Then, on top of that, I just built a set of lower case letters like playing with toy bricks. I had quite some fun during this process since I tried to make a geometric typeface before but failed due to the limitation of my own experience and knowledge.
I found out about the Universal typeface by Herbert Bayer when I was doing the research. And I have to admit I got quite inspired by its design. Since it's still a project for a business brand at this point, I made lots of changes to improve its readability but got to keep several interesting ones.
I have kept all my printed drafts, so you can see why I changed the style of the lower case s. The previous design is bold and fits into the tight grid, but when actually using it in the logo and other text, the shape is too sharp and breaks the whole rounded feeling.
At this point, I decided to expand the letters set and make it more readable in most cases. So welcome to:
B: Apetino Sans

Based on the current lowercase letters set, I expanded the set to include uppercase letters and symbols, etc. And I started to print more samples since I enjoy examining the design on the paper.

It’s always a pleasure to meet our old friend, brown fox, and lazy dog, right?
I also printed out several characters to check on the design and visual balance.
When I check this using long texts, I noticed a big problem caused by the lowercase e. You can see the note on the scan (sorry for my awful handwriting):

The lowercase e is a black hole, consider decrease stem width.
​​​​​​​
After some tweaks, it looks a lot better since the letter e no longer catches eye focus.
To adjust the kerning groups better, I wrote a Codepen utility to generate AB, BA, and ABA combinations. I took some time to look through all the combinations and make changes to the kerning. This process is the only pain in the *** : (

But guess it worth it since I get to know more about kerning pairs : p
C: Apetino

Before I made it a real Apetino typeface (that’s my hope), I made several changes to the glyphs:

· Add a dot to the top of letter i and j
· Decrease the width of the letter h, n, u, and y
The changes above are necessary since I believe they’re a massive boost to the overall readability. But I also made some changes that made me regret. I changed the glyphs of both uppercase and lowercase of letter K, M, N, and W, which just makes the typeface looks so “regular.” And I definitely will reconsider the change I made and bring them back as alternative glyphs or revert the design all at once.
For now, I have to say, I’ve down what I wanted to, and it’s time to see a long list of some of the glyphs:
Terminal

As a designer, I always have a great interest in designing a typeface. This whole project lasts for nearly half a year and means a lot to me. Huge shout out to those great designers out there. What I have done in this project is so choppy, and the result is merely a “meh.” Though I do see potential in this project and planning release it under SIL Open Font License on GitHub soon.

Thanks for joining me. Please leave a thumb up if you find this article interesting, or you’re curious about this project. :D
Photos Credits:
Apple: Photo by Elena Koycheva on Unsplash
Pear: Photo by margot pandone on Unsplash
Egg: Photo by 青 晨 on Unsplash
Tomato: Photo by rawpixel on Unsplash
Ingredients: Photo by Dose Juice on Unsplash
Nuts: Photo by Valentin Salja on Unsplash
Orange: Photo by Thomas Hafeneth on Unsplash
apetino - A playful journey
Published:

Owner

apetino - A playful journey

Published: