Fete Type Log #3

Bruce Cayonne's hand painted letters

Step 1: Scanning

Step 2: Bitmap

Step 3: Vector

Step 4a: Font Setup

Step 4b: Importing SVG

Step 4b: Character spacing

Step 4c: Font output (uppercase)

Step 5: Test font

Making Bruce's Fete Font:

26 uppercase letters came bundled in brown paper from Bruce. Hand painted black letters on 14'' x 10'' white bristol board. Here are the basic steps (and tools) I like to use in digitising letters and building a font:

Equipment:
Scanner
Photoshop
Illustrator/Sketch
Font Forge

Method:

i. SCAN
Using a flatbed scanner (ex. Epson Expression 1680), scan in each letter at the following specs: 300dpi, grayscale, and tiff format.

ii. PHOTO EDIT
Open the scanned letter.tiff in Photoshop. Adjust the levels to improve contrast. Convert letter to bitmap (Image > Mode > Bitmap). Choose 50% Threshold. This reduces the image to 2 colours (black and white). Save as a bitmap or .bmp file. Create a bitmap file for each letter.

iii. VECTOR
Open letter.bmp file in Illustrator or other vector graphics editor (Inkscape is free and open source). To create a vector version, click Object > Image Trace > Make and Expand. Adjust settings to retain details of lettering.

Create an Artboard or canvas with dimensions: 1024 pixels by 1024 pixels. Scale vectorised letter to fit this new dimension. Adjust letters to visually match one another.

Save for Web & Devices. Switch to SVG in the dialogue box, and click Save. Create an SVG file for each letter.

iv. FONT
A. Font Setup: Open FontForge (free and open source). Setup your Em Size in Element > Font Info > General. For this font, I'm using 1024 pixels (to match the vectorised letter dimensions). Further reading...

B. Importing Letters: Click on a letter in the Font View window to highlight and import the corresponding letter.svg file (File > Import). The window has spaces for all uppercase, lowercase, digits, punctuation and diacriticals. Only uppercase letters were provided by Bruce for his Fete Font. Lowercase is hardly ever used for fete signs.

C. Letter Spacing: Go to Metrics > New Metrics Window. Here you'll be responsible for managing the spacing between characters. This is very important for any font to function well. Further reading...

D. Generate Font: There are two main types of font formats used in practice — TrueType (.ttf extension) and OpenType (.otf extension). For this post, I created a TrueType font. There's a number of protocols (metadata, hinting, rounding, etc.) to output a valid font for public use or final release. Further reading...

For brevity though, I'll describe the steps to take for a quick output for testing the font. First, use the validate tool (Element > Validation > Validate) to run tests on the font. This may turn up errors or problems associated with paths and curves or points, which need fixing before outputting the font. Run this test again, edit your letters as necessary, until you get the green light to generate your font. Then hit File > Generate Fonts. Input the name of your font and select TrueType in the font format dropdown. Leave remaining defaults as is. Click Generate and upload FeteBCS.ttf to preferred font manager.

Notes:

Bruce pointed towards the lower leg of the H and said, "Leave it so, that's intentional."

With hand painted signs, no two letters are alike. The process of digitizing removes much of the inherent human qualities we love so dear in these signs: the brush strokes, the paint splatter and drips, the scud marks around the edges, fingerprints, and the pencil marks that come with every sign. Design with intention.