Petridisc

In February of this year, I decided to do a talk for the local Refresh group here about @font-face.

Although I was familiar with @font-face I hadn’t really tried to put it into production. I entered this project with the hypothesis that it was a great new thing but not ready for prime-time, but after building the site and testing it, I decided that it really is time that we can start using it.

What the heck is a Petridisc?

The word Petridisc is something Molly came up with years ago as a name for our basement recording studio. It’s where we record all of the music for Lunch Money, and up until then I had never gotten around to working up a site. This was the perfect opportunity.

I wanted to make something that was an actual site with real content, while also using some newer HTML5 and CSS3 techniques. I was also trying to avoid using any javascript and applying transitions using things like ‘-webkit-transition’ and ‘-webkit-animation’. This wasn’t out of any aversion to javascript, just more of an exercise. Check it out in Chrome or Safari to see these in effect.

Choosing a font

I decided to use what I thought was a great font, Titillium. It was lightweight and just has a nice shape to it. It turns out it has some issues, mainly rendering between browsers and OSes. But the opportunity to use something besides Helvetica and Georgia was a fun exercise.

Textures

I also am a big fan of using real objects and textures, so all of the background images were created by scanning in this small Danelectro guitar amp.

This version is now moved to the studio page. I plan on keeping this version of the site up in the event I ever want to really start telling people about the studio. If you want to check out my Refresh presentation, it’s up at unmatchedstyle.