Fresh from the Lab: CSS3 Text-Warping
I got hooked on desktop-publishing the moment when I attached a text to a path for the first time in Freehand 3. It was magic. Suddenly you could create designs that used to take days or even weeks in less than an hour. If you take a look at late 80s/early 90s design, you will see how the new possibilities shaped the visual language of the time: twirlig, flying letters with zero gravity - from todays perspective its very much like the exaggerated stereo effects in records from the early sixties when music producers tried to show off all their new toys.
For some time now I have been breaking my head on how to create warped text in HTML. CSS3 has some handy transformations on board: rotate, skew, matrix, translate. Transform every glyph individually, bring it to the right position and you will get some nifty text following a path. Click on the picture below to see the proof of concept. All typography is pure HTML and CSS3, no Bitmap, flash or SVG in sight (fingers crossed the google font directory isn't down again right now).
The tool allows you to attach any text to an arbitrary bezier path or a circle. Click "Generate HTML" to get a chunk of HTML that you can copy and paste into your existing website then. Try it out here.
Use of fonts
Font warping isn't worth anything as long as you can't apply it to a wide array of fonts. As a consequence CSSWarp gives you access to the google font-directory and it is possible to use your local fonts (which admittedly can be tricky. See in-app documentation for more info). If you have flash installed, the app will show you a listing of the installed local typefaces. I would love to support web font services like Typekit, but right now I don't see how this should be possible without the support of the service providers. For now you're out of luck if you don't have a copy of your webfont installed locally on your machine. Don't forget to embed your fonts with @font-face declarations before you upload your HTML to the web.
I still have to test how good CSSWarp supports font replacement technologies. For sIFR I predict inconsistent behavior, because not every browser supports CSS transformations on swfs. I wouldn't recommend using sIFR anyway, as this will result in a Flash-Player instance for every single letter, not the worst method to melt your CPU. Cufon will most probably work, but as Cufon will create a bitmap *before* CSSWarp applys any transformation, expect bad kerning and a more or less blurry look.
Finally some words about file size. Every transform in the CSS for a warped text must be present in up to 4 flavours: -ms-, -o-, -moz- and-webkit-. One would expect that the CSS containing the sum of all these vendor prefixes would be unacceptably large, but still the stylesheet for the example above is only around 3Kb (gZipped) compared to around 30Kb (depending on loss) for the same graphic as jpeg. Seems we do have a clear winner here, but take into account that all the fonts in the graphic will sum up to some additional 200k. In the end it's a trade off: do you use your fonts only in one graphic or multiple times? Is crawlability and readability of text important for your site? If all these aspects have been taken into consideration, this method can help to enrich the visual experience of a website.
Please take your time to play around with the app. I would be glad if you send me some feedback to help me improve it and of course bug reports are welcome:
Open ExampleTweet me!"