Fonts and CSS
CSS is the most effective way to adjust the fonts on your web page. You can control the font family, size, color, weight, and many other aspects of the typography.
Font properties in CSS are one of the most common ways to make your page more distinctive and unique. It is easy to change the color, size, and even face (the font itself) of your text with CSS font properties.
There are three parts to a font:
This is the color the font will display as on the screen.
This is how large or small the typeface will render on the screen.
This is the font family, what is often referred to as the actual font.
Try the following styles in your web pages:
<span style="color: #ff0000;">this font is colored red</span>
<span style="color: #0000ff;">this font is colored blue</span>
When you set the font size on the web you can set it in relative sizes or be very specific using pixels, centimeters or inches. However, the more exact font sizes are meant to be used for print and not for web pages, where everyone who views your website might have a different resolution, monitor size, or default font setting. Thus, if you choose 15px as your standard size, you might be unpleasantly surprised to see how large or small your font renders to your customers.
I recommend you use ems for font size. Ems allow your page to remain accessible no matter who is viewing it, and ems are meant for screen rendering. Leave your pixels and points for print rendering. To change your font size, put the following style in your web page:
<span style="font-size: 1em;">this font is 1em</span>
<span style="font-size: .75em;">this font is .75em</span>
<span style="font-size: 1.25em;">this font is 1.25em</span>
The face of your font is what many people think of when they think “font.” You can declare any font face that you would like, but remember, if your reader doesn't have that font installed their browser will try to find a match for it, and their page will not look as you intended.
To address this problem you can specify a list of face names, separated by commas, for the browser to use in order of preference. These are called font stacks. Keep in mind that a standard font on a PC (such as Arial) might not be standard on a Macintosh. So you should always view your pages with a minimally installed machine (and preferably on both platforms) to make sure that your page looks as designed even with minimal fonts.
One of my favorite font stacks is
<span style="font-family: arial, geneva, helvetica, helv, sans-serif;">
This set is a sans-serif font collection and while geneva and arial do not look terribly similar, they are both fairly standard on Macintosh and Windows computers. I include helvetica and helv for customers on other operating systems such as Unix or Linux that might not have a robust font library.
<span style="font-family: geneva, arial, helvetica, sans-serif;">this font is sans-serif</span>
<span style="font-family: times, 'Times New Roman', serif;">this font is serif</span>
More Font Resources
Read the Most Recent Articles from Web Design at About.com.