Web Typography Study: The Design Canopy

Chris Coyier //

Web design studio The Design Canopy (update October 2012: Design Canopy link is dead) is a beautifully designed site that makes use of a variety of beautiful web typography techniques. Here are some screen shots from different areas of the site that I find particularly nice.

dc-1.png
dc-2.png
dc-3.png
dc-4.png
dc-5.png

The technique I want to focus on a little is from the first image. I LOVE that small sub-head/big header look. The best way to work is to first think about what you are describing semantically and then write your XHTML accordingly. These are going to need to be clickable, so essentially we have a series of links. We also know that the sub-header is different than the header so we'll need a hook of some kind.

<a href="#"><span>Section One</span>Semantics</a>
<a href="#"><span>Section Two</span>Semantics</a>
<a href="#"><span>Section Three</span>Semantics</a>
<a href="#"><span>Section Four</span>Semantics</a>

Let's make the anchor links blocks so we can define a width and padding and get a nice clickable area and also be able to set a rollover background color that has some impact. If we also set the span's as block-level we can avoid needing to use a <br /> tag. Normally this would be a no-no since putting a block level element inside an inline element (default for anchors) is bad code. But, since we've already make the anchors block, it's all good.

Let's set the width in em's so it can expand as needed without wrapping and then set up the typography. Here is what we end up with in our CSS:

a {
   text-transform: uppercase;
   font-size: 2.5em;
   font-weight: bold;
   letter-spacing: -1px;
   color: red;
   display: block;
   padding: 0.5em;
   float: left;
   width: 8em;
   text-decoration: none;
   line-height: 0.5em;
}
a span {
   color: #666;
   display: block;
   font-size: 50%;
   letter-spacing: 0;
   margin-bottom: 0.3em;
}
a:hover {
   background-color: #fffea4;
}

Check out the link below to see it in action.

View Demo