I’m amazed by how much typefaces can change my mood and the way I interpret a message. So, to get a better understanding of how fonts work, I figured I’d try to make my own. When I started, I naively thought that I’d need to make about 100 glyphs (upper and lower case, numbers, and some punctuation). I ended up making 233 so I could be considered a complete font on myfonts.com, but still well short of the 331 necessary to Adobe Latin 3 compliant.
I forgot to account for symbols and accented characters that I use infrequently. At first, I thought that basing the font off my handwriting would make it easier since I’d be able to draw each glyph freehand. But, because each of my handwritten glyphs is a little irregular, it was hard to reuse characters when I added accents. As a result, I ended up making each glyph from scratch. If I ever decide to make another font (that’s not intended to look handwritten), I’ll try to make one where I’ll be able to reuse components between letters (e.g. the curvature in the lowercase m and lowercase n or the strokes in the uppercase V and uppercase W).
If you’re interested in how I did it, here’s a tutorial.
$ brew cask install fontforge
baseline, x-height, cap height, ascender height, and descender height. If you have no idea what these terms mean (I certainly didn’t), I’d recommend checking out this blog post.exclam for ! and Latin Capital Letter A for A). I didn’t do this at first, but later regretted it because when I exported each layer to svg some of the filenames were suppressed in system dialog boxes (e.g. ..svg won’t show up, while period.svg does).svd file that’s encoded for ISO 8859-1 (Latin1), but that left out several characters that I wanted to implement. So, I changed the encoding to Macintosh Latin. To do that click on Encoding > Reencode > Macintosh Latin.File > Scripts > Other Script … and then select the jsx file. From there, select All Artboards, pick your output directory, and choose SVG as the export file format with Trim Edges unchecked to ensure that all of the svg files are square.File > Import in the window specific to that glyph. Before you close it, you’ll want to be sure to Remove Overlap or your glyphs may not be filled in where your strokes overlapped. To do that, go to Elements > Overlap > Remove Overlap or with the keyboard shortcut CTRL + SHIFT + O.Metrics > Auto Width … and your glyphs will be resized so that they’re no longer monospaced. You may need to make some adjustment later, but this is good enough to get started.Elements > Font Info … and fill out the appropriate fields. What you enter here is what’s displayed in the Font menu, not the file name you give to your font.ttf file, go to File > Generate Fonts … (you may need to unselect the validation step to get it to go through).ttf you’ll open Font Book and be asked if you want to install your new font. Here’s a blog post from Adobe about how to do this on other systems.Thanks for reading along. Happy font making.