Custom Fonts

Custom fonts

In the world of ancient Near Eastern studies, it can often be difficult to find fonts that properly represent the artefacts we are working with.  My experience creating fonts began with a project with Doug Gropp around ten years ago.  He was writing a grammar of the targumic Aramaic of Onkelos/Jonathan and wanted to use supralinear Babylonian vocalization in his text.  So I prepared a workable font for him, and have been making my own fonts ever since, whenever there was a particular script I wanted to present in my work.  I have begun using these custom fonts to visualize possible textual reconstructions.  Feel free to try out the fonts in my repertoire here (please consider them cc-by-sa):

If you want to try your hand at creating your own fonts, the following should serve to get you started.

Creating Fonts

Creating fonts directly from images is rather trivial, though often time consuming. There are 2–3 steps involved depending on the level of detail one wishes to achieve:

  1. Creating an inventory of characters from images in your image processor (either Gimp or Photoshop), binarizing them, and saving them together in one graphics file (png is good for this).
  2. Loading the file created in step 1 into a font editor (Birdfont is particularly easy to use) and vectorizing each character in its appropriate unicode codepoint.
  3. (optional) creating a kerning table (using Font Forge or Microsoft Volt)

With the exception of Photoshop, all software mentioned here is free. With the exception of Microsoft Volt, all software will run on all platforms (Windows, Mac, Linux).

Image Processing

The process of creating good black and white images for each character can be done to the level of precision desired. Making cleaner lines around the character will enhance the vectorization process and make the font clearer and faster to render, but it is really not necessary for the work we are doing to make estimates. You will find your own happy medium between time spent and level of precision.

The following video shows my process for creating a character map. The steps are essentially as follows:

  1. load multiple images into the program as separate layers (since they all have DPI information, they should all be imported at the correct size relative to each other)
  2. use the magic wand tool on the grayscale image to select the character
  3. copy the character into a new layer
  4. make guiding marks for the hanging line (I usually see these better in the color image)
  5. repeat steps 2–4 for every character (save your work often!)
  6. save the full project now
  7. delete the layers containing the scroll images
  8. arrange all the characters into some usable order
  9. merge layers
  10. convert to grayscale
  11. save as png file (do not overwrite your original psd file!)

A video of the procedure in Photoshop is available here.

I will try to make a video with the procedure in Gimp ASAP, but I am not so used to that software yet.

Font Creation

Now that you have a grayscale or binarized graphics file containing all your characters, you can convert them into a font. I have used Birdfont in this demonstration, but you could also use the more advanced Font Forge.

The following video shows the font creation process. The steps are as follows:

  1. create a new font
  2. import as a background the graphics file you just created:
    three parallel lines on the right upper corner>import and export>import background image (or simply Ctrl+B)
    on the bottom of the left menu select “Add”
    In the window just opened, select the file you just created> on the upper line, click on “open”
  3. resize it so it fits the preset character bounds (once you have gotten it to the correct size, do not resize it again), make sure to turn on the hanging line:
    On the left black menu under “background image”, click on the circle with the crossed four arrows
    Use the small black triangle on the left bottom of your background image to resize
    Use the horizontal line with the arrows to rotate the letters
    In order to move the background image together with the guidlines, click on the hand button (in the menu under “background image” near the round button with the arrows)
  4. in the overview tab, select unicode, then scroll down to aleph and double click it
  5. go to your background tab and draw a box around the aleph (or the current character you are working on), the double click within the box
  6. click in add to glyph on the left hand panel, then select aleph
  7. now move the image into proper position using the guidelines you made in the image, rotate the image if necessary
  8. now binarize, trace, and wait for the processing to finish
    To binarize: under the “’background tool” menu click on the square divided to a black and white triangles (If you close the file, and reopen it, you might need to click on that
    bottom again for each letter).
    To trace: under the same menu click on the circle that half of it is dotted.
    In case you wish to change a letter after tracing, you should move the letter. It will create another layer of the same letter. Then, delete the previous layer by clicking on the
    x next to the word layer on the left.
  9. select the guide lines you created and hit the delete key to remove them
  10. repeat steps 4–9 for every character
  11. set font attributes and names
  12. export font

A video of the procedure for converting the characters in the graphics file to vector fonts in BirdFont is available here.

A video of the procedure for setting attributes and names, and exporting the font is available here.

Kerning and Metrics

After all this, you now have a font that works reasonably well. You can stop here and use the font as is (you can do kerning manually in Photoshop and other software). But if you want to make the font even more usable, then continue on to add kerning tables. You should be able to use BirdFont for kerning, and they have a very simple interface for this, but there seems to a bug with left-to-right fonts currently (at least on my machine). So, you must use Font Forge or Volt for this.

The steps for defining kerning pairs is as follows:

  1. open your new font in Volt
  2. Add a script, this must be exactly: Hebrew . That is Hebrew starting with a capital H followed by one space, then .
  3. Add a feature, you should label this Kerning , which lets the processor know this is a kerning table.
  4. Now add a positioning lookup, but clicking “Add Positioning”. You can name this anything you want.
  5. Now open the positioning you just created by clicking “Edit Lookup”, set it to “Pair Adjustment” and change from LTR to RTL.
  6. Now you can click on “Edit Glyphs” to see a list of the characters you have created. Then simply drag them into either the first or second box in the Lookup Edit window.
  7. Drag the left hand glyph to set kerning for the pair. You can also change values manually. It is best not to change values for the first glyph, only the second.
  8. To add more kerning pairs, just one of the gyphs in the left hand panes and hit enter to start a new entry.
  9. You can create character groups for kerning, and this certainly saves some time (for instance ז, י, ו may constitute a thin letter group, then you can just kern the group instead of individual letters). But I will leave groups for further discussions.
  10. Once you are happy with all you kerning pairs, move the “New Positioning” (or whatever name you gave it) from under the “Lookups” to the left, under the “Kerning ”. Then cick on the “Compile” button, and then you should click on “Proofing Tool” which displays a window in which you can test the font by typing in the input field and turn your kerning tables on and off. Don’t forget to switch the Text Flow to RTL (Right to Left). Mark a v next to the work “kerning” on the left.
    You might not be able to see the letters in Hebrew, but do it anyway. It will make the kerning work.
    Click on the play button until the blue rectangle encircles all the letters (or the little squares that are displayed instead of them).
  11. You should save regularly, and when you are finally ready to finish the font, go to “File” and then “Ship Font”, choose a name and you are done.

A video of the procedure for adding kerning tables to your new font can be found here.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest