CSS Fonts

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=em

Example
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 */

Original Source

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


Original Source

Comments are closed.

Search

Websites

  • slide
  • slide
  • slide
  • slide