Hi, I'd like to know if something is possible. With font-family, you can specify the desired font in order. With font, you can specify a font and a size in one go, and with font-size you can specifcy the font size. However, is there a way to specify fonts and respective font sizes, in pairs as it were, in order of preference? One font size doesn't necessarily fit all, the same font size can make two different fonts look wildly different in size/appearance/appeal. Something like: verdana 10pt, tahoma 11pt, arial 12pt... off the top of my head that is. This would have to be in CSS 2.1, if it's CSS 3 only I'd be interested to hear about it but it'd be of no use to be currently. It's not something I've thought about before, and my google skills seem to be failing me today. Cheers.

No you can't do that, but you can specify different value based on specific classes/ID's. eg

 

p {font-size: 1em;}

 

will display text at the normal size

 

whereas

 

p.leadin {font-size: 1.5em;}

 

will display text 1.5x the size twhen the class ".leadin" is used on a P tag

No you can't do that, but you can specify different value based on specific classes/ID's. eg

 

p {font-size: 1em;}

 

will display text at the normal size

 

whereas

 

p.leadin {font-size: 1.5em;}

 

will display text 1.5x the size twhen the class ".leadin" is used on a P tag

 

Yeah I figured you probably wouldn't be able to do that or else I'd have likely come across it before. I'm aware of what you described, but it wouldn't help because the font-family ordering sequence selects the first font if available/installed, then the next, then the next and so on, down to a generic "sans-serif" or "serif" font if none of the previous are available. My issue was that as it goes through this list (for people who might not have the preferred fonts installed) you're restricted to one font size for all, which may not be appopriate for each font. Your suggestion is standard class font-size styling; it doesn't know which font has been used and therefore still locks the font to one predetermined size for that class, regardless of the font used. We don't know the font used for sure because we don't know what the user does or does not have installed. It appears there's no way to do this, but it's not the end of the world. Careful font selection should have very similar and popular fonts used in the list anyway, so it shouldn't impact too hard. Thanks for the reply!

Yeah I figured you probably wouldn't be able to do that or else I'd have likely come across it before. I'm aware of what you described, but it wouldn't help because the font-family ordering sequence selects the first font if available/installed, then the next, then the next and so on, down to a generic "sans-serif" or "serif" font if none of the previous are available. My issue was that as it goes through this list (for people who might not have the preferred fonts installed) you're restricted to one font size for all, which may not be appopriate for each font. Your suggestion is standard class font-size styling; it doesn't know which font has been used and therefore still locks the font to one predetermined size for that class, regardless of the font used. We don't know the font used for sure because we don't know what the user does or does not have installed. It appears there's no way to do this, but it's not the end of the world. Careful font selection should have very similar and popular fonts used in the list anyway, so it shouldn't impact too hard. Thanks for the reply!

 

Relying on font-family to do fonts on the web is not really best practice. Especially fonts that have different metrics (thus require different sizings like the problem you're having) If you want fonts on your website and are limited to CSS2.1 really your options are either the "web safe" fonts or to use a font-replacement package like cufón. Neither ideal but that's the state of web fonts.

 

In CSS3 the outlook is a little more cheery there's the new @font-face rule where you can define a font face and provide the font file so that you know the client will see your font. The only problem is support is actually pretty good; Firefox 3.1+, Safari 3.1+, Opera 10 and IE4+ the downside is that pretty much every browser supports different font types, IE requires .eot safari uses .otf and firefox uses its .woff font type. Additionally most commercial fonts you'll font will not allow embedding in this way (though this is a problem for cufon as well) so you're more stuck to free fonts and converting them about like a crazyman.

 

Edit: Tools like http://www.fontsquirrel.com/fontface/generator help with @font-face converting

Relying on font-family to do fonts on the web is not really best practice. Especially fonts that have different metrics (thus require different sizings like the problem you're having) If you want fonts on your website and are limited to CSS2.1 really your options are either the "web safe" fonts or to use a font-replacement package like cufón. Neither ideal but that's the state of web fonts.

 

In CSS3 the outlook is a little more cheery there's the new @font-face rule where you can define a font face and provide the font file so that you know the client will see your font. The only problem is support is actually pretty good; Firefox 3.1+, Safari 3.1+, Opera 10 and IE4+ the downside is that pretty much every browser supports different font types, IE requires .eot safari uses .otf and firefox uses its .woff font type. Additionally most commercial fonts you'll font will not allow embedding in this way (though this is a problem for cufon as well) so you're more stuck to free fonts and converting them about like a crazyman.

 

Edit: Tools like http://www.fontsquirrel.com/fontface/generator help with @font-face converting

 

Thanks for that, I though that CSS3 might address this short coming. I didn't know about cufón, that's very interesting and I'll take a look at it. I'm shocked that @font-face is so well supported... doubly so at IE4, assuming that was not a typo. I'll stick to web safe fonts as I always have for now, I've found that page you linked to very useful in the past and continue to use it today. Thanks for all the advice.

Thanks for that, I though that CSS3 might address this short coming. I didn't know about cufón, that's very interesting and I'll take a look at it. I'm shocked that @font-face is so well supported... doubly so at IE4, assuming that was not a typo. I'll stick to web safe fonts as I always have for now, I've found that page you linked to very useful in the past and continue to use it today. Thanks for all the advice.

 

The IE4 thing is pretty amazing, font-face started of as a proprietary Microsoft extension to CSS (like behaviour: and other stuff they tacked on to the standard) back when they were in there "we need more features to compete with netscape" phase. But they way they implement it is pretty different from the CSS3 standard and you've got to be pretty careful how you declare the rules otherwise IE will mangle them pretty badly, and also as before they've got their own .eot font-type which is basically not used anywhere else.

 

But other than the pain of using it, it is pretty impressive they've had it for so long

Yeah I figured you probably wouldn't be able to do that or else I'd have likely come across it before. I'm aware of what you described, but it wouldn't help because the font-family ordering sequence selects the first font if available/installed, then the next, then the next and so on, down to a generic "sans-serif" or "serif" font if none of the previous are available. My issue was that as it goes through this list (for people who might not have the preferred fonts installed) you're restricted to one font size for all, which may not be appopriate for each font. Your suggestion is standard class font-size styling; it doesn't know which font has been used and therefore still locks the font to one predetermined size for that class, regardless of the font used. We don't know the font used for sure because we don't know what the user does or does not have installed. It appears there's no way to do this, but it's not the end of the world. Careful font selection should have very similar and popular fonts used in the list anyway, so it shouldn't impact too hard. Thanks for the reply!

As James said that's really down to the font itsself, so when choosing a font stack it's something to be aware of, and choose fonts that have a similar size attributes.

 

... and of course people can always override your choice of fonts with their own

As James said that's really down to the font itsself, so when choosing a font stack it's something to be aware of, and choose fonts that have a similar size attributes.

 

... and of course people can always override your choice of fonts with their own

 

Aye, I know there's no golden bullet with fonts, it was just something that crossed my mind this morning that I'd never thought about before. Thanks for all the input everyone.