If you are dying to dip your toes into the waters of CSS, but are unsure of how to style your documents this way, try out the set of core CSS stylesheets that the W3C has provided for free.
Use the 8 samples provided as a beginning, and feel free to change the values as much as you like to see what happens. The stylesheets are pretty good—they were written by CSS guru Todd Fahrner. But I have to take issue—ri-shoo—with one aspect of them. I detest web pages where the text stretches all the way across the page, from extreme left to extreme right.
Text-heavy pages designed this way are the hardest of all to read, because they make the eye swivel left to right beyond the limits it is designed to. The P tag’s CSS definition should have its width set to an Em value based on the size and nature of the typeface set for the majority of the page’s body text. The traditional term for this is “setting the measure”.
The aim when setting the measure is to do it so that there is no more than 68 characters per line, depending on the typeface. Thus the maximum measure varies for each typeface. A good measure for Verdana is 35em. Georgia works well at 33em. Palatino should be set at 30em. Times—yuck, IMHO nobody should ever use Times for designing web pages meant to be read—needs to be set at 27em. And lastly, that ugly and crude bastard of a typeface named Arial should be set at 30em.
Here is a sample:
P {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 35em;
font-size: 12px;
font-weight: normal;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
line-height: 1.5em;
}
Notice that I have set a font family instead of just one font—Verdana. Verdana is one of the very best typefaces for screen reading, designed by the amazing Matthew Carter, but you cannot count on everyone having it installed on their computer, although most users will, especially those with Macs or Windows boxes.
read more