typographica

typographica

Black and white and read all over, sure, but here’s the real scoop: Typographica is alive with color – just look at its header, footer, navigation, subheads and body text. You guessed it, I’m not talking color as in crayons, paint, and lovers. I mean typographic color.

Typographic Color

“The darkness of type as set in mass, which is not the same as the weight of the face itself. The spacing of words and letters, the leading of lines, and the incidence of capitals, not to mention the color (i.e., darkness) of the ink and of the paper it is printed on, all affect the color of the type.”

That’s how Robert Bringhurst defines color.

Obviously, on the web we’re not dealing with ink and paper; instead, we have CSS color and background-color, as well as a staggering lasagna of technologies that interpret our suggestions (including some that are entirely out of our control as designers, for good reason):

  • The visitor’s OS antialiasing settings
  • The visitor’s OS’s rendering engine (and any related settings, if different than general OS antialiasing settings)
  • The visitor’s browser antialiasing settings
  • The visitor’s browser’s rendering engine (and any related settings, if different than general browser antialiasing settings)
  • Hinting instructions provided by the suggested typeface

For more on this, see the Interpretation and Suggestion tags in Nice Web Type’s bookmarks, as well as this April ’09 Typophile thread.

Visually awful cocktails of interpretation notwithstanding, the new Typographica is a brilliant example of how subtle typographic decisions about face, size, weight, leading, measure, and white space can at once summon centuries of measured harmony and challenge conventional visual hierarchy to which we web designers may unnecessarily cling.

Look more closely at our Typographica screenshot. What do you see?

I’ll tell you what I saw at first — a stark, striking page with no nav bar, no indication of “you are here,” and a type specimen with text set so large that it, though beautiful, was kind of overpowering compared to the site’s masthead. Although the content is clearly aligned on a grid, the different headings and text chunks seemed scattered.

Then I read the review.

Spending some time reading relieved me of my self-righteous initial reaction, and I began to see the composition for what it actually is: a wonderfully orchestrated hierarchy of content meant to envelop the reader at a particular moment in time: when the reader is reading.

Look at the same page again. This time, squint (or better yet, take a minute and enjoy reading the review). Notice how, either by squinting or by engaging in the act of reading, compositional pieces are forced into your periphery and the visual hierarchy becomes clear.

This hierarchical clarity isn’t achieved through the typeface choices for display or body text, nor is it due to sizing, weight, arrangement of the composition, or the balance of white space via leading and spacing.

Its success is the cumulative result of all of these small decisions.

Such clarity is rooted in a sensibility that one must develop firsthand. No one can tell you what the balance is – you must see it for yourself. Study Typographica. Look at the measurements in detail. Ponder the decisions made about CSS color and background-color, size, leading, measure, and other compositional spacing. Ride the grid.

So what about my initial reaction to the design – shall we brush it aside so easily? And what I said before about, “conventional visual hierarchy to which we web designers may unnecessarily cling;” what about that?

Outward from content

Max Kerning forbid that we should forget our Beatrice Ward; it’s easy to appreciate Typographica’s focus on its excellent writing. Not every website can make do with such recessed navigational cues, nor will every author honor his or her own voice with typographic soul to the extent that refuting convention looks this good, but the idea that content can bear focus to the exclusion of such traditional fixtures as a navigation bar and breadcrumbs is humbling. Will it work for you?

I do think the curve for orienting oneself among the once and future annals of type reviews, book reviews, and commentary is too steep for the passer-by. But the curb appeal is surely enough to coax even casual typophiles into staying long enough to learn the system.

Besides, everyone arrives via their RSS reader or shortened URLs. Right?

Encore: regarding the code

It takes both fortitude and a qualifying paragraph like this one to properly start examining the markup and style of others. While I often practice what I preach, my work is deserving of at least as scathing and shallow a once-over as I am about to provide.

A caveat: I’m only looking behind the scenes of the page that appears in this article’s screenshots. Typographica is an enormous website, and code will vary from page to page.

CSS-naked

With Cascading Style Sheets disabled, Typographica does pretty well. Headings, navigation bits, and actual review text are semantic; other text, on the whole, is not. I see a bunch of non-semantic and/or empty div and span elements. I also see inline styles, which aren’t technically a problem but don’t show very good form.

It would also make sense to reorganize the source content such that <h2>Archer</h2> lives above the image sample, because it’s the heading for that too. Adjusting CSS accordingly is feasible.

Between the sheets

The site’s stylesheet gets the job done. There are no fancy techniques to reveal, but because the markup is clean where it counts, the site’s h1 has visual elbow room, and the plan is that the masthead will continue to change often, Typographica is a great candidate for experimentation with new techniques as they develop.

Regarding well-formedness, I wish every stylesheet were hand-crafted like Doug’s. Comment flags … math notation directly next to each measurement … ahhh.

Hey, you’re not done reading

