Icon Fonts + FitText.js or responsive SVG sprite?

[Preface Studios Ltd]

I like the idea of using an embedded font for icons, however I recently encountered some issues when I tried to make them responsive. With inline images you can easily use max-width:100% to get images to show at their proper size and decrease in size gradually while the browser window decreases in size. However with font icons this is quite tricky, you could use media queries to adjust the font-size but this is only useful for icons which are relatively small or the same size as text.

The icons I’m using are pretty big on a desktop screen, and shrink down to about 25-30% of their size in a mobile layout. I managed to get them to display well using http://fittextjs.com/ but I don’t think this is ideal, I’m concerned about memory usage on mobile and the authors themselves state it should only really be used for headlines.

What would be ideal in my mind is to use an SVG sprite, but I’ve had a pretty tough time trying to get these to work responsively. In fact I’ve found it difficult to get any sprite sheet to work responsively when the individual sprite images themselves aren’t fixed in size. I think @ethanmiller is having a similar issue to me (at https://css-tricks.com/forums/discussion/21942/responsive-sprites-using-compasssass/) . I did sort of manage to get them to work, but this method doesn’t really feel right and seems a bit hacky (blog post about it here http://chiefalchemist.com/responsive-css-sprites-proof-of-concept-v0-1-0/).

With the increase in retina displays I’d really like to be able to use SVG with a fallback to PNG but I’m not sure of the best way to go about it.

Has anyone else encountered similar problems or thought about the best way to do this?

PS: You can see an example of the icon font and fittext.js method here -> http://primecuts.org.uk/old/chris/

[Author]

Posts