Exploring Web Typography: Experimental CSS Hover Layout

Exploring web typography: An experimental CSS hover layout

I recently submitted the following experimental CSS layout to Smashing Magazine Typographic Layout Design Contest. I'm now publishing it here for my readers to play with.

It's called the Exploring Web Typography CSS Hover Layout.

It's pretty crazy but kind of cool too. Enjoy! (only works on devices with a cursor)

Exploring Web Typography Hover Layout

The idea behind this experimental layout is to explore how content can be progressively revealed by using the CSS hover pseudo-class.

To do this without JavaScript I needed to nest the elements within one another in long chains. The finished product contains elements nested to approximately 50 levels deep. This layout is less like a static page and more of a navigable message that grows as you read it.

While working with this hover-method I found that it was surprisingly versatile.

Words can be styled to better represent the current meaning of the story, and the process of following the writing is a bit like reading a comic strip - except the direction can change at any moment. Also, the message does not have to be linear - you can create any number of branches in a story and a user can navigate between the branches where the threads cross one another.

While this may not be the most practical layout on earth, it does illustrate some ideas worth mentioning. By keeping areas of content hidden until they are needed it can make a website look much cleaner. It also makes extensive use of navigation within a page (instead of between pages). I think both of these ideas should be used a lot more in web design.

If you are viewing this layout on a small screen, you can reduce your browsers text size so it all fits in the window. The whole design will scale in proportion because I used EM units throughout.

Finally, if you turn off CSS in your browser the message is still completely readable - so it all makes sense semantically too.

This layout won't work in Internet Explorer 6 or below because it doesn't support :hover on non-link elements.

Updated: 10 Jul 2009

First published: 10 Jul 2009