Making your first variable font in Glyphs font editor

It can be a little daunting to approach font design, but it doesn’t have to be! Glyphs is an amazing font editor that makes it really easy to get started. In this video, I give a quick intro to the program, and run through the basics of drawing and exporting a working variable font.

In case you’re curious: no, this video isn’t sponsored. I got a question about this the other day, and realized that it would be a nice topic for a quick video!

Apps mentioned:

Contents:
0:00 Intro
0:19 A look at a full font example
1:10 What makes a variable font work? (Interpolation!)
2:47 What is a variable font, anyway?
3:50 Why Glyphs is a good choice for making your first font
5:55 How to start drawing your font: control characters
7:11 Using the Pen tool to draw a letter
13:00 A look at setting basic font info
14:10 Setting up the 2nd drawing for a variable Width axis
15:45 Moving between the master drawings
16:56 Editing the second drawing
18:28 Thinking about the different spacing for each drawing
19:48 Setting up the variable font axis
21:09 Exporting the font
21:34 Testing the font with Font Goggles
22:17 Main gotcha: contour compatibility
22:55 Adding instances/styles to test interpolation while drawing
25:54 Bonus: making a “Height” variable axis
29:05 Testing the Height axis
29:20 Conclusion

[angiefu]

Really appreciated this breakdown. Thank you!

[JoseLautaroAguirre]

Hi! Really nice approach to the subject. Glad to ear you. Thanks!

[ArrowType]

Btw, the font at the beginning of this video is now released! Find it at

[olexpono]

Thanks for the run-down, glyphs is super fun! *
(*if you're into drawing bezier curves)

[alborzdesign]

I wish the interpolation preview with the slider was built into Glyphs and we didn't need font goggles.
Thank you for the amazing video. great pace.

[deanenettles]

The point size of a font is always a little bigger than the size from the bottom of the descender height to the top of the ascender height because you want to leave a little bit of additional space so the ascenders and descenders don't crash into each other. I think the amount you leave is a combination of the type of font (though a given family ought to keep the same amount of space) and personal preference. Is the average about 200 units?

[LukeDorny]

Awesome. Found you. Great video. Thanks.

[TwoLeggedTriceratops]

I appreciate all the videos you've made, you deserve more views. I landed here because our company has a subset of unique icons between our products that have differing looks (but the same bones). Then I learned about how you can create variable fonts and seen some of them applied to icons. I think that would be a great use case for variable "fonts" for me, so if one app uses sharp corners or thin strokes it's just a matter of moving some parameters around. I also see from your first video that you have some coding chops so I thought who better to ask - does that seem like a reasonable application? The generic icons will probably just remain as SVG as I'd avoid complexity or any overhead, but then I might be talking in circles because creating variable fonts seem like niche knowledge as well. Browser support for variable icons is pretty good at around 95%. Thanks for reading!

[hawalk]

Thanks for sharing.
Can you show us how to create other masters? thx