How to reduce the overall font-size of a web site?

Question

Is there a way to reduce the overall font-size of a web site? Suppose we have a WordPress theme (e.g. Highwind), how can the font-size of all page elements be reduced without affecting any other attributes?

I tried setting body { font-size: 1.0em; }, but that will shrink the header's width as well. If I scale the web site to 90 % with Opera's zoom option, the page looks perfect and just the way I want it to look.

So I wonder, what is the easiest way to reduce the size of all fonts on a web site without having to adjust each CSS class individually. The theme uses em for font sizes, so I suppose there must be an acurate solution. I don't understand why the header shrinks as well, though.

Answer 1

Try playing with % on the body font size: E.g.

body {font-size: 85%;}

Answer 2

Try playing the the font size on the html element. That will also effect any element with sizing specified in rem (root ems).

Alternately, changing the font size on the body but not html element will effect the size of element specified in ems, but not rems.

See