Mark Ferree - Open Source Web Development

Most web developers don't have any design background, but nevertheless they are forced from time to time to make design decisions on the projects they work on.

No matter how thorough the designer you work with is, eventually you will have a list, a form, or a dialogue box that doesn't warrant a pesky e-mail to the designer.

So what's a geek to do when presented with this situation? Luckily, 75% of typography is just a system of rules, and we can get pretty good results ignoring the other magical 25%.

Here are some rules to help you along your way.

Align it

The number one rule that web developers should follow is aligning everything on the page. For the uninitiated, this means that every element (within reason) should line up with the items near it. Focus more on vertical alignment than horizontal, this is usually easier and less error prone. Because most of your changes will be happening in the browser itself, the ruler on the Web Developer extension for Firefox can be used as a convenient straightedge to check your work while making tweaks in Firebug

Let it Breathe

Suffocating your content is another common mistake made by non-designers. There is usually a desire to cram as much content as possible into a given area, and this can lead to a legibility nightmare.

The solution to this problem is easily solved with a healthy dose of CSS margins and padding. The rule of thumb here is add way more than you think you need and then scale back as necessary.

The Theory of Relativity

Not every element on your page is as important as the next. Now I know this may sound like common sense, but many people do not think about this when applying default style rules in their CSS.

When I am designing a layout I think of different elements as the H1's, H2's and spans they eventually will become. I know, I'm a true geek at heart, but this forces me to think of how these elements need to be sized and spaced in relation to one another.

It is important here to think about size, color, and spacing to convey the relative importance of these elements.

Don't Make Paragraphs Too Wide

Now this one is a personal pet peeve of mine. It is very common to find a site on the web where the width of a paragraph of text is not constrained by anything but the browser window. This leads to really long lines of text. After a certain point (usually around 75 characters) long lines of text begin to become illegible.

Find your p tags in your CSS, give them a width, and move on with your life.