Lately I've been really focused on catering to the main usecase of most websites: reading. Not all websites are for reading, of course!, but if yours is, use a nice big font with serifs, like 18 or 20px computer modern, and keep the number of characters per line down around 65. This makes the trip your eyes take during a "visual carriage return" shorter, so you keep your place more easily.
I like to use sans for any widgets. Serifs are nice for the main content, because they signal an editorial frame, but for you don't want that for your widgets. I also like to keep the text on widgets a bit smaller, because they spend too much time sitting there, staring at you, not telling you anything useful.
I also like to keep pages single-purpose. On any given horizontal line, have only focus. This will obviously depend on your application. But chances are pretty good that your website is meant to be read, and most people can only read one string at a time. Put related stuff at the bottom, or top. Ok, maybe a nav bar in the margin -- but it should be quieter than the main content.
The layout and styling of a website should emphasize the main content, and help make relationships between items of content clear. That said, design should be subtle. It should not speak, or else it will compete for the user's attention with content. Keep a high information-to-ink ratio. Meaningless gloss, is to be avoided. The beginning or ending of an article is important, mark it a big initial, an elegant flourish, or a nice, stolid tombstone. But please don't succumb to the temptation to put drop shadows, gradients, and other bubbly 3D effects.
Usually, what makes a website nice is what is not done.
Also, hold your color. Black, white, 80% grey, and 20% grey are your best friends. IMO they are good for about 95% of the pixels on the page. In that context, color can then actually be used to signal meaning, emphasis, and functionality. Lots of sites establish a highlight, background, and main-text color which are not in the greyscale. That's ok as long as that's as far as it goes.
This should go without saying, but don't use any animation anywhere, ever. Ok, ok, I'm excluding single-frame changes on mouseclick and hover -- used judiciously. But please, no stretching menus, whirling tabs, and no slide shows. If I want to watch a goddamn slideshow, I'd go watch a doggamned slideshow :P
Again, this assumes you're making a site for reading. You should free to use as many colors as you want, spurious lines, shading, animations, bright, solid colored flashing backgrounds, and play sounds, when making a page for fun, for breakfast, or for Reasons.
Wow thanks for taking the time to share all of this.
I'm a fan of 16px + for body copy. I think the browsers have it right most of the time with the default font size of 1em == 16px. You've got me thinking of experimenting with 18px now though.
Where does the 65 chars per line come from? I've heard 2 to 3 English alphabets length but I don't know the original source of that guideline.
Yeah, I really encourage you to try bigger font-size -- don't be afraid!
The 65 char per line is to strike a balance between how often the reader has to skip to new lines, and how far that trip is. Why 65 exactly? It's more than 60, but less than 70, and its a nice round number I guess. Here's an article that discusses it a bit more:
