fons
clone your own copy | download snapshot

About

FONS

A recipe to make fonts out of bitmap images.

A little bit of history

In 2011, Pierre Marchand made with his own hands, in the laboratory of OSP, a creature called Fonzie. Besides being cool, Fonzie was able to make a typeface out of scanned letters. In his childhood, Fonzie asked for letters to behave well and to organize themselves. They had to not hold hands and ordered themselves by the order of the Unicode. The Univers Else family was born. In his teenage years, in 2013, Fonzie got more and more experienced. He could decipher letters from a scanned page of a book by using OCR (Optical Character Recognition). Fonzie could then read nice stories. But Fonzie is so cool that he’s going even further. With all those a’s or all those z’s, he was drawing an average shape of all those instances of letters. Fonzie collaborated with ScanBot, a coarse book scanner, product of the Dr. Michael Korntheuer, which could suck the pages with a vacuum cleaner to read the next page. But ScanBot couldn’t make it through the winter, and Fonzie kind of got stuck in his sweet sixteen and didn’t follow the new trends in the libraries of code. Today, it is rare to see Fonzie around; nor Pierre Marchand whose new lazy landscape is made in waend.

Fons is the spiritual son of Fonzie. He does not have much ambition (like to read novels and such). He just wants to learn the alphabet, to be able to recognize the letters when we point at them. He got GlyphTracer 1.3 of Jussi Pakkanen, as a master. GlyphTracer shouts glyphs and we would point at the letters on a scanned page. When done, he autotraces in the command line limbo and generates a nicely wrapped .sfd font. GlyphTracer went a step ahead and now autotraces the font with the Fontforge toolbox so that we keep the history of the scan with the glyphs.

But Fons knew this was not enough. He has a good eye! If you feed him with an unripe scan, GlyphTracer would give you marshmallow. Fons then got trained by Pierre Huyghebaert, the bitmap master, and took good note. This is the recipe that you have in your screen.

Tools needed

  • Gimp
  • Autotrace
  • python-fontforge
  • Fontforge with Autotrace
  • GlyphTracer (included with this package)

Preparing the image

Get a bitmap image of characters (crop unnecessary white parts for a faster process, you can use Gimp’s automatic crop for that).

A scan in bitmap
A scan in gray levels
A rasterized font: to typeset it, you can use the template `characters-table.svg` in the `/input/` folder

Levels (have a white background, black characters but still shades of gray)

Small boost

Scale up the image to something like 254% with the “Sinc (Lanczos 3)” algorithm. We choose on purpose a non-round number of scaling to break the bitmap patterns.

Sharpen with “Unsharp mask”

Put the amount to the maximum and then search for the point where you don’t see

Radius too small
OK
Radius too big

Big boost

Scale up to 403%.

Threshold

Bad
OK

Baseline

When importing a bitmap, Fontforge scales up/down the bitmap so that it fits into the glyph box. If we use GlyphTracer 1.4, this ends up with different scales of glyphs. In order to prevent this, we can put a black rectangle of the height of the maximum ascendant and maximum descendant.

baseline

Bitmap

  • Change the color mode to Indexed mode with 1 black/white bit.
  • Save as a .bmp file.

Vectorizing with GlyphTracer

  • To launch GlyphTracer, there are two possibilities:
    • from your file manager, double-click on the file glyphtracer inside the glyphtracer-1.4 folder
    • from the terminal, go to the glyphtracer-1.4 folder and run ./glyphtracer. This will let you know more output in case of errors.
  • Feed in the .bmp image in 1 bit (otherwise it will complain).
  • For each given glyph, click on the letter you want to use.
  • Change the characters subset in the bottom left dropdown menu to select more glyphs.

glyphtracer

Post-production

Merging fonts

In case you want to complete an existing font, you can use the script mergeFonts.py.

python mergeFonts.py fonte1.ufo fonte2.ufo ...  fonte17.ufo fonte-out.ufo

Metrics and kernings

