Wow! Look What You Can Do With WOFF Typography

Tweet

Lost World’s Fairs is a series of CSS font experiments designed to advertise fictitious World Fairs. My apologies if I am the last to know about this and these gorgeous typography designs are old news, but I only saw them today and thought they were quite beautiful (Atlantis being my particular favorite). The sites were set up to showcase Internet Explorer 9’s WOFF support.

What’s WOFF?

WOFF (the Web Open Font Format) is an important standardized format for using fonts on the web and these designs illustrate how much closer web typography is coming to the capabilities of print work. There is still a long way to go but this is encouraging and inspirational.

WOFF allows TrueType, OpenType or Open Font Format fonts to be embedded in a web page. Microsoft, Mozilla and Opera are backing the project and support is already built into Firefox 3.6 and above, Chrome 5 and above, Internet Explorer 9 and the next version of Safari.

The Lost World’s Fairs experimental sites were designed and developed by Frank Chimero, Naz Hamid, Trent Walton, Dave Rupert and Jason Santa Maria, known collectively as “The Friends Of Mighty”. The sites use WOFF in conjunction with Typekit. Jason said on his blog:

From the start, we agreed to do something in three parts (one by each designer), and more importantly, something that didn’t look like an article or a blog. Aside from some of the technical advantages the WOFF format provides, there’s little about it that’s aesthetically different than other formats. So we resolved just to have some fun and design something with strong typography as its centerpiece.

El Dorado in 1924 by Naz Hamid.  You can see the fonts used in this design here.

NazHamid

Atlantis in 1962 by Frank Chimero. You can see the fonts used in this design here.

Atlantis

The Moon In 2040 by Jason Santa Maria. You can see the fonts used in this design here.

TheMoon

See Jason’s blog to read more about how the project came about and how the designer’s worked out their designs. The Lost World’s Fair is an interesting and inspirational project and I’m looking forward to seeing more designers pushing out the web boundaries with typography.

What do you think of the design, typography and layout of these sites?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.deathshadow.com deathshadow60

    Well… “Lost worlds fairs” starts out with a glorified splash page with the continue link below the fold with nothing to make it stand out — since splash pages are a no-no and bounces are bad, it’s a /FAIL/ at web design before you even get to the meat of the site — which blows SO much time on whitespace you can’t even find the content and it’s not even 1280 friendly — don’t even want to THINK what 1024×768 or lower users think.

    Of course, the endless nested DIV [b]WHILE[/b] using HTML 5 elements just proves what I’ve said all along. As Dan Schulz used to say [i]the people who made endless nested tables for no good reason now just make endless nested DIV[/i] — to which I append with HTML5 now just justifiy their pointless wrappers with new tags and STILL slap extra DIV around elements for no good reason.

    Perfect example of what I mean when I say “Very pretty, but what the hell good is it?” — as evidenced by the 700k+ PLUS page sizes once you figure the font embeds into the equation.

    • Brian

      You missed the point so much, I’m not entirely sure you’re serious.

    • Max Luzuriaga

      Chill out, dude.

      1. “Below the fold.” is a myth! Users are used to scrolling!
      2. White space is not a bad thing!
      3. There’s obviously a reason for all the nested divs, they’re some pretty complicated designs going on here.

      I really think you’re missing the point here. It’s a fun experiment with web fonts, nothing more.

    • http://www.pixeline.be pixeline

      Allo? It is meant to be -and announced as- an experiment in design, a playground. Get some sleep…

    • http://www.toddprouty.com/ toddprouty

      You, sir, are a master of satire! At first I thought you were making a serious comment and nearly took the bait, but I finally caught on. Bravo! Very amusing.
      But seriously, Lost World’s Fairs is a great demonstration of WOFF, isn’t it? Web design just got a lot more fun. “The Friends of Mighty” would agree, I’m sure. Creating those pages must have been a blast.

  • H-Bomb

    @deathshadow60 You know it’s for fun and a demonstration, right?

  • SH

    deathshadow60 – You probably use IE6 too huh?

  • http://www.deathshadow.com deathshadow60

    I was serious actually, it’s a perfect example of print designers gone nutters online and why I dread the day when websites will be doped to the gills with custom fonts in our wonderful return to the days when really L33T designers did everything with comic sans.

    It is SO ripe for abuse that it will be no surprise that when it becomes commonplace, user CSS to override all that crap is likely to become commonplace. That or someone will make plugins to do it like they have with every other abuse of the technology that does NOTHING to enhance the user experience of actually getting at CONTENT.

    It’s very pretty though.

  • Sergeant Rock

    It is a demonstration of the possibilities. It is not an attempt to build a realistic website. Are you finding this difficult to grasp?

    You may also have noticed that the content is made up of lies – there isn’t a Moon Exhibition. Quick – alert the relevant authorities

    And simply because the dim will abuse a new technology is no reason not to introduce it.

  • Just… Wow

    deathshadow60 – So good web design is lime green text on a dark background? Websites can be fun, too.