DEV Community

Cover image for Modern Logo Maker Using Variable Fonts
Saskia Ketz
Saskia Ketz

Posted on

Modern Logo Maker Using Variable Fonts

Why I Wanted to Create Just Another Logo Maker

I myself have a lot of dev side projects, my friends do too, and given my profession as a branding designer I chat a lot with small businesses and startups that ask for a low-budget logo.

While I can’t take on small logo projects, these chats usually leave me feeling that I’m not very helpful. I find myself explaining that good logo design is based on brand strategy which requires a decent amount of market research, going through strategic positioning exercises, and so on and so forth. In fact, in another side project, I put all of our company strategy workbooks online for people to use. No luck! Everybody wants to jump into logo making because they’d like to have one ready in the next few days.

I searched many times for an online logo maker that I can actually recommend as a designer. Wix, Canva, Shopify and so many others have logo maker apps—but they all seem to create logos with cheesy icons and typefaces that no graphic designer I know would ever use. So, I created Mojomox.

My Take On a New Type of Logo Maker

I usually recommend creating a simple wordmark, no icon; simply setting the brand name in a geometric typeface—something that looks clean and professional. That way a tight budget is accommodated and people can focus on their business or product development. Often, there’s no product-market fit yet anyway so from a brand strategy standpoint, writing a fleshed-out brand book and creating designs based on that would be a waste of time and money.

But how does one stand out with a basic geometric wordmark logo? My personal designer heart has always been married to typography and typefaces. You show me a random letter and I’ll tell you what typeface that is ;) So I’ve been following the variable fonts development and their progressing implementation capabilities within modern browsers with much excitement for the past few years.

individual font weights

roundness of corners

stylistic sets

Last December, as a new side project, I decided to create my first variable font. I sketched out the different font axes that would allow for lots of design freedom: super individual font weights (instead of 100, 200, 300 etc. you can set the weight to precisely to 223, for example), widths (from condensed to extended) and other fun settings, like the roundness of corners. Additionally, and this is simply an OpenType feature, with up to 20 stylistic sets, you can define lots of different letter M’s (or, in fact, any letter). Given the variety of adjustments, I figured a variable font would be a great baseline for creating individualized designs.

I know there’s room for improvement and taking the concept of customization using variable fonts further but my first version of a new type of logo maker consists of the following three steps:

  1. Type out the company name and select baseline design from auto-generated options.
  2. Change typeface settings, mix and match letters and pick colors.
  3. Export logo file and test logo on your website.

On top of the variable font features, you can of course use basic CSS for tracking (letter-spacing) the logo, switch casing (text-transform) and play around with colors to further customize your logo.

I’d love to hear your thoughts:
Thank you, Saskia

Top comments (2)

grahamthedev profile image

Nice interface and design there! Had a bit of fun with it!

Couldn't quite remake my "InHu" text in my logo as you can't add a stroke / change the font size of one letter but other than that it was great.

Minor bug: if you change the weight of a letter, select another, deselect the first letter then no matter what the second letter thinks it has the weight of the first letter. It fixes itself when you change the weight. As I said, minor!

Also as a suggestion, would "tracking" not be better named as "letter spacing"?

Anyway, very impressive and I love it! ❤🦄

saskiaketz profile image
Saskia Ketz

Hi InHu! Thanks so much for the kind words!

Those are some great suggestions, I'll see how I can implement them. Thank you!