CSS Tip – Use the power of the asterisk

One of my pet peeves is opening up a CSS file and seeing a sea of font tags. Especially when it is the same font attributes specified over and over and over.  The asterisk (*) is a very useful element for style sheets.  When you use the asterisk for a style rule, it equates into “apply this to everything”. So one of the best applications for this is font. Strip out all those redundant font attributes and add one simple rule to your style sheet:

* {font-family: Arial, Helvetica, sans-serif}   of course do font attributes of your choice

Now in some situations you will need to add a couple more tags to that to get it to appear across the board in every rendered HTML tag:

*, td, p {font-family: Arial, Helvetica, sans-serif}

But that is it.  Control your font family and size from one central location and only specify differences in your other rules.  This also leads us to another good rule of thumb, limit the number of fonts you use on a site. A good rule of thumb for a large design piece like a web site is keep it to three fonts or less.  And this includes your fonts in any images or logos. Once you start using too many fonts, the design breaks up and looks cluttered.  Use a font for your logo, one maybe for images, and then specify your third with a global asterisk rule.  🙂