Tutorial 23: The Font of Foulness, Part II: Many Faces, Many Colors - HTML with Style | 5
Ever since the last tutorial was published, a lot of readers have written in complaining that replacing FONT elements with CSS directives will usually add to your document size, contrary to what I claimed.
This, of course, is true if you follow the examples I have given to the letter. Going around your documents and mechanically replacing FONT elements with SPAN elements with equivalent STYLE attributes will usually mean you end up with larger documents. However, this is not the smart way to do things.
The biggest problem with FONT elements and their evil brethren is not that they take up too much space individually, but that if you use them to control presentation of your documents you will end up with a whole lot of them scattered all over the place. If you have a long document with lots of elements, and you want to change the font attributes for all of them, you have to insert a whole number of identical FONT elements all over the place. If, instead, you use a CSS style sheet, all you need is a selector that matches the required elements and a short set of declarations. Not only does this save on the wasteful need to have a FONT element for every paragraph, heading or list item etc., it can also make your pages effectively smaller by working with more than one document; the power of external style sheets means that you can have one style sheet for hundreds of similar pages.
The real advantage of this approach comes, of course, when you become tired of that shade of diseased lilac and decide to change the formatting of your documents. If you used FONT, you have to go through every document and change every FONT element in there; if you used CSS, just change one style sheet and voila, you just updated your entire site.
The reason FONT and its kin are evil and should be avoided is that they are bad in the long run. Sure, you might start with a little BASEFONT in the beginning of your document, but before you know it you've got BIG and SMALL elements left and right and your HTML looks a completely ugly and unmaintainable mess.
The message I'm trying to get across is this: Use CSS from the start - you'll thank yourself later. It might be a bit of a pain to learn a new syntax and keep track of all the horrible bugs, but your pages will work better because of it. Remember that until the next tutorial, and in the mean time, go forth and eradicate those FONT elements.