Fonts as scalable vector graphics

How can you deal with one of the bigger problems in client development; the increasing fragmentation that is a result of multiple size, resolution and pixel density in the displays today? Consider the various sizes and resolutions on platforms like iPhone, iPad, Android phones and tablets, Windows Phone, Windows 8. You may think that the web is the solution, but just consider a retina class laptops and tablets. One suggestion from a major company is detecting the density and provide multiple graphics files! Just imagine the increasing bandwidth or increasing app file size.

There are a few facts that are working to our advantage though:

  • There are a shift from the unicorn vomit of pixels that’s been the graphics standard for a while now and a more clean and flat approach is preferred
  • The browser development and standards advancements in web technologies makes it possible to actually work with fonts on the web
  • You are no longer forced to use system fonts on the mobile platforms and can freely include and work with custom fonts

A way forward is to use vector graphics and font file as a way to collect and handle the vectors turns out to be an excellent solution. This way you have one simple way to install the graphics, select the image and also a way to scale to what ever size you need, regardless of target platform!

Creating the custom font

So with these advantages how do you go about and create a fonts file with your own vector graphics? First off, you need the graphic, there are a number of sources on the net with this already or you can use Illustrator or other vector art tool. Get rid of color data and try working with black and white only. The end result should be a SVG file for each graphical element you want to use as a ‘character’ in your device.

icomoonWith all this elements you have to create your open type font. There are either desktop font tools or you can use web services for this step. We often use the IcoMoon service. for creation the font files, get to the App section. Here you can import the SVG and then select and generate a font file.

When you are done generating the font you will have a zip file with a TTF, EOT and also fallback code handling web pages, so it’s an excellent service. Now we have all the assets needed.

Adding to your web page

The advantage of using IcoMoon is that the resulting files are not only the TTF font file. It also includes a sample HTML page, the corresponding CSS and JavaScript file as well as the other web formats like WOFF and EOT so you get a very robust way of incorporating fonts on the web regardless of the browser you are using.

There is even an option to have the font Base64 encoded and added to the CSS itself and the ability to move the glyph around to correspond to different letters. You can even generate PNG files to use as a ultimate fallback if all other fail and the user have a really old browser.

Adding to your device

For Windows 8 and Windows Phone you can look in to the post about Using custom OTF fonts in Windows 8 XAML. For Android, look at the article about Custom Typeface in Android. The same method can of course be used in iOS.

With this done you have manage to cut down the size and handling of graphics files quite a bit and you are also ready to take on any resolution screen they throw at you.

The symbol font used

Leave a Reply