Web Typography Study: The Design Canopy
Web design studio The Design Canopy 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.
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.
Loading ...
1
Good tutorial, Chris. I’m flattered, thanks!
Comment by David Yeiser — December 22, 2007 @ 8:29 am
2
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.
Comment by Chris S. — December 22, 2007 @ 9:59 pm
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!
Comment by Jermayn Parker — December 31, 2007 @ 3:02 am
4
Very nice typography. But I think they changed it a little, because it is different to the screenshots.
Comment by Handy — April 11, 2008 @ 6:35 am
5
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/
Comment by Edwin — May 4, 2008 @ 2:27 pm