A big part of type design is about managing the white space around the letters (metrics) and exceptions for specific couples of letters (kernings).

  • For the metrics, we make an auto-spacing while generating the .sfd file with GlyphTracer.
  • For the kernings, you can try the tool (Kernagic)[https://github.com/hodefoting/kernagic].

But if you want to get back metric and kerning data from an existing font, you can use the script mergeSpacing.py. It can be any font format than .otf.

python mergeSpacing.py font.otf original-font.otf spaced-font.otf

Troubleshooting

My image is too big to manipulate it.

Split it into several images and generate several .sfd files. Then you can merge the fonts with the script mergeFonts.py.

From the terminal, I have the following error:

File "./glyphtracer", line 415
    except Exception, e:
                      ^
SyntaxError: invalid syntax

This means your fontforge runs with python3, whereas the majority of installs run still with python2. I didn’t find a convenient way yet to maintain both versions at the same time. Let me know and I send you the version for python3 which I use.

I have several shapes overlapping on the same glyph

This is probably because you generated twice the font. I’m afraid you’d have to close and restart GlyphTracer.

Snapshots | iceberg

Inside this repository

Log

 

Stéphanie Vilayphioushouted

— 2 images d'exemple à vectoriser: 1 déjà en bitmap, l'autre en niveau de
gris

Saturday, 10th January 2015 - 16:57

 

Stéphanie Vilayphioudivulged

— renamed input files + a rasterized example

Thursday, 15th January 2015 - 14:41

 

Stéphanie Vilayphioustated

— renamed the rasterized file to match the other files

Thursday, 15th January 2015 - 14:44

 

Stéphanie Vilayphiouexpressed

— 1st commit of the read_me made on a pad

Wednesday, 21st January 2015 - 23:17

 

Stéphanie Vilayphiouspoke

— documentation pictures to go along the readme

Wednesday, 21st January 2015 - 23:17

 

Stéphanie Vilayphiouinterpreted

— renamed the readme file (I never know how to write it...)

Wednesday, 21st January 2015 - 23:21

 

Stéphanie Vilayphioubring out

— images of the readme pointing to git.constantvzw

Wednesday, 21st January 2015 - 23:42

 

Stéphanie Vilayphioulet loose

— remade header structure

Wednesday, 21st January 2015 - 23:44

 

Stéphanie Vilayphioutalked

— documented GMIC part

Tuesday, 27th January 2015 - 15:52

 

Stéphanie Vilayphioushouted

— documentation up to export all layers to png

Monday, 2nd February 2015 - 22:34

 

Stéphanie Vilayphiouconfessed

— Moved on the documentation process.

Plus a new script to import png files into Fontforge and autracing it
directly in Fontforge through a python script.

Usage:
python png2sfd.py MyFontName

Tuesday, 3rd February 2015 - 00:31

 

Stéphanie Vilayphiourendered

— markdown yeah

Wednesday, 4th February 2015 - 10:52

 

Stéphanie Vilayphiousong

— adjust scale, font ascent and font descent based on the letter 'h' for now. \n Plus some attempt of autokerning.

Wednesday, 4th February 2015 - 10:53

 

Stéphanie Vilayphiouargued

— glyphtracer 1.3 from https://launchpad.net/glyphtracer

Thursday, 19th February 2015 - 10:34

 

Stéphanie Vilayphiouargued

— Modification of GlyphTracer.
It's now using Fontforge python API to load PNG into each glyph and then
autotrace it directly in Fontforge.

Thursday, 19th February 2015 - 10:35

 

Stéphanie Vilayphiousaid

— Changed the font info of the blank.sfd.

Wednesday, 4th March 2015 - 11:24

 

Stéphanie Vilayphiouargued

— ménage

Wednesday, 4th March 2015 - 11:26

 

Stéphanie Vilayphiougave away

— ménage + README updated + try to correct positioning in GlyphTracer

Wednesday, 4th March 2015 - 11:28

 

Stéphanie Vilayphioudisclosed

— script mergeFonts: combine several fonts (even more than 2) into one new font

Wednesday, 4th March 2015 - 11:39

 

Stéphanie Vilayphiouspilled the beans

— relative path to blank.sfd

Friday, 6th March 2015 - 14:45

 

Stéphanie Vilayphiouinterpreted

— version 1.3

Friday, 6th March 2015 - 14:47

 

Stéphanie Vilayphioutweeted

— A new script to merge metrics and kerning data from an existing font.

Monday, 6th April 2015 - 17:57

 

Stéphanie Vilayphioubabbled

— update images + something to see at the tip of OSP website

Monday, 6th April 2015 - 18:27

 

Stéphanie Vilayphioulet the cat out of the bag

— README updated to show how to prepare the lines for good scaling.

Tuesday, 7th April 2015 - 00:32

 

Stéphanie Vilayphiouverbalized

— put back to zoom 1 when generating SFD to avoid errors of splitting the file

Wednesday, 15th April 2015 - 15:04

 

Stéphanie Vilayphiouconfessed

— Removed the scaling from the script.
We set the vwidth ("vertical width", meaning the height of the font)
so that the import of the PNGs are all scaled to this height.

Thursday, 16th April 2015 - 10:33

 

Stéphanie Vilayphioudivulged

— add more zoom levels

Tuesday, 28th April 2015 - 16:39

 

Stéphanie Vilayphioudisclosed

— iceberg pictures for OSP website

Tuesday, 28th April 2015 - 22:32

 

Stéphanie Vilayphioustated

— completed latin 1 set

Wednesday, 29th April 2015 - 15:51

 

Stéphanie Vilayphiouunwraped

— generates space characters

Wednesday, 29th April 2015 - 16:25

 

Stéphanie Vilayphioudisclosed

— Forgot to add the Diacritics in drop down menu.

Possibility to change the font height and ascent from the GUI.

Wednesday, 29th April 2015 - 16:56

 

Stéphanie Vilayphiousaid

— SVG template to typeset your font before rasterizing it.
We used it to generate the UmeLoop family:

![UmeLoop](http://osp.kitchen/work/balsamine.2015-2016/tree/master/iceberg/Capture%20du%202015-04-13%2021:31:23.png)

Wednesday, 29th April 2015 - 17:03

 

Stéphanie Vilayphiousaid

— update readme

Wednesday, 29th April 2015 - 17:13

 

Stéphanie Vilayphioutweeted

— markdown in the code?

Wednesday, 29th April 2015 - 17:14

 

Stéphanie Vilayphioubring out

— added screenshot of glyphtracer in the readme

Wednesday, 29th April 2015 - 17:16

 

Stéphanie Vilayphioutalked

— copyright update

Tuesday, 16th June 2015 - 11:27

 

Stéphanie Vilayphiousaid

— fixing unicode names

Tuesday, 16th June 2015 - 11:27

 

Stéphanie Vilayphiouexpressed

— parenthesis in functions so that it's compatible with python3

Tuesday, 16th June 2015 - 11:28

 

Stéphanie Vilayphiougave away

— Update the README with a first shot at the history of Fons.

Plus putting some HTML to get figures as we can't use Alex's
markdown-figure extension right out of the box.

Tuesday, 16th June 2015 - 15:27

 

Stéphanie Vilayphiousaid

— a png preview of the characters-table.svg as browsers don't digest multi-line text

Tuesday, 16th June 2015 - 15:30

 

Stéphanie Vilayphioudiscovered

— forgot colons in the CSS

Tuesday, 16th June 2015 - 15:38

 

Stéphanie Vilayphiouverbalised

— corrections

Tuesday, 16th June 2015 - 15:43

 

Stéphanie Vilayphiouwhistled

— corrections bis

Tuesday, 16th June 2015 - 15:49

 

Stéphanie Vilayphiouemited

— corrections ter

Tuesday, 16th June 2015 - 15:50

 

Stéphanie Vilayphiouclaimed

— guillemets typographiques

Tuesday, 16th June 2015 - 15:52

 

Stéphanie Vilayphiouinterpreted

— add python-fontforge dependency

Friday, 5th February 2016 - 17:06

 

Stéphanie Vilayphiouexposed

— remove the cheking of potrace install

Friday, 5th February 2016 - 17:06

 

Stéphanie Vilayphiousaid

— write_sfd was looking for 6 params, 4 only were given. Fons is back on track\!

Friday, 5th February 2016 - 17:23