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

Our story begins with a sim­ple yet clas­sic two-​column lay­out 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 var­i­ous rea­sons (another sad tale involv­ing a dis­ap­pear­ing back­ground image), I tried chang­ing margin-​right to padding-right. Pay atten­tion now: the page looked the same. And looked cor­rect in both of my test browsers (Fire­fox + IE).

The prob­lem: the nav­i­ga­tion links stopped work­ing 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 win­dow in front of my nav links. I could see them, but couldn’t reach them. Like that Rolex in the store win­dow, just out of reach. Which is exactly what I had done: by chang­ing the #content div from mar­gin to padding, the #content div was now invis­i­bly over­lap­ping the links.

IE was just let­ting me get away with sloppy code, but Fire­fox was hold­ing me account­able to actu­ally get it cor­rect.

When some­one says “You really need to under­stand the box model to use CSS with­out hurt­ing your­self,” they’re right.

I freely admit it: I’m rel­a­tively new to web stan­dards. And I’m mostly self-​taught. So I’m often sur­prised to learn that there’s a whole lot to learn about some­thing, espe­cially when I never real­ized there was any­thing to it.

Typog­ra­phy is a per­fect exam­ple. I read and write for a liv­ing, so I’m as par­tic­u­lar as any­one I know about sub­ject­ing myself to awful type. For instance:

• Chang­ing any­thing out of a mono­space font (except code quotes)
• Past­ing long arti­cles into a two-​column word proces­sor doc­u­ment for print­ing (avoid­ing line lengths that are way too long, and sav­ing paper, too)
• Man­u­ally insert­ing line breaks into long e-​mails for read­abil­ity, etc.

Any­way, I read Mark Boulton’s in-​depth arti­cle series, Five Steps to Under­stand­ing Typog­ra­phy. Great stuff. If you don’t already know your lig­a­tures and your mea­sures, your lead­ing and kern­ing, go read it. Now. And thank Mr. Boul­ton for the free education.

It made me won­der if there are any good arti­cles on sug­gested method­ol­ogy for craft­ing web­site typography. Not so much “which fonts should I use?,” but rather “how should I go about select­ing fonts and type styles for body text, for h1 and h2, for pull quotes, etc.?” Or for exam­ple, “I want a retro, ‘faded jeans’ kind of feel, so how do I make type choices?”

The Boul­ton arti­cles do pro­vide intel about the mea­sure, lead­ing, kern­ing, font size, font weight, etc. But I seem to be stuck with bad typography.

My cur­rent method is to:

1. Read as much as I can find
2. Con­clude that body text is lim­ited to a few more or less uni­ver­sal core fonts
3. Select Geneva and Ver­dana with a few alternates
4. Use Javascript image replace­ment or Snook’s sIFR Fonts­mack for head­lines, and
5. Hope for the best.

If I’m feel­ing ener­getic, a par­al­lel path may often include:

1. Find an awe­some font
2. Learn that it costs over $100, and
3. Give up.

My impres­sion of a bet­ter method would be some­thing like this:

• This will be a (insert adjec­tive here, such as “groovy” or “cor­po­rate” or “ele­gant”) kind of a site, with (insert made-​up adjec­tive 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 imag­i­na­tion falters.