Using a custom font as opposed to a system font has been a huge issue for web designers for a long time. Luckily there is sIFR and cufon, 2 methods we use to realize dynamic rendering of fonts on web sites. The latest browser generation (at least Firefox 3.5 and Safari 4) support the @font-face CSS rule which forces the font to download to the clients computer. The result is quite amazing but the results vary widely between browsers.

-

Speaking of sIFR and cufon, there appears to be more fish in that pond: FontJazz and facelift both offer custom font rendering but in very different ways. While FontJazz appears to be a cufon clone (which appears to work on many, even old browsers), facelift renders images in real time. Not sure if I am tempted to try these approaches as cufon works pretty well for us.

-

csstypeset is a nice tool that allows you to format small snippets of text using system fonts. On the left you have a WYSIWYG editing area and to the right your CSS code is generated. Bookmark!

-

Today everything is about em in CSS, no px anymore. Yeah, I know, how nerdy can it get. But seriously, this online tool helps you convert to em easily and thus enables you to create better stylesheets.

Our latest development KimWendellDesign.com just went live this week. We created this slick portfolio website with blog navigation in mind. Content is clustered into three different categories which can be switched on and off in real-time without re-loading. Content boxes can be re-ordered and – on click of a button – reveal detail overlays featuring a multi-media viewer (image slide shows or video clips). The team at Kim.Wendell Design, a rendering and animation firm, uses a custom CMS tool to manage content. Enjoy and let us know what you think.

Almost 3 years ago we started a project with the Asian American Art Centre (AAAC) in Chinatown to develop a digital archive. Impacted by 9/11, the AAAC received funding from the LMDC to help preserve and document the history of Asian American art in the US over the past 60 years. More than 1,500 files from over 170 artists form the basis of the digital archive. Together with AAAC’s team and professional archivists, we developed and implemented the archiving and cataloging software. Once the back-end was in place, archivists added content such as photos, scanned images, letters, and press articles. Finally SUPERMETRIC designed and implemented the front end of artasiamerica.org to make the largest digital archive of Asian American art accessible for everyone to learn and enjoy.

Using sIFR on foamex.com (rendering VAG rounded)

A while ago we came across sIFR, a method to render any font on a website using Javascript and Flash. sIFR works pretty much this way: you download the package, copy the Javascript into to the appropriate folders within your web project, use the included .fla file to create the master font for the web (obviously you need to have the font installed on your computer) and copy the exported .swf file into your web folder. sIFR takes text from your standard HTML markup (e.g. inside a <h1> tag) and substitutes each character with a Flash character. This is done after the page is loaded (the JS is placed before </body>). If Flash is not available on the target device sIFR nicely degrades to HTML. It’s a solid method but somewhat tricky to install and has a couple of other disadvantages. We always found that the rendering was not as good as using images but we never upgraded to sIFR 3 which seems to be better in this regard. In terms of cross-browser compatibility sIFR did a good job but character spacing is a little bit off between IE and FF/ Safari which makes it difficult if you want to control line breaks.

Using cufon on a transparent div

Recently I stumbled upon a new method called cufón and I decided to use it for a new project. The installation of the demo was really easy and results looked totally the same on all browsers. The method sounds more complex in terms of what technically happens but neither the developer nor the end user notices any of this. Cufón consists of two modules: a font creator converts a font into VML paths (I am using this awesome site) which are then put into the web directory of your choice together with one more JS file. Just like sIFR you are using regular HTML markup and apply a special CSS class to the parts you want to be picked up by cufón for font substitution. Just like sIFR, cufón will also degrade to HTML if scripts are disabled on the target device.

The results are amazing: it’s super fast, excellent rendering and works on all browsers and platforms. The only disadvantage is that text is not selectable as every single word is put in one <canvas> tag. In IE 6 where <canvas> is not available a different method is used which allows to select text but only one word at a time. We are currently developing 2 new projects using cufón and we will post results here as soon as we go live.

Update: There is quite a bit of write-up on the net comparing different font rendering methods:

• http://www.erenemre.com/2009/03/cufon-vs-sifrwhich-one-is-better/
• http://chriskjennings.com/2009/02/introducing-cufon-sifr-alternative/
• http://stackoverflow.com/questions/692990/sifr-vs-cufon-vs-typeface-js

Here’s a little online-app that get’s rid of theose line breaks for you. just paste and process… textfixer

How to organize your layer structure for the script

This is a great script for Illustrator: it automates the export of layers into individual JPG files.

I found this at the hicksdesign blog when I was looking for a smart way to export all 87 layers of a design explorations file to make a web presentation. The standard way of dealing with this (the ‘Save for Web’ option) would have taken me ages, but after some minor adjustments (and a bit of trial and error), this is has become most favorite tool at the moment. It just saves so much time!

Before you go, you need a clean file set-up — the script executes an export of each top-level layer, including all its sub-layers. I added a feature that adds any layers named ‘ALWAYS’ as visible on top of each export. This is good for keeping a browser window visible all the time in the background or a logo, or any other elements that never change throughout your layers.

The size of the export area is defined by a cropping mask, so make sure you have one in place  — otherwise the image will be cropped to the size of all visible elements on a layer.

Just throw the script in the folder Apps/Illustrator/Presets/Scripts and execute it will show up under File/Scripts.
(thanks Pete for helping me with the ALWAYS feature in javaScript!)

Download the jsx file for the script here as ZIP