Changing the base font size without the pain and struggle?

HTML & CSS
1

Ok, here’s my situation. Currently, the base font I have is 11 pixels Verdana. I need to switch the base font to 12 pixels Arial.

Here’s my stylesheet now:

body {
    font: 100%/1.6 Verdana, sans-serif;
    padding: 8px;
}
#container {
    font-size: 0.688em; /* 11px */
}

Unfortunately, I can’t just make a simple one-line change in the CSS because I’ve used em’s to define all measurements (ie, font-size, margins, paddings, everything). If I were to make such a change all my em measurements would go out of whack and I’d have to find every single instance of an em and recalculate it.

So my question: Is there an easier way to go about this? Is there some technique that’ll allow me to make such changes without having to manually re-edit thousands of lines of CSS code?

All my em measurements have 3 decimal points, so it’s not an easy task to deal with this manually.

2

Well unfortunately (I can’t think of any solution) I think you may be stuck with recalculating everything (unless of course you set the #container to be font-size:12px, though?)

Though setting px font sizes is a bad idea so I think you are stuck here :(.

3

I was afraid you’d say that. I should have come up with a system to deal with this. Even if I have to do all this manually, after I’m done I still won’t have a system in place in case I later decide to go to Georgia 13px.

4

What happens if you try

#container {
    font-size: 75%;
}
5

Unfortunately, I can’t just make a simple one-line change in the CSS because I’ve used em’s to define all measurements (ie, font-size, margins, paddings, everything). If I were to make such a change all my em measurements would go out of whack and I’d have to find every single instance of an em and recalculate it.

Changing the parent will automatically change all the children based on the parents font-size. Isn’t that the main point of using ems? :slight_smile:

You don’t need to re-calculate the children’s size unless you don’t want them to change even though you have changed the parent. Then that begs the question why change the parents base size if you don’t want the children to change?

With ems your whole layout will scale accordingly and the parent child relationship you originally created will always be maintained. There may be some rounding errors if you have gone for pixel perfection but otherwise scaling should be consistent enough.

As Ryan said if you want to maintain independent sizing then use pixels but lose the scalability factor.

6

Percentages and em’s are exactly the same. THe only difference is the decimal place(s) ;).

7

It could seem so. :slight_smile:

The em is based on the element’s current font size, and can be used for practically any property length. (In IE user font changes is also applied to em values from body down, resulting in an em-multiplied size change, until the em-chain is broken with a percentage value.)

The percentage is based on the inherited font size. (Used for html or body font-size the em-multiplying in IE never occurs.)

Now one can argue that for font-sizes the current size is the inherited size. :wink:

Edit:

The 75% suggested by Ralph would translate to the base size of 12px, just as the OP wanted, witch I assume was his point. :wink:

8

Yes but I think the op wanted to change the base size to 12px without the children changing their sizes (e.g. if a child had a computed size of 10px then it would remain 10px). Changing the parent changes the child - which after all is the point of ems anyway :slight_smile: However I don’t understand why you would want to change the base font size if you didn’t want anything else to change so I’m a little confused anyway and may be barking up the wrong tree again.:wink:

9

Please provide the full code or better a link, and we can see if there is a way to implement a “dynamic” font-size base without too much changing.

10

I think that might work. Thank you.

My goal was to change the base font size that would cause the children to properly scale without actually changing the child measurements within the CSS code. I think Ralph’s suggestion will accomplish this.

I actually did go for pixel-perfection using em’s. Since I calculated measurements exactly to 3 decimal points, my em setup would look exactly the same as if pixels were used, assuming the user left his browser font size at the default. Anyway, there’ll probably be some pixel imperfections using em’s here and there, but I’ll just have to deal with it.

You’re correct. That’s what I was looking to achieve. It looks like Ralph’s 75% body font size change will achieve that.

Well, I want the font size to change visually in the browser without actually having to dig in the code and alter every instance of em’s within the CSS file.

The way I have it now, the body has a width of 100% and I calculate all em measurements from that. By using 75% in the body it looks like I can scale things up from 11px to 12px while leaving the hundreds of em measurements as-is. I’ll essentially be faking it in the style sheet, but it may work.

Thanks to everyone for their feedback in this matter.

11

That comment that the font is currently 11px is incorrect to start with. For some people the font size of that content will already be 12px - it depends on how each visitor has their browser set up.

12

My goal was to change the base font size that would cause the children to properly scale without actually changing the child measurements within the CSS code. I think Ralph’s suggestion will accomplish this.

Yes everything will scale accordingly and you only need to change the base size - which is what ems were designed for :slight_smile:

I actually did go for pixel-perfection using em’s.

lol - It’s not possible cross browser as the rounding routines between browsers are different. Some round up and some round down and some like moz keep a running total of the fractions. Just because you’ve worked something out be 11.99 it may get rounded down to 11 and then the next calculation may be based on 11. However some browsers keep the fraction and work on that again so there is quite a lot of room for differences between browsers.

Also remember as Stephen says above you can’t guarantee what the users system base size is anyway.

However the relationship between sizes still will be maintained which is the important thing.:slight_smile:

13

To probably get pixel perfect with flexible layouts such as ems, you’d probably have to use JS to detect each em value and then impliment your own rounding system.

Not feasible for real sites though ;).

14

This is kinda a confusing question, because it implies that the layout had no flexibility to begin with. even if the code is set to haves specific base font size, any user can and will change this size… so if you used em when you needed FIXED px size your layout will be awfully fragile.

So the question is is the PAGE a fixed size and then internal elements were sized in ems?

a quick fix might be to employ min-width/height to set constraints for when you or a user changes the base font size. this may save you the web-math.