Tuesday, September 14, 2010

Styling text the old-fashioned way (or, why we hate font tags)

Styling text online used to be all about font tags. When Netscape introduced the font element—
complete with size and color attributes—web designers wept tears of joy. When
Microsoft announced it would go further, adding a face attribute (enabling you to specify
the font family), web designers were giddy with anticipation. But things didn’t go according
to plan. Page sizes bloated as designers created pages filled with fonts of myriad sizes
and colors. Web users looked on aghast, wondering whether giant, orange body copy was
really the way to go, and whether it was worth waiting twice as long for such abominations
to download.
More important, it became apparent that font tags caused problems, including the following:
Inconsistent display across browsers and platforms
The requirement for font tags to be applied to individual elements
Difficulty ensuring fonts were consistent site-wide, because of having to style individual
elements
HTML geared toward presentation rather than logical structure
Large HTML documents due to all the extra elements
In addition, working with font tags is a time-consuming, boring process, and yet some
(although, thankfully, increasingly few) web designers remain blissfully ignorant of such
problems. In my opinion, if font tags weren’t HTML elements, I’d suggest they be taken
out back and shot. Today, there is no reason whatsoever to stick with them. Text can be
rapidly styled site-wide with CSS and, as we’ll see later in this chapter, CSS provides you
with a greater degree of control than font tags ever did. More crucially, font tags encourage
badly formed documents, with designers relying on inline elements to style things like
headings, when there are perfectly good HTML elements better suited to that purpose.HTML should be reserved for content and structure, and CSS for design. Web pages should
be composed of appropriate elements for each piece of content. This method of working,
called semantic markup, is what we’re going to discuss next.

No comments:

Post a Comment