The world wide web consortium standardizes all of our web content. They have online tutorials that give the absolute basics for web design. I was recently reading through their section on CSS which had a couple of good pointers about CSS fonts.
The first has to do with em versus px for font sizing. I’ve always used px, but apparently for IE-based browsers, this could be a probable–which always has a problem. Of course, the savvy web guru would want their pages to display perfectly on any browser using any sort of sizing.
Set Font Size With Em
To avoid the resizing problem with Internet Explorer, many developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=emExample
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
The second bit of goodness are the commonly used font sizes:
The font-family property should hold several font names as a "fallback"
system, to ensure maximum compatibility between browsers/operating systems. If
the browser does not support the first font, it tries the next font.Start with the font you want, and end with a generic family, to let the
browser pick a similar font in the generic family, if no other fonts are
available:
Example
p{font-family:"Times New Roman", Times, serif}
Below are some commonly used font combinations, organized by generic family.
Serif Fonts
font-family Example text Georgia, serif This is a heading
This is a paragraph
"Palatino Linotype", "Book Antiqua", Palatino, serif This is a heading
This is a paragraph
"Times New Roman", Times, serif This is a heading
This is a paragraph
Sans-Serif Fonts
font-family Example text Arial, Helvetica, sans-serif This is a heading
This is a paragraph
Arial Black, Gadget, sans-serif This is a heading
This is a paragraph
"Comic Sans MS", cursive, sans-serif This is a heading
This is a paragraph
Impact, Charcoal, sans-serif This is a heading
This is a paragraph
"Lucida Sans Unicode", "Lucida Grande", sans-serif This is a heading
This is a paragraph
Tahoma, Geneva, sans-serif This is a heading
This is a paragraph
"Trebuchet MS", Helvetica, sans-serif This is a heading
This is a paragraph
Verdana, Geneva, sans-serif This is a heading
This is a paragraph
Monospace Fonts
font-family Example text "Courier New", Courier, monospace This is a heading
This is a paragraph
"Lucida Console", Monaco, monospace This is a heading
This is a paragraph