Variable font sizing

HTML & CSS
1

I saw this in a 2006 blog post about Vista fonts being undersized. The writer posited this as a possible workaround for size differentials:

font-family: Calibri, 'Lucida Grande', Verdana, Arial, sans-serif;

[highlight=“Possibly Wonky CSS”]font-family: ‘Calibri’-120%, ‘Lucida Grande’-100%, ‘Verdana’-96%, ‘Arial’-101%, sans-serif;



Not disputing the guy's percentage choices per se, but I am uneasy about the entire concept behind this. He calls it a quick and dirty CSS hack. I'm not sure what to think. Is this a brilliant workaround that isn't widely considered, or is it a train wreck waiting to break our designs?
2

I’ve personally never heard of this work around, or the fact that the Vista fonts are indeed smaller!

I will be looking into this and conducting some testing of my own.

<snip>

3

From what I can tell, reading the article, he was suggesting that browser manufacturers could implement a system whereby fonts could be individually targeted with sizes, and this was simply one example of how it could work - it was not intended as an example that could currently be used.

4

I believe font-size-adjust was spposed to address this problem to some degree.

It was in css2 but removed in 2.1 but proposed now for css3. I think only Firefox [URL=“https://developer.mozilla.org/en/CSS/font-size-adjust”]supports it at present.

5

Yuppers, Paul, font-size-adjust is the central issue of this thinking process. I agree with Stevie also, I can’t see this alone as being workable in current CSS, though I do believe that the article suggested this as a CSS “hack.”

The best solution would be (and forgive us if this already exists, we couldn’t find it) to give a percentage height to each font, so instead of a CSS segment that used to look like

font-family: Calibri, 'Lucida Grande', Verdana, Arial, Sans-Serif;

One could implement a CSS hack that provides per-font size scaling, a quick and not-too-well-thought-out example being:

font-family: 'Calibri'-120&#37;, 'Lucida Grande'-100%, 'Verdana'-96%, 'Arial'-101%, Sans-Serif;

I just don’t see how this could work without causing browsers to throw hairballs.

6

It’s supposed to be intertwined if I remember correctly with the font family property, something like a shorthand :).

Though the question I’m wondering is, if using hte percentages will fix vista, won’t it screw up others since vista has a problem with smaller font sizes?

7

Good question. I’m not the expert that Paul or Tommy is, but it just doesn’t strike me as something that will work the way the guy says it will.