The Glyph View can show a background image for each layer. This feature can be used to import scans of drawings or of printed typefaces for digitisation.

Adding images

To add an image to the current layer of the current glyph, simply drag & drop any .png, .jpeg or .tiff file into the Glyph View.

Each layer can contain only one image.

To add multiple images to a glyph, use multiple layers (one for each image).

Imported images are stored in an images directory inside the UFO3 font.

In RoboFont 1 (UFO2), only the path to the image file is stored in the UFO (the image data is not). Use the option Save images next to the UFO to collect all images inside an assets folder next to the UFO file.

Adjusting images

Images can be moved, scaled and rotated with the Editing Tool.

The contextual menu (activated with a right-click) offers some options to adjust the image:


action description
Brightness Adjust the brightness of the image.
Contrast Adjust the contrast of the image.
Saturation Adjust the saturation of the image.
Sharpness Adjust the Sharpness of the image.
Color Colorize the image. Use Red, Green, Blue & Alpha sliders to adjust the color.
Set Scale Opens a sheet to adjust image size and positioning.
Lock Image Locks the image, so it cannot be edited by mistake while editing the contours. Use the contextual menu (right-click) to unlock it.

Adjusting scale

Before you can start digitising an image, you’ll need to adjust the scanned drawing to the glyph’s coordinate space.

The Set Scale sheet makes it easy to position and scale your image by clicking on 3 reference points:

  1. The origin point, or (0, 0).
  2. A second point along the baseline. This will define the x-axis.
  3. A third point to define the height of the image. This point can be at the x-height, cap-height, ascender or descender.

The point positions are editable and can be fine-tuned after the points have been created (just click on a point to move it).

When you’re done, click on the Scale button to apply the settings. The image will be transformed to match the 3 points.

Deleting images

To delete an image, select it with the Editing Tool, and press the backspace key.

Last edited on 02/06/2020