Sometimes there’s the need for a client to create a font based on some poster, document where the words were hand drawn and they would like to use again for a retro look.
These are mostly working notes the top will have the high-level steps then below will have how I work them. Also to remind me if it’s a few months between working on these.
• Scan the files you want to make the font
• Illustrator (AI), create file the same size
• AI, save first scan in layer, lock it
• Setup layers for lower, upper, special
• Build each Char on own layer
• Copy each and save out as SVG
• Create new font in Fontforge
• Import SVG file: File > Import
• Rt. Click > ‘New Outline Window’
• Resize: Element > Transformations > Transform (command + \)
• center: Metrics > ‘Center in Width’
• Set the left/right white space
• Generate Font: File > Generate Fonts
More information:
Get scans of the font, you may want to have a list to try to get as much of the alphabet as possible in as few scans. It makes it a bit easier to scan all at the same size resolution, the higher the resolution the better. With a higher resolution when high res it will keep the edges more sharp, with low res you have more guessing.
In illustrator create a new file the same size of the scans you’ve done.
Place the first scan on the layer then click the lock (so it won’t move or accidentally draw on that layer).
Redraw the font:
Create a new layer for that character (char).
Tip: I will add blank layers calling them ‘Upper’, ‘Lower’ and ‘Special’ for the chars that you add, then lock those layers. ‘Special’ is for special characters like: ? ! period comma, etc.
As you add layers for each character name that layer by what it is ‘a’ or ‘A’, etc. and keep it sorted in alphabetical order under the Upper and Lower. By having them on their own layer this makes it a lot easier to keep track of what you’ve worked on and then layer when you have to save these out for Fontforge.
I will sometimes write out on paper the full alphabet twice one for upper then lower. As I redraw the character in Illustrator, I will draw a circle around the one on paper, then when I add to the font program, I’ll put a line through it. This will help if I’m missing any characters, I can have that sheet with me as I go through samples to pull more for scanning.
As I create each letter, I lock and hide (click the eye) the layer.
When done drawing all the different chars on that page, swap out the bottom scanned page with a new one, if you keep the scanned pages it could make the file huge and slow down your process.
When I finish or need to send a sample of what I have:
I’ll Save each character as an individual SVG file:
For the first one, find the biggest like ‘W’ to save out Unlock the layer click the eye to show it select all and copy.
Then in a new illustrator file, paste the char, then resize the artboard to about the size. Save as a SVG file with the char name (a, A) into a folder called by the type: lower, upper or special, this just make it easier to insert later.
Then in the illustrator file with all the other chars, lock the layer and hide it (click the eye in layer) You don’t want to delete the layer it will be a bit harder to see quickly if you did it and you might need it to start another char one from that one, like an ‘n’ from and ‘m’.
The other chars do the same, except you’ll reuse that file you created based on the ‘W’ remembering to save as with the new name.
When done you may have to recreate some of the chars yourself, some could be easy like a Capital ‘Z’ and a lowercase ‘z’ can just be enlarged or shrunk. A lowercase ‘q’ could just be flipped from a ‘p’.
Assembling the font:
You’ll need FontForge for this, it’s a free program. It’s free and is a bit cumbersome to work in till you get a handle of how it works. It resembles the 90’s shareware apps.
Create a new font give it a name.
Click on the char in the grid you want to add, then: File > Import.
Select your SVG file, the folder it starts you in might be in your user folder, I’ve found it easier to move the folder of my SVG files to this location than dig through their UI to find it.
I’ve been leaving the default settings.
Rt. Click the grid for that char and select ‘New Outline Window’ this will open a window where you can work on that font.
In this window you’ll have 3 horizontal lines, the top one I use as my max height, like the top of ‘T’ then a line at 0 (center) this is the baseline like the bottom of the ‘T’, there there’s a line at the very bottom and I use this for the decenters, such as the bottom of ‘y’. You may find at times you will need to add your own lines, especially for fancy fonts.
I look for a font on the scan that has a point on it that is easy to see that aligns with the top of the lowercase letters. In that one I pull down a line and mark it ‘lower’ for when I work on the lowercase, I have a upper line for them.
To resize a letter: Element > Transformations > Transform (command + \)
I’ve been leaving at ‘Center of Selection’ and float the letter. Then select ‘Scale Uniformly’ you’ll have 1 box for percentage.
Test a percent number; over 100 makes bigger under makes smaller. Click ‘Apply’ to test, if you hit OK the box goes away and then you’ll need to resize based on the new size. Based to stay in that window to resize as much as possible.
To move the letter you can select all then use the arrow keys this seems to be the easier/safest way. If you grap a node by accident it will alter the font.
After resizing:
You’ll want to center the font, Metrics > ‘Center in Width’.
At this point I save (Command + S) then close the window and go to the next.
I’ll move the left and right bars, this gives the spacing for the letter, if you don’t move you’ll have a monospaced font, this is where the M and I would have the same amount of space on both sides. Give the space that feels right, you can alter this in most programs the closer to how it should feel now will save you a lot of time later. About the best way to think of this is move those to be ½ the space you would want between it and the next char. The other char will have its own ½ spacing, this will generally even out.
Spacebar is listed in Fontforge as 32; the icon above is a white ‘?’ in a black diamond:
Go into Outline Window then:
Metrics > Set Width
You can start with ‘Set Width…’: 400; ‘Increment…’: 0; ‘Scale…’; 100
From there play if that spacing looks wrong, I mostly only change the ‘Set Width…’
When done generate the font:
File > Generate Fonts
Set the name, location (to save), and type of font.
Install font and test, if you need to change anything go in change, regenerate and when you install replace the font. You may need to close the app you’re testing the font in and reopen. For example, you will have to Photoshop, when reopening it will ask if you want to update, select ‘Yes’ and you’ll see the changes you’ve made to the font.
