Using SVG icons instead of web fonts


Permalink 12:57:42 pm, by Greg, 169 words, 64 views   English (CA)
Categories: Announcements; Mins. worked: 0

Using SVG icons instead of web fonts

We've been discussing switching from woff fonts to SVG for site icons. Some of the problems we have with web fonts (woff etc.) are:

  • Line height and rounding issues look slightly 'off' (spinner icon seems a bit wonky, vertical alignment is off by a pixel or two, etc.)
  • Editing web fonts relies on external service and rebuilding each time we add an icon
  • Using unicode addresses for all glyphs is impossible (*).

* To maximize design flexibility we have included multiple versions of, say, a map icon. We cannot give both of them the same unicode address. To overcome this we'd need multiple fonts.
Also, sometimes it's impossible to find a unicode address for the glyph you want to use - so you use a private use area address, or you abuse an orthography glyph because it looks similar to your icon/glyph - see hamburger menu.

So, to explore the implications of making this switch I built a test file that uses 4 methods of doing this, along with my recommendations.


No Pingbacks for this post yet...


This blog is for academic tasks undertaken by HCMC staff, such as writing articles for publication, reviewing abstracts for conferences, preparing and teaching classes, or proofing other people's documents.


XML Feeds