PNG to OTF conversion

PNG to OTF is a format conversion in name only. A PNG is a grid of pixels; an OTF is a set of mathematical curves with metrics, a character map and a name table. Nothing is converted so much as re-derived, and the quality of that derivation depends almost entirely on the PNG you start with.

Why PNG is the right input

PNG uses lossless compression, so a stroke edge in the file is the edge you drew. JPEG is lossy, and its artefacts cluster exactly where contrast is highest — which, in a picture of black letters on white paper, means all along the edges of every stroke. Those artefacts become a fuzzy grey halo, and a threshold has to decide whether the halo is ink. Sometimes it decides wrong, and you get lumpy outlines.

WebP can be either lossless or lossy. Lossless WebP behaves like PNG; lossy WebP behaves like JPEG. If you have the choice, export PNG.

Exporting a PNG that converts well

If your letters exist as digital artwork rather than on paper, you control the export, which means you can eliminate most conversion problems before they exist.

  • Export at a generous size. Around 2000 pixels across a full alphabet row gives the tracer enough resolution to find fine detail without being slow.
  • Export pure black on pure white. Do not export on a transparent background unless you have to — flattening happens anyway, and you control the result better by choosing the backdrop yourself.
  • Turn off anti-aliasing if your tool offers the choice and your artwork is hard-edged. If it does not, leave it on; a little edge softening is handled fine.
  • Do not add drop shadows, glows, textures or paper effects. Every one of those is ink as far as the threshold is concerned.
  • Keep the letters separated. Overlapping shapes merge into one glyph.

From pixels to outlines

The trace finds the boundary between ink and background and fits Bézier curves along it. Two settings shape that fit. Detail decides how small a feature has to be before it is discarded as noise and how tightly the curve hugs the pixel boundary. Smoothing decides how readily a sharp corner is replaced with a curve.

The default for smoothing is measured from your image rather than fixed, because the correct amount is a property of the artwork. A geometric alphabet with square corners and a brush script need opposite treatment, and applying one value to both damages one of them.

From outlines to an OTF

Outlines alone are not a font. Each traced shape is scaled into the font's design grid, given a baseline and side bearings, assigned a code point, and written into an OpenType file along with the tables a system needs to install and render it.

The font is then re-parsed from its own bytes and checked before you are told it is ready, so a file that silently dropped a glyph during construction is caught rather than shipped.

What is in the export

Alongside the OTF you get the traced artwork as an SVG, one SVG per glyph, a font.css with an @font-face rule pointing at the OTF, a mapping.json listing every glyph and its code point, a specimen.html for viewing the font in a browser, and a README covering installation on macOS, Windows and Linux.

Questions

Can I convert a PNG with a transparent background?
Yes. Transparency is flattened before tracing. If the result surprises you, export the PNG on a white background instead so you control what the transparent areas become.
Why does my OTF have fewer glyphs than my PNG has letters?
Usually because two letters touched and were traced as one shape, or a stroke was too faint to survive the ink threshold. Increasing background removal recovers faint strokes; more space between letters fixes merging.
Can I convert a screenshot of a font I like?
You can trace any image you have the right to use, but tracing someone else's typeface produces a derivative of their work, and most commercial font licences prohibit exactly that. Draw your own letters instead.