Saying the Verbose Gist

I was not expecting to have this much to say on the intersection of fonts and SVGs—somehow my list of topics is now longer than when I started?

Yet it’s a (relatively) new month, and I think it might be time to move on from SVGs—at least for now.

Here are a few lingering observations that you as a type designers may find noteworthy about SVGs:

  • Layer order The “layer” order in SVGs is upside-down relative to what most designers using your fonts would expect: the first shape in an SVG is the at the bottom, and the last shape is at the top
  • Baseline origin The origin point for text coordinates comes from the baseline, not a bounding box  
  • Base64 You can encode a font into a text string within CSS within individual SVGs, and there are specific situations where this really is better than outlining type or using the font externally
  • SVG fonts The SVG font file format (which you may remember from when you first started distributing web fonts) is one of those rare cases of browsers removing once-approved feature
  • Save as One thing I’ve been asked by type designers showing custom logos or lettering in SVGs on their site: if you want to use them in the browser, you have to give the visitor[’s browser] the file—you can’t truly “protect” it

Here’s the full series from the last few weeks:

Until next time,