Typographical Design Rule of Thumb and CSS Rule Generator

12 Point Font-Size Line Length Rules of Thumb:

'Points-times-two': 12 point * 2 = 24 picas = 384 pixels
'Alphabet-and-a-half' (39 characters): 12 point = 15 pixels per char = 311px total
Average of both: 347 pixels

Leading for 12 Point Font-Size:

The 120% rule: 15 pixels per char * 120% = 19 pixels

CSS Rule:

.ThisStyle
{
width:347px;
font-size: 12pt;
line-height: 19px;
}

Serif Jagged Right

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Sans-serif Jagged Right:

Serif Justified:

Sans-serif Justified:

Type is measured in point size. Line length is measured in picas. There are 6 picas per inch, 12 points per pica, and 72 points per inch.

Leading (pronounced: LEDD ing): Add about 120% of font-size for serif, and about 140% for sans-serif.

There doesn't seem to be a rule of thumb for word spacing or letter spacing. Leave it at default for now, I guess...

General Stuff:

Avoid large chunks of italic (or emphasized) or cursive or fancy lettering, it is difficult to read. Small blurbs of one to five words are ok, where you want to go for design rather than large chunks of text. This also goes for bold (or strong) text.
Avoid the use of all caps. This goes for small caps too.
Don't use all caps AND fancy lettering together. Ever. Even in your company name or logo.
Avoid reverse type. We can go a step further and say that on the web, go 'light background with dark text' because people like to print out webpages sometimes, and printing light text makes it completely unreadable when printed.
Don't put text on a patterned background. Ever.
MAD magazine uses bold sprinkled around in paragraphs of text, in the comic font. I kinda liked that.
Centering text should only be used in invitations and menus and other 'decorative' environments. If your copy is longer than the line length (wraps to the next line or multiple lines), don't center it.
Put some white space into it. I don't know how much, just do what 'feels' right. Maybe later I will build a number generator for this. Maybe not.
Yes, I know, vomit has lots of colors too. Perhaps you should ease up on the number of colors a little.
I say two different fonts are too many different fonts. Some say three or four is ok, but I disagree.
I say two different fonts of the same font-family or similar are too many different fonts. I think it looks sloppy. Use Halvetica or Arial, not both. Use Century or Times New Roman, not both.
Use borders to separate small chunks of information you want to pull out of the copy, or for a different kind of information altogether. Don't use it to 'add something to the design'.
Defaults suck. Note that this page uses defaults, and it sucks so much, you can almost hear it.
Copy the text into a spell check enabled program and run it. Then, proofread your text just to make sure.
Do not put text in an image. Makes the text look grainy and is impossible to edit unless you have the unflattened image source files. The are exceptions, but they are very rare. Makes accessibility difficult as well. Especially for tabbed browsing and menu items.