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.
“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
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
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
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.
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
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.Want more? Check out the archives for previous reviews, and don’t forget to subscribe for future reviews, posted weekly.