1. Technology

The Font Tag versus Cascading Style Sheets (CSS)

Why You Should Switch to Cascading Style Sheets

By

If you've read many other Web pages, you may have read that the <font> tag has been deprecated. This means that the tag is no longer a part of the HTML specification. While browsers will still support it, most likely for a long time, it's a good idea to switch to the alternative.

What is The Alternative to the Font Tag?

Cascading Style Sheets. CSS can do all the same things that the <font> tag can do, plus a lot more. Let's examine what the <font> tag can do and compare how to do it with CSS.

Changing the Font Face or Font Family

The font face is the face or family of the font. With the font tag, you use the attribute "face".

<font face="garamond, times">this font is not sans-serif</font>

In CSS instead of font "face", it's called the font "family", but otherwise, it's essentially the same as the font face tag:

<span style="font-family : garamond, times;">this font is not sans-serif</span>

Changing the Font Color

As with the face, you use the "color" attribute and hex codes or color names to change the color of your text:

<font color="#9933ff">this font is purple</font>

The misleading part about changing the font color is that you don't have a font property in the CSS call, you just use the "color" property:

<span style="color : #9933ff;">this font is purple</span>

One thing CSS can do that the font tag cannot, is CSS can change the background color behind the text.

<span style="background-color : #9933ff;">The background behind this text is purple</span>

Changing the Font Size

There is only one way to change the font size with the font tag:

<font size="+1">this font is one size larger than the base font size for the surrounding text.</font>

With CSS, you can change the font size relative to the base font size in the browser:

<span style="font-size : x-large;">this text is extra large</span>

You can also change the size to a specific pixel or point size:

<span style="font-size : 14pt">this font is 14 points</span>
 
 <span style="font-size : 14px">this font is 14 pixels</span>
 
 

Plus CSS Can Do More Than the Font Tag

Finally, there are some other tricks you can do with CSS that the font tag cannot do:

<span style="text-decoration : underline;">this text is underlined</span>
 
 <span style="text-align : right;">this text is aligned to the right</span>
 
 <span style="text-indent : 15px;">this text is indented 15 pixels</span>
 
 <span style="text-transform : capitalize;">this text is capitalized</span>
 
 <span style="text-transform : uppercase;">this text is uppercase</span>
 
 

When it comes right down to it, deprecating the font tag isn't so bad. With CSS to fill in the gaps and add extra tools to manipulate your text even more than the font tag ever did.

Previous Features

©2014 About.com. All rights reserved.