black_max — 2010-02-16T17:56:54-05:00 — #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?
michaelangrave — 2010-02-17T05:53:17-05:00 — #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.
stevie_d — 2010-02-17T07:52:07-05:00 — #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.
paulob — 2010-02-17T08:30:45-05:00 — #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](http://www.w3.org/TR/css3-fonts/#font-size-adjust) at present.
black_max — 2010-02-17T17:23:56-05:00 — #5
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%, 'Lucida Grande'-100%, 'Verdana'-96%, 'Arial'-101%, Sans-Serif;
I just don't see how this could work without causing browsers to throw hairballs.
ryanreese — 2010-02-17T19:26:42-05:00 — #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?
black_max — 2010-02-17T21:55:02-05:00 — #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.