Asset fonts: text & images working in harmony

Written by Mish Maudsley on 19th June 2013

(Last updated 18th March 2022)

It’s just letters on a screen right, what’s the big fuss? A wise man once said “95% of the information on the web is written language.” When you look at it in those terms, letters are the most vital ingredient of a website and the method we use to create them really does matter.

This article is a summary of current techniques being used to render type on-screen (be it mobile, tablet or desktop) and how those techniques are being used in some very natty ways to attempt to solve some of the wider issues thrown at web designers by our multiscreen existence.  Primarily how to deal with scalable images on the web.
We explore how the humble SVG (Scalable Vector Graphic) has been thrown into the spotlight again with its capabilities to deliver scalable icons on the web, and its almost magical quality of being able to contain media queries and deploy multiple rasterized images!

The enlightened age of web fonts


We’ve made fonts on the web pretty

Thankfully, gone are the dark ages of being restricted to system fonts and image substitution (bad for accessibility, translation engines, file size, flexible layouts etc, and from a SEO point of view, makes as much sense as putting a mime artist on the radio).
Now we have an ocean of choice and thanks to the @fontface css rule and web font providers, such as Typekit, Font Deck & Google fonts, we can now deliver beautiful fonts and handcrafted typography, made from real-life type, to our websites with a few lines of code.
Web fonts not only mean great looking typography, but because it’s all live type, it’s accessible to search engines and screen readers, easy to update in a CMS and perhaps most pertinent to this article - it’s scalable.

Scalability


This approach of using Web Fonts has proved very popular. We can now deliver a handpicked font that is scalable to any size. This scalable nature of web fonts is so appealing, especially in this age of adaptive/responsive web design, that people started to question if this ability could also be applied to images on the web.

Scalable images

Imagine... images that were as scalable as web fonts. Meaning they would scale with your screen size and resolution, without any loss of image quality.
In fact, scalable images have been possible for years. Vector based images are commonly used in the design industry, and SVGs  have been an open web standard standard with the W3C since 1999. But if the image has any level of complexity, the file size can prove to be an issue, and they are only really suitable for simple graphics, not photographic imagery.
This may explain why they have been commonly overlooked as a means of delivering images on the web, until recently.  However this does mean that they have a very important role to play in the delivery of simple images eg: icons. And this is where the “scalable image” story gets interesting.

Is it an image, is it a font? No, it’s asset font!

The nature of SVG graphics means they are entirely appropriate for creating icons and other simple images for use on the web.

The Method

Heres a brief outline of the process used to make an asset font
  •  Create some SVG vector icons (in a vector based package such as Illustrator)
  •  Import them into font design software,
  •  Embed your SVG artwork into the font as a specific letter
  •  Export your new font with your icons nicely wrapped inside
  •  Deploy the font on your website.
  •  Bingo, scalable icons!
or for a more indepth ‘how to’ article check out this asset font tutorial by Clearleft’s Josh Emerson. 
An really great alternative is the make your own asset fonr in the handy, user-friendly app at icomoon

How does this work?


Pixels = Standard web images
Standard images online, be they jpg, gif, png or bitmap are all made of pixels, you can increase the size of these, but the image quality will be reduced the bigger you go, leading to horrible, fuzzy images.
SVG = web text

Text on the web doesn’t use pixels, instead the text rendering engine used is an SVG property that is applied to the text in your HTML and interpreted by the browser and operating system’s text rendering engine. Because the property is vector based, rather than pixel based, it will scale to any size without any loss of quality. Creating a simple image as an SVG means it also has this vector scalability when used online.

What’s the catch?

This use of SVG asset fonts, will require an image fallback for IE7 and older browsers, as the browsers rendering of the SVG icon tends to be pretty unpleasant. It could also be seen as an unnecessary "design luxury" for low bandwidth mobile users. Read more on "web fonts and the critical path".

The future?

The nature of SVGs also allows a whole range of other powerful capabilities. The magic is that SVG supports both media queries and rasterized/pixel based images all wrapped up in a neat little package. So, not only can we use them as scalable graphics wrapped inside a font. We can actually use SVGs on their own, as a method of delivering different sized images to different screen sizes. This elegant and minimal approach had been dubbed the Clown Car Technique by its creator Standardista and it is something we are exploring inhouse at Liquid Light at the moment, and we will report on our findings soon.

Conclusion

It’s a pioneering and exciting time for scalable images on the web, as we try new methods and techniques across the industry. If you’d like to share your approaches, why not drop us a line?
 

Further reading:

Top tips for resolution independence

This article was posted in Design by Mish Maudsley