Lost world’s type

February 13th, 2012 § 0 comments § permalink

I’ve always loved designing for the web. Knowing that I can launch something and a million (I hope) people can then see my work is a great feeling. What I’ve always hated though are the many restrictions plaguing website design. At the forefront is the limited number of fonts available. I grew up designing websites with just a handful of fonts—Helvetica, Arial, Times, Georgia, and Verdana. There are only so many ways to work with these five typefaces, that it took a lot to really make them not look stale. Enter 2010—and the birth of web type. With the release of CSS3 (Cascading Style Sheets) that same year which allow the designer to style all of their website elements—boxes, colors, and fonts a whole new world opened up. Suddenly companies like Typekit came on the scene allowing designers to use hundreds of different fonts that were served up by a font vendor who took care of all of the font licensing issues so the font houses could relax a little and let the new age of the web shine. A simple little javascript serves the fonts and voilà—you can now use more than just the five standard fonts in your website. Of course your viewers also have to have a modern browser and javascript enabled, but in this day and age I think you’re pretty safe. And if they don’t, well they just see one of the five trusty fonts you’ve used for years. A little technical side detail—the technology that allows this to happen is called Web Open Font Format (WOFF.)

Lost World's Fairs

For this weeks post I decided to look a little more in-depth at web type and chose the website www.lostworldsfairs.com. The site was created by some amazingly talented folks—Jason Santa Maria, Frank Chimero, Naz Hamid, Trent Walton, and Dave Rupert. The site came out of a request by Microsoft to do something cool to showcase their latest browser Internet Explorer 9. Out a of quick brainstorming session came the idea to focus on world’s fairs. But rather than design for existing fairs, the team decided to create fictional fairs that they would like to visit. So was born El Dorado, Atlantis, and the Moon. Of the three, Atlantis is my favorite overall. But I have great respect for the Moon which has a great use of typography. Keep in mind when looking at these—the type is NOT graphical images, they are really fonts. They are styled and placed on the page with nothing more than a few lines of code in the CSS.

El Dorado World's Fair

In El Dorado World’s Fair, Naz Hamid is bringing us back to 1924 with a sepia-toned design and big block-letter type. I love the illustration at the very bottom of the train—a linocut design. He is suggesting a bit of screen printing as some of the type is slightly out of register. I do feel that the dates July 21-30 are just a little strange in their combination of a serif for the J, 3 and G in the second line with a tall, thin sans-serif for the rest of the copy. They just seem a little off. Overall the design works though and I like to keep scrolling back and forth at the top of the page to watch the Zeppelin slowly lift off the page. The addition of a colophon for each of the pages is a great idea as this web type idea is still fairly new and it’s always great to see the details about a design. In this design, Naz is very brave to use five distinct typefaces all in one design—but it works. Everything is legible and works together nicely.

Atlantis World's Fair

Next is my personal favorite—Atlantis World’s Fair. I love that the page seems to scroll forever, the little man in the pipe who moves with the page and the depth gauge on the left that tells me how far I’ve gone. The color scheme is very cheerful and as this fair is listed as taking place in 1962, I think Frank Chimero accurately captured that time period in color and type. I’m a fan of the wide slab-serif coupled with the sans-serif. Frank is only using two fonts with one having a condensed version—a little more in my comfort zone for number of faces. The little “facts” that appear on occasion while scrolling down the page are cute.

Moon World's Fair

The last fair to visit before leaving the site is the Moon World’s Fair. This site has a lovely use of simple illustrations and lovely typography. The fair is set in 2040. Three typefaces are used here, two are sans-serif and the third is used for just the curly W. The design is very clean and organized, but unlike the other two designs, there is not that much to interact with. You can grow and shrink your browser to see things move closer or further apart, it just is missing the playfulness that is part of Atlantis. The page is very balanced and the color scheme is quite soothing—the toned down red verging on pink complements the dark blue background while the silvery white of the MOON type pops off the page. Just what a website of the future might look like.

The overall site is a great way to showcase the technology, but in a way that makes you want to click through the whole site and scroll your way to infinity. It’s just fun and playful. As Jason Santa Maria states in his blog-post about the site, the only other job you could get that would be just as much fun and let you have just as much leeway would be designing a paper swatch book.

This site for me was a nice introduction to how successful this new web font technology can be. Reading the designers blog-posts about the site was a nice touch as it was really cool to hear the back-story and see the pencil illustrations. Quite an inspiring piece, especially when it was done to promote a Microsoft product (wink.)

Related:

Lost World’s Fairs
http://www.lostworldsfairs.com

Typekit
http://www.typekit.com