Making a Font with Inkscape
I’m writing this in my very own font. It’s ugly, but it’s mine. I created it.
I like learning new things. So I used building this font as a way to learn Inkscape a bit better.
I’ve been watching a lot of videos online to learn inkscape. The best tutorial series I’ve found is on a channel called Logos By Nick. He has a video where he makes a few letters in Inkscape. I used that video as the inspiration for the font.
First of all, let me say Inkscape is not the best tool for the job. The closed-source Glyphs app or Adobe Illustrator seem to be pretty popular tools for hobbyists and professionals. That said, I prefer using open source tools. Fontforge is another open source tool we will use as well for exporting, but because part of my goal is to get better at using Inkscape (I’m also using it for drawing some art as well). I’ll stick to using that.
The glyphs:
A QUICK BROWN FOX JUMPS OVER THE LAZY DOG
a quick brown fox jumps over the lazy dog
0123456789
`~!@#$%^&*()-_=+[{]}|;:’”,<.>/?
(As of publishing the special chars above are not finished so some will be using a fallback font)
Inksape oddities
The Inkscape SVG Font Editor
- Create the document from: “File > New from Template > Typography Canvas”
- Design each letter in a separate layer
- Modify Glyph settings from “Text > SVG Font Editor”
I’m very greatful to the inkscape developers for this tool, but here I’m going to rant a bit about the SVG Font Editor UI. Hopefully if I have some free time later I’ll be able to submit a patch that fixes some of these issues.
UI Gripe No. 1
The if there is only a single SVG font in use in the document it isn’t auto selected when switching to the SVG Font tab. I had to constantly click to make sure that the current font was selected
UI Gripe No. 2
The scroll context of the glyph list is constantly lost whenever an action is performed. Like adding a new glyph, changing a glyph name, or adding strokes for a glyph. This means that if you have a long list of glyphs the process for creating a new glyph is cumbersome. You must:
- Click the button
- Scroll down to the newly created glyph
- Rename the glyph (Scroll is reset)
- Scroll backdown to the glyph
- Remember that you need to select the stroke first
- Select the stroke you want to add
- Re-select the font (Scroll is reset, again)
- Scroll backdown to the glyph
- Click the button
This process is time consuming especially if you drew all of the paths first and then try to add them as glyphs all at once.
Again if any developers happen to read this I don’t want these gripes to offend. It’s more a list of UI improvements. Potentially for myself to implement if I get the time or feel ambitious enough.
#!/usr/bin/fontforge
Open("ricarda.svg")
Generate("ricarda.otf")
Improvements
This font is still a work in progress. I’ll update this page as I improve it. Here’s a list of things I’d like to change / fix.
- Finish implementing ascii special characters
- Figure out x-height issue with fallback glyphs (This may also fix the strikethrough issue)
- Redo Upper K (not wide enough),
- Make Upper Q’s tail more curly
- lower case r isn’t readble enough - looks like i
- glyphs gy69 (Add a bit more whitespace between the curve and the loop)
- rework existing punctation
I set it as the default font in my OS settings for a while as a way of dogfooding. I disabled it for now because I’d get weird crashes occasionally and sometimes text wouldn’t display in certain text boxes. The most annoying thing right now is when the fallback font and my current font are misaligned.
Other font ideas
- When I first started learning Chinese I had a moment where if I read some signs without my glasses on I thought they were written in Chinese Characters. I want to design a font inspited by that.