Version 6.5

relax with a cup of green tea


Simon Cox

28 Jul 2010



With HTML5 finally emerging from the primordial soup I thought it was time to have a look at where we have got to with fonts on the web, what today's techniques are and what is new in the world of the digital hot metal.

Whats going on at the moment

Typography has long fascinated me - I’m not a great practitioner but am a lover of the art and to me typography is one of the foundations of great visual communicative design. So my move away from print in the mid to late 1990’s to the evolving web, whilst very exciting did make me reluctantly lower my expectations on quality of design for the web. We have always been restricted to just a few commonly available platform fonts which are all fairly pedestrian. Now however with html 5 finally gathering speed and, possibly most importantly, IE9 about to be delivered (I know - but it could tip things couldn’t it - IE still has the big pie slice),

So I recently got an iPad - which is great - and this week I spotted a font creation programme. I had a copy of Fontographer back in the mid 90’s and created a few partial fonts for my own use so I had a good idea what this was going to involve. I purchased iFontMaker from the App store for the reasonable amount of around £4 and within seconds was able to begin to create my own font. iFontMaker allows you to set up a ghost font as the example t trace over and within 30 mins I had produced a simple Comic Sans type font including upper and lower case, numerical and several other glyphs. I then uploaded the ttf file from the ipad to the website where I was able to download it and install on my Mac!

Next I uploaded the ttf file to FontSquirrel and created a whole font kit which I downloaded and installed into my website, creating live typeface of my own creation in about 40 minutes.

Useful (to me at least) Webfont links of some sites in this space at the moment: See image in Gallery.

Fantastic - but perhaps not quite as easy to set up as the Google API offering or for that matter more commercial options like Typekit.

I have include some links to further reading about Webfonts.

and there's more! - an update

Incidentally the W3C has today published its first working Draft for WOFF setting a stake in the ground for us -

17th August 2010
Last night I attended the August London Web Standards meeting where Richard Rutter, (@clagnut)  from Clearleft , gave an inspirational talk about the future of web typography - and its very exciting to typo nerd like me - ok i appreciate gorgeous type more than I can practice it (does that make me a typographical pundit?). There are loads of CSS3 controls being ratified that allow a massive amount of control over typography.

The font size adjust property looked incredibly useful but difficult to work out quickly (I have yet to try). But it was the font stretch property that was most exciting - though if this will ever be properly implemented we will see. this allows the designer to specify adjustments to a font to get its variations: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded - and these have to be available of course.

The one real question I have is do the current crop of web designers have the skill sets to use them? Possibly not. Certainly the younger ones with no print design background will have very limited understanding and instruction on typography - not their fault as the web has been sadly lacking in this area so they have not needed to learn. The older ones of us who cut our teeth on print design do have those skill sets - can’t keep on old dog down!

One very interesting comment last night was that in future designers could be designing for print using a web browser - create your design in html with CSS and then print to a pdf for sending off to the printers! Web based fonts may be a lot cheaper so we may see web based page layout tools making an appearance.

21st August 2010
Webtype has now opened up as the latest online service.

comments powered by Disqus