Validity - Refactoring HTML: Improving the Design of Existing Web Applications - page 124

Replace font with CSS
Change all font elements into div , span , or the equivalent semantic element; then apply CSS font properties.
<font face="Tahoma" size="+3" >
Camp Edgewood in the Sunny Pines
</font>
<p><font face="Arial">
Where every boy deserves a week of summer camp.
<font size="1">(Not responsible for leeches.)</font>
</font>
</p>
h1 { font-family: Tahoma; }
p#motto { font-family: Arial; }
*.disclaimer { font-size: small }
...
<h1>Camp Edgewood in the Sunny Pines</h1>
<p id='motto'>
Where every boy deserves a week of summer camp.
<span class="disclaimer">
(Not responsible for leeches.)
</span>
</font>
</p>
Motivation
XHTML strict does not allow the font element because fonts describe appearance, not meaning. They are
deprecated in XHTML transitional and even HTML 4. They are the poster child of presentational markup. They do
not work in non-GUI browsers such as Lynx or screen readers. In many environments such as screen readers,
the whole notion of a font may be meaningless. They should be replaced by more descriptive markup. This can
take the form of semantic elements such as cite or h1 , or span elements with descriptive class names.
Because fonts are purely presentational, they are frequently changed when a site is redesigned. If the styles are
extracted out into external CSS stylesheets, the updates associated with a redesign are much simpler and faster
to implement.
Because this refactoring removes elements, your pages will likely be smaller and load faster without font
elements, especially if your stylesheets are externalized.
Furthermore, the DOM built for these pages is smaller and simpler. This may improve JavaScript execution
speed. It will certainly improve the ease with which you can write JavaScript programs that use the browser's
DOM.
Potential Trade-offs
Very old browsers may not recognize the CSS rules, but we're talking truly ancient browsers here. Even the first
and buggiest third-generation browsers that supported CSS at all supported this much.