Do not skim this fairly critical encore and assume that Typographica is “another one of those designery websites that doesn’t care about web standards.” Care is obvious. Take a look. I’m merely suggesting a few improvements for the sake of critique and educational value.

  1. Stephen Coles

    Blushing over here, Tim. Honored to be featured on Typesites and a little embarrassed that someone took such a close look behind the curtain. We’ll definitely take a look at your recommendations.

  2. Dan Gayle

    The first thing that I did was turn off the style sheets and look at the code. What I saw wasn’t awe inspiring, but it wasn’t horrible either. The semantics, in my opinion, could use a bit of adjustment, and not for a purely theoretical or philosophical reason.

    One of the major things that many web designers don’t take into account is the impact that a site’s structure will enhance or detract from Google’s ability to index and rank it. For instance, an h1 element should be whatever is the most important headline _of that page_. If Google looks at your pages, and every single page says that the title of your website is the subject of that page, then the value of the element is degraded.

    So, for instance, on that Archer page “Typographica” is the h1, and “Archer” is the h2. Google will index that page and ask, “What is the most important thing on this particular page?” And the answer that you have given them is “Typographica”, although “Archer” would have been more appropriate.

    And even then, a more specific headline would help Google even more. “Review of Hoefler & Frere-Jones’ Archer font” would be better, and would drive much more traffic to the site because of the specificity. If you do a generic search for “Archer” you’ll get a lot of results not about the font. In fact, if you don’t add the word “font”, then most of the search results for “Archer font” lead to torrents that lead to illegal downloads.

    My point is, what good does it do to create the definitive resource for font reviews, if Google doesn’t index and rank it as such?

  3. Stephen Coles

    We hope that some of our readers come to the site independent of Google. But yes, no reason not optimize for search engines. Thanks for the suggestions, Dan.

  4. Dan Gayle

    I hope I didn’t come across as harsh. It just so happens that my specific job description entails optimizing a site’s structural elements. As good as a design may be, my experience is that it can almost always have a better structure.

    And Google traffic is free traffic.

  5. Joe Clark

    The reason to improve semantics is not to optimize for search engines but because one must use the most appropriate HTML element for the content. Content drive semantics; Google doesn’t.

    I’m afraid to even look at the new Typographica because JLT wasted no time telling me off after I mentioned a single META element was missing a slash. Let’s not tell him about the alt texts, I’m sure.

  6. Leon Paternoster

    It’d be a shame if Typographica began rewriting its headlines for SEO purposes; I think it’d come across as contrived.

    I love the design of this site, even if the navigation takes a bit of working out. It somehow seems appropriate that a site about text requires some ferreting around.

    The review page layout is certainly original: the downward slope from the site title to the content makes the reader look at the specimens. The placement of the content area and its size relative to the specimens somehow gives the specimens more weight than the content: while I was reading the article I kept referring back to the specimens. (Your eye is pulled around these pages: there’s a lot going on.)

    As a sidenote: what’s wrong with using empty divs and spans, and styling hooks? As long as the actual content is marked up appropriately, I don’t see how the document becomes less semantic?

  7. Stephen Coles

    It’d be a shame if Typographica began rewriting its headlines for SEO purposes

    Oh we won’t be doing that at all. Only considering code rewrites.

  8. Tim Brown

    Dan, those are some good reasons for not using h2 for the main content heading of a particular page. But I’ve always used h1 tags for site names. How should a site name be marked up otherwise? It doesn’t seem right that it would be a lesser heading. Can there be more than one h1? When you mark up site names in your projects, how do you do it?

    Is this a point at which semantics and search engine optimization differ?

    For what it’s worth, I started to read this: HTML 5 to the H1 debate rescue? – a piece written in February 2009 by Henny, a “Web Evangelist” at Opera Software and member of the WIA.

  9. Tim Brown

    Leon:

    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).

  10. Kyle Meyer

    Code quality aside, there are bits to the design I absolutely adore.

    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!

  11. Tim Brown

    Something to keep in mind here, compositionally, is that the spec is an important part of the review. The spec has to grab some attention for itself – so the page doesn’t look flat, and so as to encourage a combination of looking (at the spec) and reading (the review). That the arrangement of headings and review text counter-balances the spec is what makes it so interesting.

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

  12. Dan Gayle

    My view of optimizing for search engines means optimizing for people. As the search engines get more advanced, they are constantly tweaking their algorithms to make the best possible, most useful, search results for a given query. If you ask the opinion of the Google employees they will tell you that the best way to optimize your site is to make it more user friendly and accessible. Lo and behold, if you do that, the search engines miraculously start to like you better.

    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?

  13. Dan Gayle

    RE: h1 tags
    In general, I like to tag whatever the site is about, whether that is the title or a description. Then, I figure out what the next most important parts are. On the home page, the article listings are the next most important, so I tag them as h2s.

    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.

  14. Tim

    Hi, new readers. Don’t let all the beefy semantics-talk stop you from joining in. What do you think of the visual decisions at Typographica?

  15. Dan Gayle

    Sorry about taking the discussion out of focus. Here is my visual thoughts:

    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.

  16. Tim Brown

    @Dan I totally agree. The 50/50 content and meta info in the middle are great.

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

  17. Dave

    I think the new design is great. I wasn’t bothered by the navigation (or lack thereof) at all, and in fact find it to be entirely appropriate for the blog/article format. My only qualm is in regard to the tight gutters between the columns of text. The type specimen images to the left are sitting pretty uncomfortably close to the articles on the right. All in all, a nice site.

  18. JamesD

    Thanks for the useful info. It’s so interesting