A Festive Type Folly

23 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. gaus surahman

    This site own header is a good example, too, only a lot simpler and cleverer than this acrobatic folly :) Another real world example may be to mark some unpublished posts for admin where the huge 72px “UNPUBLISHED” word is rendered absolutely underneath the post contents.

    With the lack of font embedding, shall I think this is a low-tech approach against the Scalable Inman Flash Replacement (sIFR) technology? Yet, very inspiring, thanks.

  2. Nik

    Um. Doesn’t look like your reference image in any of my browsers, Safari included:

    http://informationage.co.nz/temp/folly.png

    Tested in newest public versions of IE, FF, Opera, Safari, Chrome on 32 bit Vista

  3. Drew McLellan

    Doesn’t look like your reference image in any of my browsers

    You may just need to do a hard reload to make sure you have the latest version of this site’s stylesheets.

  4. inspirationbit

    One can learn more from this little typographic eye candy than from some heavy CSS books on Web Typography.
    Thanks, Jon, you didn’t disappoint—rocking type on Web, as usual :)

  5. Patrick Algrim

    That’s great! I also experimented with something similar to this and must say it does get confusing at first, but once you wrap your head around it it becomes really easy to understand. Great job!

  6. Andrew

    Looks fine for me on first load, running firefox in leopard.

    So this is very impressive, a great example of some useful practices, and something I might try sometime. But I wonder – do you think that this has any real world application? There’s all the trouble of doing something like this, or you could just use an image replacement. You could even remove all of the nested spans if you did that.

  7. Matijs

    @Andrew first thing that comes to mind is that if it were an image you wouldn’t be able to select it to copy-paste it into a text editor.

    Besides, it IS a folly :)

  8. Chris Emerson

    It’s quite nice, but it makes it pretty unreadable. If you didn’t know what the title of this site was before you saw that, you wouldn’t have a clue what it was supposed to say.

    To me, that could say either ’42 to impress your ways friends’ or ’42 to impress ways your friends’

  9. Steve Avery

    Great article as always mate. 100% behind you regarding us designers/developers improving web typography.

    I was shocked to read from your bio that you have left Gr0w Collective. A great asset lost but one gained at OmniTI.

  10. Jon, remarkable article. Just like your logo made a remarkable impression on me when I first saw it a few weeks ago.

    One might argue that some follys have more than just “decoration” purposes since they send an actual, vivid message. This one says: You care about typography. Right off the bat.

    Great work. Thanks for sharing the technicalities of this with us. Although, I hope you’re prepared to start seeing follys like this throughout the web. I think you can just see them as tributes to the great piece of web-art that is your logo.

    Congrats & thanks.

  11. Andi Farr

    @Andrew, @Elliot: I think the trouble is that there is no longer a real-world application – if I saw a site carrying a header like this, I’d immediately be thinking ‘Ah, that’s from Jon Tan’s site’ :)

    So Andrew, there probably isn’t a direct real-world application of this tutorial. But that’s really not the point! This tutorial isn’t something to be taken directly and reproduced, but rather an insight into a different way of thinking about how type can be manipulated with CSS rules. It’s a primer which shows that you don’t necessarily have to think about formatting text in paragraphs or even words, but can really deconstruct it and do whatever you like. The end result of this tutorial and a bit of careful thinking about the type in your life could easily look very different – but no less special!

    Take care, Andi

  12. Jon Tan

    Jeff, Prisca, Vivien, Patrick, Vasily, Matijs, Elliot, André, Andi, Johns: Thanks for all the kind words, guys; I very much appreciate them.

    Andrew: An image replacement wouldn’t be near as much fun. :) In some ways, the folly is just an extension of the very real-world and useful h1 at Happy Cog , which breaks up the copy into logical chunks. This example is just an extreme version, evolved from one I did in 2006.

    Steve: You could say that Grow has been assimilated into the OmniTI borg – much of what we were is being ported there.

    Frankie: Classes would make it the HTML even more awkward than it already is. You could use sequential elements with adjacent sibling selectors if they had full historical support. In fact, child selectors could also be useful, too. Descendant selectors require nesting.

    Chris: Typography is about legibility, but not always. This is one of those times.

  13. Matt Radel

    Friggin’ sweet. It’s more simple than it appears initially, but it’s still not an exercise for the faint of heart. Very cool stuff Jon – thanks for sharing!

  14. Frankie Roberto

    @Jon I guess that depends what your definition of awkward is. I’d prefer:

    <span class=“2”>2</span><span class=“4”>4</span> <span class=“w”>w</span><span class=“a”>a</span><span class=“y”>y</span><span class=“s”>s</span>

    …as being more readable and workable. But maybe that’s just me.

    You could also then use the nth-child CSS selector (although that only works in more advanced browsers).

Impress us

Be friendly / use Textile