Question

I’ve got a website that has all elements from <h1> to <sup> – and each of them have their own font sizes, (most of them in pixels)

This website is a collection of clients and each client has their own subdomain.. While the base code, images, css and js are all same for the whole website, each subdomain has it’s own specific theme.css – just the one css file used to apply client specific design.

Now, one client wants bigger fonts throughout their subdomain. So I thought it was just a matter of adding

*
{
    font-size: ...
}

Now, I cannot specify one size there.. and I can list out all elements and set the font size individually (this will be plan B) – but is there a way that I can set all elements to increment their respective font sizes?

---

Edit
IF this is not possible by css, I can do so with jquery.. I guess..
Also, changing the existing px sizes is not an option as this is legacy code and I don’t have access to the base css files.. just the subdomain.css and subdomain.js file..

Answer 1

If you change all elements to use em or percent instead of pixels you can change the base font size for the body, but as they are specified in pixels you can’t do that.

Solution 1:
Change all font sizes set in pixels to their corresponding em or percent size, and set a larger body size.
This tool could help you with that: http://pxtoem.com

Example:

body {
  font-size: 16px;
}

p {
  font-size: 1em;
}

Solution 2:
Group all elements with the same size and override them.

Example:

div,
span,
p {
  font-size: 12px;
}

sub,
sup {
  font-size: 10px;
}