4

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.

1
  • Apparently in your case, using a particular theme, setting body {font-size: 85%;} does reduce the overall font size (because the theme sets body{font-size: 1.125em;}). So what you want is not simply font size reduction. You should describe the requirements and relate them to some specific design, described in the question itself with sufficient code. Commented Sep 22, 2014 at 5:46

2 Answers 2

7

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

body {font-size: 85%;}
1
  • 2
    +1 for easy, but if you've got the time and knowledge, I'd go through and set all your font-size attributes to em values - overall it creates a more flexible solution.
    – rwxes
    Commented Sep 21, 2014 at 22:59
3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.