Change body font-size without losing YUI %-based sizing?

[Jakobud]

In a project I'm working on, we are using H5BP. The designer wants the base font-size on the page to be 12px. Using YUI's %'s that H5BP implements, I assumed I would go into the style.css down to primary styles and simply add:

body {
  font-size: 93%;
}

But this increased the font size.... Chrome dev tools calculates it at 15px. Why isn't it 12%?

Next, I assumed I probably just needed to add it to the right place or alter the proper value higher up in the CSS. Up under the base section, I could just change the body font-size to 12px, but then I would think this would break the YUI %-based sizing so that now the percentages would not line up properly with the font sizes... Also changing the font-size: 100% under the html area didn't seem to do anything...

I'm probably just misunderstanding how to use this aspect of the css, but is it possible to change the base body font size without breaking the YUI %-based sizing scheme?

Does everything have to be wrapped in a div that has the font-size: 93% in order to get it to work?

[necolas]

We don't use YUI's stuff anymore.

If you want to set a relative unit body font-size equivalent to 12px, then use 75% (of 16px, the browser default) or 0.75em in place of the 13px value in the default CSS.

Hope that helps. Thanks

[Jakobud]

Oh... I didn't know the YUI wasn't being used for h5bp 2.0. So is there a chart somewhere that shows the relative % sizes for fonts or has that whole thing gone out the door as well?

[kevva]

100% font size is 16 by default. Just divide 12 by 16 which gets you 0.75em or 75%. It is recommended to use % as base font size though so I would go with 75% and then use em based font size on everything else.

[Jakobud]

Ya I get that. I just wasn't sure if there was a chart somewhere with precalculated % to px sizes on it already.