Web graphics: I saw the future and it is vector

Web graphics: I saw the future and it is vector

Summary: In these mobile and bandwidth-conscious times, vector graphics have made a surprising and welcome renaissance in the form of icon fonts.


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 icon fonts
Font Squirrel offers web fonts free for commercial use. Handy.

Heck, you can even create customised, cut-down versions with Fontello.

Fontello easy iconic fonts composer website
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.

Symbolset 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.

Topic: Software Development

Jake Rayson

About Jake Rayson

A web designer since the 20th century, I am a pragmatic advocate of Free Software and I use proprietary software when appropriate. I made the full-time switch to Linux back in 2007, and my desktop tools of choice are Linux Mint, Inkscape, GIMP and Sublime Text.

As a Front End Developer, my core skills are HTML5, CSS3 and jQuery, and my working life reflects my commitment to open standards and accessible websites (ie accessible by everyone, regardless of browser, platform, ability or technology).

For web publishing platforms, I use WordPress for ease of use and Drupal for more complex solutions.

I am also learning about Ruby, Rails, Sinatra and CoffeeScript. I like the minimalist Ruby Way. To this end, my personal portfolio website is built with NestaCMS.

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.


Log in or register to join the discussion
  • Scalability Is More Important Than Ever

    I think the scalability factor is big when it comes both to fonts and icons themselves. In this age of 3.2 inch mobile phone screens and 27 inch monitors, but especially small, high resolution screens (whether you call them "retina" or not), scalability has become more important than ever. It's much more practical to start using scalable images, and that means vector images.

    Of course, like always, a standard would be good, and a good standard is an open standard like svg.
  • The Idea Of Scalable Fonts Goes Back To The 1980s ...

    ... possibly earlier.

    The problem is that, at common screen pixel densities, common text sizes look absolutely awful without careful tuning of the rasterization process. This is called “hinting”. Indeed, many fonts drop to pregenerated bitmaps at these sizes, foregoing the scalable outlines altogether.
  • Great

    But if the past is anything to go by, those inadequately small screens will quickly become a thing of the past and bandwidth limitations will disappear faster than bandwidth saving ideas take hold.