Ian Hoar – Passion for Technology – Geeking Out - Technology, Web, Toys, Games, Design, Entertainment, Gadgets, & Geeking Out

CSS tip, declare your font family once

October 1st, 2009 Comments3

Here’s a CSS tip that I wish more people would follow. When setting up a font on your site, say Verdana, there is no reason to declare it on every H tag, P tag and class you are using. Throw it up in the body and be done with it. The same goes for font sizes, colours and anything else that will be uniform across the site. Once you have done this you can override it for specific tags and classes when you need too.

body {
	font-family:Verdana, Arial, sans-serif;
	font-size:12px;
	margin:0;
	line-height:130%;
	color:#333333;
}

This will make your life easier and everyone else who has to work with your files will thank you. I think we should always be looking for ways to make our CSS smaller, cleaner and easier to read.

Comments feed | Posted in: Code, tips, Tutorials

3 Comments to “CSS tip, declare your font family once”

  • CBloss October 1, 2009 at 5:25 pm

    Oh so true. This should go with table tags too. 🙂 Any font-family declared in the body tag doesn’t follow through to the table tags.

  • Ian Hoar October 2, 2009 at 12:33 am

    Hi CBloss, unless I’m coding emails or creating table based data I try to avoid using tables. The font should inherit through out the page, although I know it does not in some mail clients and possibly IE. As you mentioned you can style the table tag to be sure. A simple way to still only declare the font once would be to declare these attributes for both body and td elements like so.

    body, td {
	font-family:Verdana, Arial, sans-serif;
	font-size:12px;
	line-height:130%;
	color:#333333;
}

  • CBloss October 2, 2009 at 10:23 am

    Very true. I’m still old style and tend to use table to help format, but if I can, I will avoid them. I’m not very confident in CSS positioning. I forgot (rather stupid of me) about grouping declarations like that. I usually don’t declare anything in the body tag besides background color and margin since all my text is within a table. 🙂

Responses: