![\"\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/05\/fonttag-400.gif\" "\\"Dreamweaver")
<\/p>\n<\/p>\n
So let\u2019s say \u2013 hypothetically \u2013 that you\u2019ve decided to take the plunge and replace all of the font tags in your website with semantic code and CSS. Hypothetical congratulations! You\u2019re one step closer to web nirvana. Or perhaps you\u2019ve just inherited a website filled to the brim with hundreds of nested font tags forming some sort of primordial typographical soup. You have my (very real) condolences. Luckily, replacing font tags with semantic code and CSS isn\u2019t as terribly difficult as it might seem at the outset. And to help you along your way, here are a few tips on how to tackle the project.<\/p>\n
Start out with a complete assessment of your current font usage. How many typefaces are you using currently? How many sizes? Do you use some of them more than others (hopefully so!). In what context are the fonts used? Write out this information and see if you can\u2019t discover some sort of a rational pattern in the usage. If you\u2019re lucky, a good, distinct pattern will appear \u2013 article headings always appear in 20-pixel Arial, for example.<\/p>\n
If you\u2019re lucky, and the font tags follow some sort of a rational pattern, you\u2019re in a good spot. The easiest way to start down the road to font tag recovery is to replace as many font tags as you can with semantic, meaningful tags. For example, if all of the article headings look the same, why not replace those font tags with an actual heading tag (<h1> – <h6>)? And if all of your paragraphs contain identical font tags, then you can just eliminate those tags straight away. Then you can style these elements later on down the road with CSS.<\/p>\n
The last thing you want to do when eliminating all of those font tags is just to replace them with a slew of unique classes and IDs. Classitis (as this practice is commonly called) is nearly as bad a disease on the web as is font tag usage. Only use classes and IDs when absolutely necessary; if all of your <h3> tags have a class of \u201carticleHeading,\u201d what\u2019s to stop you from just applying those styles to your <h3> instead? For more information on Classitis and how to prevent it, see this article on Combating Classitis.<\/a><\/p>\n When it comes time to start writing your CSS, remember to let your font choices cascade.<\/a> If you discover that you have one size and typeface used in 90% of your website (14px Arial, for example), there\u2019s no reason to set this font information on every possible tag in your CSS. Just set your \u201cdefault\u201d (i.e., most common) typeface on your body tag instead. This will save you a ton of time and effort down the road. <\/p>\n If you come across a single-use font tag in your website \u2013 a font style that is used in one and only one place in your website \u2013 this would be a good time to stop and consider whether to eliminate that unique case. Is that different typeface necessary? Was it even and intentional<\/em> choice? With so many font tags scattered about, some differences in typography may be entirely accidental. If you decide that this specific instance is both deliberate and necessary (e.g., your error messages look different than the rest of the text), set an ID<\/a> on the tag and style the element that way.<\/p>\n You\u2019ve probably found that, while you\u2019ve managed to eliminate hundreds of font tags from your website, you\u2019ve added dozens of lines of CSS to your site \u2013 and that can seem like an uneasy trade if you\u2019re more comfortable with font tags than CSS. To help cut down on the length of your CSS file, it can help to use the font property shorthand (described here).<\/a> By using the shorthand, you can turn six or so lines of CSS into a single, easily digestible rule.<\/p>\n HTML editors can sometimes cause just as many problems as they solve \u2013 they can be a great source for font tags, for example. But many editors (Dreamweaver, Notepad++< and many others) also have pretty powerful search-and-replace functionality. And this will come in handy when you finally get to the toughest part of transitioning away from font tag usage \u2013 deleting all of those font tags you don\u2019t want anymore. At that point, and editor capable of doing a search\/replace \u2013 and perhaps even better, one that understands regular expressions \u2013 can be worth its weight in gold. Otherwise, you could just always consider the time it takes you to go through all that code as some sort of penance. :)\n\nThese are seven suggestions to help make it easier to transition from font tags to semantic code and CSS. If you have any other suggestions you\u2019d like to add, offer them up in the comments!\n<\/p>\nLet Your Fonts Cascade<\/h3>\n
Perform Unique-Case Triage<\/h3>\n
Use CSS Shorthand<\/h3>\n
Make an Editor Do the Work<\/h3>\n