Taking a cue from Khoi Vinh and Mark Boulton, I try to pay extra attention to the details of typography in my websites. As anyone who’s ever designed a website can attest, this is somewhat unrewarding. Not only are we limited to the Big Eight typefaces (this alone shouldn’t be enough to ruin web typography—remember, constraints are your friends), but we are also at the mercy of the end users and, in many cases, the people we hand off the site maintenance to. We are forced to design for unknown content at unknown sizes. While we can’t prepare for all possible outcomes, paying particular attention to the details will help your design maintain cohesiveness and can enhance the meaning of the content, regardless of what it is.

One thing that I’ve been noticing that seems to fall by the wayside on many otherwise well-designed sites is spacing before and after headers. You can see 2 examples of what I’m referring to here:

See how the header floats in its own space, with no relationship to either the previous or subsequent paragraphs? It’s acting as a free agent, when it should clearly be related to the following paragraph—the space after the heading should be less than the space before it. This helps to establish a strong typographic hierarchy, and lets the reader know where they are and what they’re reading. Since English is read in a top-down direction, it’s not hard to figure out the the header text is referring to what comes next, but the reader shouldn’t have to think about it at all. It should be made subconsciously clear. Having a header float in space like that can also possibly make the reader unnecessarily pause on it.

I think the reason this particular detail gets overlooked so often has to do with the fact that vertical margins are not hierarchical or cumulative. The larger value will always overwrite the smaller. For instance, if I have specified {margin:20px 0 5px} on an h2, but then give p‘s a {margin:20px 0;}, the space between a paragraph and it’s preceding header will be 20 pixels, exactly the same as the space above the header, and you end up with a floater. What I usually do is set the space between paragraphs with a bottom margin only, so the header’s bottom margin won’t be overwritten.

Another reason sites end up with floating headers is semantic (misusing tags), which happens to be the case in both examples above. On those sites, the header is created with p tags and strong and (more unfortunately) deprecated b tags, when an h4 or h5 would have been more meaningful. Many times, this is forced by the Content Management System being used, so the workaround is more difficult or in some cases impossible. Although, if you are forced to use p‘s and strong‘s for subheads, then you could turn the normally inline strong to a block element (since vertical margins are ignored on inline elements) and apply the margins like so: {margin:20px 0 10px; display:block;}. You’re stuck with the 10 pixel bottom margin you applied to all p elements, but at least the margins won’t be identical.

While designing for the unknown can be extremely frustrating, it can be equally rewarding when we solve problems. And it all leads to a more successful website design, which leads to happy clients.