New website design uses grid-based goodness and baseline harmony

Designing the new Pounders blogsite continues on with a fresh new approach: employing actual design concepts, instead of arbitrarily placing things. Having read A List Apart's article about using harmonious baselines in web design, and having read Subtraction's article about using grid-based layouts, I decided to see what happens if I employ these concepts to Pounders. As usual, what I thought to be an easy task transforms itself into the revelation of how little I really know about CSS.

Jacking into The Grid

The new layout uses a grid of exactly 100 pixels vertically. Each element, either paragraphs, titles, headlines, or pulled quotes, aligns (or nearly aligns) to a column. Twenty pixels is my usual separation between elements, though I do use 25 and 30. PIXEL NUDGING: I employ Michelangelo's philosophy here: design is in the eye. If something needs to be nudged for optical purposes, then I do it. This likens to his use of optical illusion in works like David where the head and neck are larger to compensate for the worm's eye view of the person seeing it. (Holy shit do I sound smart referencing Michelangelo) This new approach of columns gives the layout balance.

Baseline Jaxx

All text and elements have a base of 21 pixels. The font is 14 pixels to 21 pixels, or a 1:1.5 ratio. 1:1.5 ratio: I'm shit at math. Is this right? Design snobs tend to think this is a good rule of thumb for readable typography. (Notice the line heights of the pulled quotes compared to the paragraphs, compared to the sidenotes; they line up). I'm going with Georgia for the font face because I find it easy on the eye.

Newspaper-style Elements

I've used my newspaper experience to help decide on formatting for stories. Things I have wanted for some time include the new sidenotes, sub-head lead-in, headlines with varying weight, drop caps, and pulled quotes.

Sidenotes were an element I've wanted for a long time, favoring them over footnotes, like the kind Gruber uses on Daring Fireball. Footnotes, however, force the reader to wait to the end to obtain the message, lest he lose his place and train of thought. On the side, however, a reader can glance over -- and return -- with no problem at all. Also, the side approach lends itself to the concept of "sidebars," which can be entire stories related to the main point.

Is that my quote you're pulling?
—Me

My new sub-heads are akin to magazine articles. They bridge the headline to the body copy, leading the eye. Before you know it, you're being contaminated with my evil.

I now have two headline weights, each for its own purpose. Two different headlines: I totally ganked this idea from Gruber Articles that are simply links to other blogs, or are otherwise small, get the small headline treatment. Posts I put time into get the big letters to balance the big ideas they contain.

My drop caps fucking rock, and I'm surprised not more bloggers use this design principle. They provide a visual anchor to start your reading journey off right. They make the words seem more stately and important, no matter how sexist I get.

It's still in needing of polish, but I'll keep it for a bit.