I also love how the post title hangs over into the meta column, instead of being directly over the review text.

I love the 50%/50% layout of article pages. I personally have been developing some sites like that, including my own personal blog. Having the type specimen front and center, or more accurately top and left, your eye is immediately drawn to what is most important in the article: the font itself.

The meta data about the font is displayed in an unobtrusive manner in the middle column, in a way that presents the information without cluttering the page.

Overall, I really like the site’s visual appeal.

Interior pages, however, require modification. If the heading is static, I will replace the h1 around the site name with either a div or a span, depending on relevance. You can use microformats on your page to indicate that the site title is still relevant. I simply id or class the title, and style appropriately to match the visual appearance of the same text as it appeared as an h1.

Then, give the main title of that page, what it is about, the h1 tag, styled appropriately for that page.

What I am recommending is not to write your headlines for SEO, I am recommending you write your headlines for people. The first rule of usability is “Don’t Make Me Think”. On that Archer page, you certainly do not immediately know that it is a review of Hoefler & Frere-Jones’ Archer typeface. You don’t know what the page is about until you read the “Reviewed by David John Earls” byline, which because of its light weight and the heavy weight of everything around it, you don’t immediately see.

Web design, as well as any other design, is all about hierarchy. In fact, semantic markup is 100% about hierarchy. If the most important piece of information about a page is relegated to a minor div block, and other pieces of web furniture are promoted above it for no other reason than the visual impact, then what kind of hierarchy is that?

Other pages on the site are meant solely for reading: see the commentary. Notice how those posts are entirely about reading.

Regarding, the lack of white-space between the typeface sample image and the review on the right: I feel as though a single empty sub-column here would provide enough white-space to help offset the article from the sample image. This would greatly increase the hierarchy outlined by Tim, and—for me at least—remove that initial feeling of disorientation.

Stephen and Tim: Thanks for continuing to participate in the commentary!

I thought that too, at first, about the type specimens holding more weight. They are eye-catching. But as I spent more time on the page, the specimen began to recede. I think it has to do with the amount of white space in and around the letters, because they’re at such a large size. Although this effect may vary from spec to spec.

As for why empty divs and spans are non-semantic, I think it’s simply because you don’t want to publish anything (at all) that doesn’t serve your content. I often break this rule when I need multiple overlapping background images (view source on the parallax at Vassar English), but the nonsemantic and/or empty div and span elements I saw in Typographica’s code were either holding text (should have been structural) or holding nothing (should not have been there). That’s not to say that breaking this rule is acceptable in my case; just that I am breaking it for a specific effect that cannot otherwise be achieved (yet).