This evening I continued experimenting with designing pixelated tiles at a 32X32 resolution.
I’ve been working on a new font the past few days, it’s going to be yet another geometric font, this time it’ll have tall letters, serifs and a fairly rigid composition.
The majuscules, minuscules and numbers are pretty much done, but I’m having a bit of trouble getting started with the non-alphanumeric characters. As always, the ampersand and the at sign remain to be the most difficult of the special characters, I’m considering borrowing some from my earlier high stress font “High Society”.
I started working on another modular font the other day, and found out I could do all sorts of neat variations on this design, so now I have four different drafts and I still haven’t moved on to importing shapes into FontForge.
Part of the reason why is that I planned on doing the “expand stroke” operation in Illustrator or Inkscape since Affinity Designer tends to make overly complex shapes with too many nodes when expanding circular or curved shapes.
I’m hoping to finish this project some time during the next few days, but in the meanwhile – here’s how it looks now.
You know that picture that comes with the frame?
A few months ago, my employer decided that the frames produced in our stores need their own “face paper”. So what I did was dig up a photograph of a fox I took a few years ago, added the company logo, the website and the frame size and put it all together in Affinity Designer. The result looked a little something like this:
The frames are sold in the store I work at situated in Oslo west (Montebello) called Rammexperten.
As I’ve learned how to create fonts using Affinity Designer and FontForge, I’ve come across a few situations that require unnecessary monkey work. With some experimenting I’ve found that the simplest way to export multiple curves from Affinity Designer into Fontforge is to use the Export Persona in Affinity Designer and export curves as SVG files.
Note: Because macOS and newer operating systems are extremely paranoid these days, this program will not be able to run unless you set the security settings to allow running programs from “Anywhere”. To make matters worse – newer versions of macOS have completely removed this option. To disable this child protection lock, just follow these instructions. Be aware though, that running programs from “anywhere” is a security risk, but still necessary since both Apple and Microsoft will raise a red flag for very common applications if that particular application is something they don’t sell in their “App Store” or “Microsoft Store”.
The problem here is that when exporting the slices, the viewbox height and width is set to the size of the curve and this will cause FontForge to resize the letter you designed to fit the Glyph.
To fix this problem I made a simple Java batch processing application that resizes the viewbox to a square canvas to the size of your liking.
This application is based on my own workflow which means that to understand the why and how, a tutorial explaining how I design a font is necessary.
Step 1: Design the font in a large Affinity Designer document.
I start out with a canvas the size of an individual glyph, since I prefer working with TrueType fonts, I select a size of 2048X2048px (or 1024X1024px), and define a descender, x-height and ascender by creating semi-transparent coloured rectangles.
After this, I make the document larger (using “anchor to page” – not “resize”) so as to fit multiple glyphs and design all my characters.
A font designed in AD (Affinity Designer) looks something like this:
Step 2: Resize the document
(if you didn’t design the letters according to the proper glyph size).
If I want to change the size of the letters after this (if – for example, you find you want the cap height to be lower than the ascender – which is common in fonts since some space is required for accents in characters such as “Å” “Ë” and “Ú”, you can create a new document with the desired glyph size (in this case 2048).
After this you select two characters, one upper case (such as A) and one lower case with a descender (such as g, y, p or q), place the g so that it comes at a tangent to the bottom of the canvas and use this to find the baseline, then place the upper case letter (A) on the baseline.
You can now group these together and resize the characters, after resizing them you need to change the position of the baseline.
With the resized letters, copy one of the selected letters into the document, and compare the height of these letters.
In the “Transform” window, you can see that the smaller letter has a height of “1344px” and the taller one has a height of “1536px”, with this information you find the the factor you want to resize the document to. My document has a width of 16348px, I can then calculate: 16348 * (1344/1536) = 14304 (approximately, the answer needs to be an integer).
I note this down in my document so that I can resize my document back to its original size if I want.
Step 3: Export the individual glyphs using the export persona.
With the document and letters set according to the right size so that they fit into a predetermined em-size (this is what it’s called in FontForge). Select the export persona (also make sure that all letters are in the form of a single curve, use the boolean “add” operation to create a union of all the overlapping shapes).
In the layers tab – select all the relevant curves (all letters, numbers and symbols you want to export), and click “create slice”, the slices should be set to the “SVG” file format, but none of the SVG presets in AD have the correct settings, so I suggest you create a new Preset called something like “GlyphExport”.
The settings for exporting the glyphs are:
- The “Set viewBox” should be checked
- File format should be set to “SVG”
- “Rasterise:” should be set to “Nothing”
Then click Export slices into a separate directory of your choice.
I normally name the directory “glyphs” and put them into a project directory along with the AD document file.
Step 4: Resize the viewBox using GlyphSize.
With the glyphs exported, you can open the folder and see how they look like.
Note: If you planned well, you should have renamed the “curves” in AD to their appropriate letter. When the curves have names, this becomes their filename instead of just “slice1.svg”, “slice2.svg” etc.
My lettering scheme for individual letters is taken from the FontForge Glyph Names, other than that, I name upper case letters according to their letter – so “A” is named simply “A”, but lower case letters have the l-suffix so that “a” is named “al”, this makes importing into FontForge a lot easier.
At the moment (June 8 2017), the program looks a little something like this:
To select your directory, just click the “Choose Folder” button and locate your directory, you can either click the directory and click “choose”, or click on any file inside the directory and it will automatically select the directory that the file is in.
With the directory selected, all there is left is to supply the desired em-size (labeled GlyphSize) and click “Resize Items”, it will create a directory within that directory named “resized”, take every SVG-file within that directory and write a copy of that SVG file with the desired canvas size.
Step 5: Import into FontForge.
The individual SVG files are now ready to be imported into FontForge, use the “Ctrl + I” as a hotkey for faster access to the Import dialog.
If you followed Step 1 or Step 2 and made a semi-transparent rectangle representing the descender and baseline, you can use the height of this rectangle as the “Descent” in Element=>Font Info=>General, after this you can fill in the Ascent by calculating 2048 – 450 = 1598.
Do this before you import your SVG files.
This time, I thought I’d try and make a handwritten font.
What I did was:
- Write the letters on a piece of grid paper.
- Trace the letters onto plain white paper using a marker and a light table.
- Scan the clean drawn letters to a jpeg file.
- Auto-traced the jpeg into a pdf using the “Super Vectorizer” program.
- Isolated the letters to individual curves using the boolean intersection operation.
- Exported the letters to individual SVGs and imported them into FontForge as usual.
I did some small cleanup on the letters of course, but I haven’t bothered changing the sizes of the minuscules yet. I find too much “nitpicking” can be detrimental to productivity, so I try not to spend too much time on details at the moment.
As a second attempt, I thought I’d try and make a more regular sans-serif font.
I still like tall letter though, one of my favourites is the “Roadway” font, I guess that shows.
The font can be downloaded here:
Here’s a screencast showing how to:
- Find the baseline, ascender and descender of a font you designed.
- Export the individual glyphs into an SVG somewhat efficiently.
- Start a new FontForge document and set the ascender and descender accordingly.
- Import the individual glyphs into FontForge.
- Generate the Font and install it on in macOS.
There’s no sound, it’s just a 6 minute video showing how I do it.