Web Design Inspiration: Fourmile Heroes

Sometimes, it’s the subtle work that impresses me the most. A non-trained designer can blunder their way through the broad strokes of design, but it’s those fine little details that are telling.

The Fourmile Heroes site is a charity site selling posters by a wonderful illustrator named Steve Lowtwait. He has this marvelous style that I just adore—if you’ve been around Boulder lately, you’ve seen some of his work hanging in shop windows. One of these days, I’m going to pick up a print. I admire how civically minded Steve is as well. Proceeds from the posters go to local firefighters.

Back to the site—it’s built by a design company called Slice of Lime, based locally as well. They really know their stuff.

The first thing that stands out is the great use of typography here. At a glance, I recognized a couple of the fonts from my favorite font site, Font Squirrel, such as BlackJack. Digging into the stylesheet, I spotted a CSS declaration I wasn’t familiar with:

p, ul, ol {
line-height: 1.4;
margin-bottom: 20px;
 text-rendering: optimizeLegibility;
 }

It was the text-rendering setting that I wasn’t familiar with. I did some digging and learned that without this, we don’t get ligatures properly in font-sizes below 20px. Can’t think of a time when I tried to use a web font for anything small, but this is good to know-ligatures are very important. So there’s something I learned. You can read more about text-rendering on Mozilla’s site. Don’t ask me why it’s required in the first place.

The overall layout and organization of the page is great and well-balanced. It leads the eye from piece to piece very effectively. But the second thing I want to point out is its subtle use of texture. Each of the color blocks has a subtle texture that really brings the whole thing together for me. I find texture really helps my eye stick to a design, no pun intended.

As a general tip, if you’re not picking apart the code on sites like this when you come across them, and you’re interested in design, you really should! I use Firebug in Firefox to inspect elements and track down the CSS and Javascript being used for various effects. It’s one of the best ways to learn real world web design, and all the examples are right out there for you. Just don’t steal the code.