Font-family degradation and font sizes

Using MS ClearType fonts, degrading to Web Core Fonts and maintaining size

[badbadmonkey]

I've taken to using some of the new Microsoft ClearType fonts on the basis that they're an improvement over the old Verdana and Arial mix I was using on a particular site.

For the screen, I've got

font-family: Calibri, "Trebuchet MS", Arial, Helvetica, sans-serif; 
font-size: 15px;

In the code above, I'd prefer to use Verdana in place of Trebuchet MS, but it is too big - however Trebuchet is also a bit large, and herein lies my query.

Calibri is noticeably smaller than the older fonts, which means that a given font size looks okay in Calibri, but on many systems the degraded Trebuchet MS looks oversized. (Which is kinda the wrong way round - if it was smaller, I would probably accept that as a convenient benefit).

My question is, how would you specify a series of fonts and specific sizes, a la the font-family property? So that the font size depends on the typeface being used.

e.g., use Calibri @ 15px, then Verdana @ 12px, then Arial @ 14px, etc.

?

[swa66]

I don't think pure css can achieve what you seek.

You could try if javascript can figure out what fonts are available and then reset the font-size according to your wishes. But as always people might have javascript turned off)

If your layout is so dependent on font-size, take great care as user style sheets can, will and should be allowed to override font sizes (think about those needing bigger fonts to be able to read the screen).

[badbadmonkey]

It's not dependent on font size, I just want a sensible default, and either the MS ClearType fonts are too small, or Verdana / Trebuchet are too big. They are relatively quite different. I have the same problem with the print style-sheet.

I was using px as above in the hope that this would be more explicit but no such luck, I am using em normally.

I tried

font: 0.8em "Trebuchet MS", Arial, Helvetica, sans-serif; 
font: 0.95em Calibri;

in the hope that if the 2nd declared font did not exist it would degrade to the first, but it doesn't, just ignores the first completely...

[poppyrich]

What you are trying to do requires javascript to detect whether Calibri is installed on the client OS and change it to a font-family with a font-size that brings it in line with how Calibri renders.

Each font as it's own individual "fingerprint" with respect to how many pixels it takes up given a particular string.

I'm aware of one published technique for doing that and there's maybe more.

search: lalit.org font detection

Let us know how it works for you, if possible.

[DrDoc]

We had a discussion about this a long time ago. I posted a solution which would resize on the fly.

There are two drawbacks to such a solution:

1) it requires JavaScript to work
2) it may mess with the user's preferred settings (in the event they have enlarged fonts in their browser, for example)

Typically, you will want to have a hidden div with some text in a common font (Courier, for example). You know that 1em at 100% text size is X pixels tall. Now you check the actual height of the div. This gives you the text zoom factor. Then you have a second hidden div with text in your preferred font. You know that the same 1em text at 100% text size is Y pixels tall. Calculate the actual height based on the zoom factor. Decide on a margin of error it must fall between. Repeat for each font as needed. Once you have figured out which of the fonts is being displayed, set the size as needed.

There might be better solutions, but if there are -- I am unaware of them.

The above works, but is not pretty (as is expected).

[edited by: DrDoc at 5:31 pm (utc) on Oct. 20, 2008]

[poppyrich]

@doc and all...

As far as the drawbacks:

1) it requires JavaScript to work

I don't see this as a drawback, per se. A "consideration" is more like it, if you ask me. ;)

2) it may mess with the user's preferred settings (in the event they have enlarged fonts in their browser, for example)

Well it won't undo the user's settings in the OS, of course. But yeah, it's possible, that you could get a false result when you measure the size of the div.

For example, in IE6, if the user has their setting in Windows for "Larger Font Sizes" settings at 120 dpi, let's say, the size of the div will report differently than at 96 dpi.

Might be a workaround, though. Just can't think of what it might be off the top.

[swa66]

I've been playing with Verdana and Calibri in Illustrator to compare that to what browsers do. At the same size (in points) the Calibri font indeed does not only look smaller, but the actual dimensions of the bounding box are also smaller.
Trying to figure out the reason of that lead me to reading back to typesetting using metal letters and the need for structural strength in those letters. Something today's printing world is long past. Still fonts don't change and given their history this is what we're stuck with.

So that leaves us with a longing to control better how tall/wide a font is rendered at, without knowing which font in a list of fonts will be chosen.

So I guess that's where DrDoc's method sounds pretty cool.

Looking at it in Illustrator, it seems that even if I specify a font size in millimeters, it converts it statically to the somewhat archaic points measuring system, without taking into account the actual size of the letters. So in that respect it's acting just like a browser that's been given a size in pixels and still renders it different.

Still, regardless of it all, I think it's easier if we "go with the flow" and not try to manhandle font sizes all to much, and leave room for a bit of variation between platforms and browsers.

[badbadmonkey]

None of you guys have mentioned the 'proper' solution, which turns out in fact a simple CSS property:

[developer.mozilla.org...]

It works perfectly, with Calibri and Trebuchet MS seeming happy at a ratio of 0.47, albeit not in MSIE - hopefully ver 8 will fix that, being a small aesthetic thing I'm not too concerned in the meantime.

There's some good resources w.r.t. fonts here:

<snip>

[edited by: swa66 at 11:52 am (utc) on Oct. 21, 2008]
[edit reason] Sorry, no links to blogs [/edit]