Grow your CSS skills. Land your dream job.

Web Typography Study: The Design Canopy

Published by 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

Comments

  1. Good tutorial, Chris. I’m flattered, thanks!

  2. Permalink to comment#

    Nice idea! The only problem I foresee is that you MUST keep the text around the same character length for everything or else you will have visual structuring issues.

  3. @Chris S – yes that could be a problem but for menus, most good ‘diiferent’ ways have this same problem which with some clever re-wording the problem could easily be solved!

    I like the idea! Very nice indeed!

  4. Permalink to comment#

    Very nice typography. But I think they changed it a little, because it is different to the screenshots.

  5. Edwin

    Also a late reaction from me – still had some old articles of you standing open – but maybe it’s much more interesting to take a look at their new header. That looks a lot more complicated to me…

    http://designintellection.com/

  6. Permalink to comment#

    Top tutorial and a nice idea, Chris!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".