Do what I say, not what I did. Trust me.

Our story begins with a simple yet classic two-column layout for a client: the markup included a #sidebar div and #content div. The CSS floated the #sidebar to the right, and set a width of about 10em. The #content began its life with a margin-right also set at 10em.

For various reasons (another sad tale involving a disappearing background image), I tried changing margin-right to padding-right. Pay attention now: the page looked the same. And looked correct in both of my test browsers (Firefox + IE).

*The problem:* the navigation links stopped working in Firefox. Click all day if you wish; they were inert. Dead.

*The insult:* the links worked fine in IE. Aargh!!

It was as if I had inserted a *plate glass window* in front of my nav links. I could _see_ them, but couldn’t _reach_ them. Like that Rolex in the store window, just out of reach. Which is exactly what I had done: by changing the #content div from margin to padding, the #content div was now invisibly overlapping the links.

IE was just letting me get away with sloppy code, but Firefox was holding me accountable to actually get it _correct._

When someone says “You really need to understand the box model to use CSS without hurting yourself,” they’re right.

I freely admit it: I’m relatively new to web standards. And I’m mostly self-taught. So I’m often surprised to learn that there’s a whole lot to learn about something, especially when I never realized there was anything to it.

*Typography* is a perfect example. I read and write for a living, so I’m as particular as anyone I know about subjecting myself to awful type. For instance:

* Changing anything out of a monospace font (except code quotes)
* Pasting long articles into a two-column word processor document for printing (avoiding line lengths that are way too long, and saving paper, too)
* Manually inserting line breaks into long e-mails for readability, etc.

Anyway, I read Mark Boulton’s in-depth article series, “Five Steps to Understanding Typography”:http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography/. Great stuff. If you don’t already know your ligatures and your measures, your leading and kerning, go read it. Now. And thank Mr. Boulton for the free education.

It made me wonder if there are any good articles on suggested *methodology* for crafting website typography. Not so much “which fonts should I use?,” but rather “how should I go about selecting fonts and type styles for body text, for h1 and h2, for pull quotes, etc.?” Or for example, “I want a retro, ‘faded jeans’ kind of feel, so how do I make type choices?”

The Boulton articles do provide intel about the measure, leading, kerning, font size, font weight, etc. But I seem to be stuck with bad typography.

My current method is to:

# Read as much as I can find
# Conclude that body text is limited to a few more or less universal core fonts
# Select Geneva and Verdana with a few alternates
# Use Javascript image replacement or Snook’s sIFR Fontsmack for headlines, and
# Hope for the best.

If I’m feeling energetic, a parallel path may often include:

# Find an awesome font
# Learn that it costs over $100, and
# Give up.

My impression of a better method would be something like this:

* This will be a (insert adjective here, such as “groovy” or “corporate” or “elegant”) kind of a site, with (insert made-up adjective here, such as “newspaper-ish” or “disarming-charming” or “rustic-esque”) kind of a feel, so I want “?” kinds of fonts, with “?” kinds of styles and colors
* … and that’s where my imagination falters.