A long time ago in a far-away issue of .net magazine, I penned an article about Flash entitled I have seen the future and it is vector.
FutureSplash had recently been acquired by Macromedia, and in the days of 28.8k modems speed was everything. Vector graphics promised an interactive and infinitely zoomable visual experience, all at a miserly file size because they were so much more efficient than bitmap images, the only kind of images you could get on the web.
The downside? Proprietary standards. Macromedia and then Adobe owned the copyright and held the development reins.
Fast-forward to a friendlier future, and bandwidth is back on the cards, because now it's all about mobile first. Somebody far cleverer than me — perhaps Brad Frost? — tweeted that text is vector. Wow. I dropped all my scattered thoughts in a clatter on the floor and pondered those words again:
Text is vector
Essentially, HTML, CSS and JavaScript are a set of instructions sent to the client software. Rather like a vector image is a set of mathematical descriptions. Which means they are small in comparison with bitmap images — unless of course you gratuitously include templates and libraries willy nilly and without thought.
Even better than that, Jon Hicks wrote a 24 Ways post about displaying icons with fonts. Using @font-face and icon fonts, you can create scalable, colourable, drop-shadowable and adorable icons. Font Squirrel is a magnificent site where you can download your very own custom web fonts, drawn from a wide selection of dingbats.
Font Squirrel offers web fonts free for commercial use. Handy.
Heck, you can even create customised, cut-down versions with Fontello.
Fontello allows you to create custom icon fonts. Spectacular and bandwidth-saving.
And then, to top it all, those clever folk over at Oak Studios have created Symbolset, which is a collection of semantic symbol fonts. Using the mystical powers of OpenType fonts and the magic of ligatures, love can be transmogrified into ♥. But copy ♥ and you copy love. Give it a go on the website.
The Symbolset website lets you create semantic symbol fonts.
A picture may be worth a thousand words but vectors, through the power of text and fonts, have shifted the balance.