From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

Fonts and CSS

The font tag has been deprecated in favor of cascading style sheets, so it is a good idea to get familiar with how to change the font color, size, and face with CSS. The one advantage is that working with CSS, you have much more control over the look of the font, including size in pixels and other aspects of typesetting.

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.

• color
• font-family
• font-size

There are three basic parts to a font:

• color
  This is the color the font will display as on the screen.
• size
  This is how large or small the typeface will render on the screen.
• face
  This is the font family, what is often referred to as the actual font.

Font Colors

To change the color of the text, simply use the CSS color style property. You can use either color names or hexadecimal codes. As with all color on the Web, it is best to use browser safe colors. 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>

Colorizing the Web
Using Browser-safe Colors

Font Sizes

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 Web site 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. 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>

Deciding on Font Sizing in CSS

Font Faces

The face of your font is the actual font that is used. You can declare any font 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 like 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. 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 sets 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>

What is a Font?

Font Resources

Fonts and Typography in Web Design
Type Measurements
How to Change the Font Using CSS
Beginning CSS

Previous Features