Question

When you are using YUI’s CSS scheme, font-sizes are based off of %’s instead of pixels because it gives a better overall consistent font-size across browsers.

But if you have elements with font-sizes set on them, then any elements nested inside it that have font-size set is thrown off. Example:

<div style='font-size: 108%'>
  <p>This content should be 14px.<p>
  <div style='font-size: 167%'>
    <p>This should be 22px but instead it's 23.38px because it's nested in an element that has a font-size set</p>
    <p>Some other content that is not sized how I expected it to be</p>
  </div>
</div>

Now obviously the above example it easily fixed by allocating font-size‘s to the <p> elements. The example is there only to demonstrate the principal/problem. Anyways, having to individually style each element seems kinda dump.

So I just wanted to see if I was missing something. The system/method completely breaks if your wrap any font-size-styled elements with any other font-size-styled elements. Like what happens if you want all your text on the page to have a base size of 12px instead of 13px, which is the YUI default? Making that change throws off ALL %’s for every element on the page. The only solution would be to leave 13px as the base size and individually style MANY MANY elements with the 12px size.

Answer 1

Yup, that’s a fundamental shortcoming in using %-based font sizings. There’s no good way around it.

That being said, unless you have a really good reason to support IE6 I think you should include it (so grids will still work) & then use px/em/etc font sizing instead.