Body font-size: 100% reset

[ScottF]

How many people use the font-size 100% as the font size reset (as seen in most css reset examples)? I see a lot of people using a 100% reset but then declare a second body font size of a specific %/em or px later on in the css document. Isn’t this poor css to declare a base font twice?

[Chris Coyier]

It’s bad practice in that the first delcration of setting it to 100% is useless since it’s being overwritten and therefore also a waste in file size.

[ScottF]

Chris. That’s what I thought but you would be amazed at how many sites (and prestigious ones at that) follow that exact bad practice. I thought maybe I was missing something. So far about 90% of the sites I’ve checked set the body font twice.

[cpj238]

Agreed, having two is bad practice, but I have some questions pertaining font size:

What’s better, body{font-size:65%;} or body{font-size:12px;}

I’ve seen it both ways, is it just up to preference?

In some resets I see: h1,h2,h3,h4,h5,h6{*font-size:100%;} the asterisk throws a validation error, is it really needed?

[ScottF]

You should never use px font sizes for setting the body font. That much I know.

A List Apart describes in detail why setting the base font size to 100% is the best way to do it.

http://www.alistapart.com/articles/howtosizetextincss/

[TheDoc]

The main reason for not using px for font size was to satisfy IE6 – now that the majority of developers are providing IE6 with its own stylesheet anyways, go ahead and use px instead of ems. It will give you the most control should you desire it.

[trevorgrayson]

Some devices/browsers will change the base font-size on you to improve readability/make things more clickable. E.g. iPhone inflates your font-size for its smaller screen. By definitively declaring it in the stylesheet, this would presumably keep the browser from using those defaults. This might be a good idea, especially if your layout is going to blow up when the font-size is inflated.

Declaring twice might make sense in this situation. Maybe you are making a reset.css that works across all your sites. You are succinctly saying “Don’t mess with my font sizes” at the HTML level. This would keep your fonts from changing sizes, ever. Then you might want to override this value, maybe even at the body level, to change the font size to what you actually want it to be.

It’s not ‘bad practice’. Even if it was redundant, 10-20chars is cheap, i wouldn’t worry about any ‘overhead’ of reset.css.

[DogsGhost]

I learned CSS always setting body font-size at 62.5%. That way you get 1em=10px.

[jimsilverman]

well yeah, CSS resets dont make for the most efficient code. yet i will ALWAYS start with a reset then add in my additional (if redundant) styles.

the peace of mind that comes with using a reset and knowing that you’re starting with a clean slate is well worth having a few redundant styles and a few extra bytes in filesize.

[Author]

Posts