I'm not sure how long I've been aware of it, since it's probably been something I've seen in countless books and magazine layouts over the years. But it seems like it's been picking up steam online lately in the designs of Naz Hamid, Khoi Vinh (I love the interplay between caption and image in that post), Wilson Miner, Dustin Curtis, and others. I've also clumsily incorporated it into the current design of this site. It's the effect where a column of text self-consciously takes up less space than its container affords, letting other elements interspersed in the text such as charts and graphics extend to the natural margins. I'm not sure why this is so pleasing to the eye, but in my opinion it serves two purposes: to give as much space as possible to images which would otherwise be unnecessarily shrunken, while simultaneously preserving an optimal line length for comfortable reading. Why should images be subjected to the same constraints as typography? Ideally they are subjected to the same constraints by conforming to a grid system, though of course on the web there is a lot of requisite fudginess. Dean Allen actually may have articulated the aesthetic best in his Textism colophon:
massive, full-bleed, gutter-spanning artwork would sit alongside utterly brutal sans-serif columns of dry academic text.
Here's one of Allen's posts with a brutally full-bleed image of pizza.
An example of "the effect" in action:
We're forced to work with much fuzzier tools on the web, but with CSS, the effect is easily done by constricting the margin on
p blocks inside roomier outside
divs. Doing this, gives the page a nice old-school textbook look, in addition to allowing for plenty of breathing room and readability.
I became interested in this technique months ago after I had implemented my TPM front page design. I realized i needed to create an internal "manual" of sorts for users of the complicated new modular 1020px system. When I started, I knew I wanted to provide a lot of illustrations for the page, and I wanted it to have kind of a textbooky look to it. I also had the advantage that many, if not all of the users of this page would have widescreen monitors, would usually be on Macs, and would all be using modern standards-compliant browsers.
So I went big.
Click here for a full-size screenshot.
Later, I also applied a lot of the same principles to this page on the new TPM advertising site allowing you to play around with different creative options. Work on these two projects, along with the new PollTracker design I launched last week really makes me want to do more technical design for the web.