help.SvgLineFonts - tooll3/t3 GitHub Wiki

Designing, Converting and rendering Single Line Fonts

image

Preface

Single line fonts can be a very expressive content type for visual effects and typographic experience. Sadly this it's on the outer fringe of creative and commercial interest so single line fonts and tools to create them are rare and finicky.

Requirements

  • Process for creating these fonts should support baseline, kerning, etc. made of a limited set of points or curves.
  • Should work for MonoSpaced and varying spaced font.

SvgFont is the goto file format for defining single line fonts. It's a well defined format. Sadly exporting single lines output is not really supported by most font design solutions.

Things I have tried...

  • Searching for fonts online gives surprisingly few results.
  • Searching for editing tools that are capable of rendering / exporting: So far I've tried:
    • GlyphsMini - As far as I can tell, it does not support exporting SLF.
    • Figma SVG-Export - not feasible because the outline and width of glyphs is no longer accessible due to optimization. Rendered bounding boxes will only be exported if visible, then, well, they ARE visible.
    • Figma PlugIns - Introduces some artifacts and does not correctly set the unicode attribute.
    • BirdFont - Supports SvgFont export but outlines the stroke before export.

My current solution

  1. Design fonts in Figma. You can see this example
  2. Add Frame with UniCode character titles or HTML-encoded titles for special chars (e.g.   for space).
  3. Make sure that these frames have a background fill color so we can derive glyph boundaries.
  4. Group all glyph frames and mark for export to SVG.
  5. Export SVG intermediate file with Id attributes enabled.
  6. In Tooll3.6 use the Convert SvgFont from the Utilities Windows

Sadly this process does not:

  • Correctly transfer font information like baselines
  • Support Kerning-Pairs

In the long term

Other resources