font:{}

[Sarah Atkinson]

If I have multiple font choices. (so that if my perfered font isn't on their system it will go to second and so forth until it gets to plain sans. can I specify didferent sizes for each of those fonts?

[Tomness]

Yes.

Here's a pretty self explanatory example.

font: 12px/17px Arial, Sans-Serif;

Hope I helped.

[jetboy]

Unfortunately not. What units are you using to specify font size? I'm not sure, but different fonts could 'size up' to the next displayable size at different settings. Using px should be the most consistent, although there are tradeoffs in usability.

Another approach - again, just thinking aloud here - could be to use the JavaScript DOM to sniff which font is actually being used by a user agent, and change the size based on this data. Has anyone tried this? It does mean that something pretty fundamental to the site layout is going to governed by JavaScript though ...

[SuzyUK]

Tomness

font: 12px/17px Arial, Sans-Serif;

re: those 2 x different sizes the first is the font-size and the second is the line-height,

Unfortunately there is not a way to do what is being asked unless some sort of sniffing/scripting is done..

Suzy

[Sarah Atkinson]

what if you had multiple font tags?

such as

font:22px "font 1";
font: 18px "font 2";

I have 60 charicters and I want the line to be 500px wide.

I wander if i should just loose the stylesheet and uses tables with images.

[bedlam]

what if you had multiple font tags?

such as

font:22px "font 1";
font: 18px "font 2";

Nope. Here's a simple rule for css: for items of equal specificity, the last property wins. Your example code just causes all fonts to display at 18 px in 'font 2'.

I have 60 charicters and I want the line to be 500px wide.

Sorry, but given the available typographic tools in html/css, to pursue this kind of 'pixel-perfection', is probably to doom yourself to a world of pain and frustration. Just for example, what happens when visitors have none of the fonts you specify on their system? The best solution for a problem of this type is probably to change the design so that it's more forgiving at different font sizes.

I wander if i should just loose the stylesheet and uses tables with images.

Only if you don't care if a) users with less than perfect vision, b) search engine spiders and c) users browsing your site on small-screen devices cannot read/index your content...

-B

[Tomness]

Silly me, I thought it was. I'll go remove that from my coding. It is what I was lead to understand.

I apologise.

[Sarah Atkinson]

I wander if i should just loose the stylesheet and uses tables with images.

Only if you don't care if a) users with less than perfect vision, b) search engine spiders and c) users browsing your site on small-screen devices cannot read/index your content...

what aboult doing the menu in flash? It is just a menu and not the whole page.

btw the rest of the page is normal. I'm just having trouble with the menu.

[bedlam]

I have 60 charicters and I want the line to be 500px wide.

what aboult doing the menu in flash? It is just a menu and not the whole page.

You have a 500px wide menu?

In any case, you may want to explore the various image replacement techniques [google.com], some of which use flash [google.com].

Very briefly and generally, image replacement techniques visually replace textual elements such as headers or menu items without removing the marked up text. In other words, it's possible to enjoy the design benefits of using images while retaining the accessibility/seo benefits of using text.*

-B

*Though you should be sure to read up on the pros and cons of each method...

[choster]

A compromise is to use ems instead of pixels; one em is the default line height in a given typeface at any font size (technically, dates back to print typography where it represented the width of the letter M). One em in a "taller" or "wider" typeface is larger than in a "shorter" or "narrower" typeface and everything remains in proportion.

For that matter, if you can rely on proportions for line-height, you can save yourself another set of units.

font: 1.2em/1.4 "Futura Book", Helvetica, Arial, sans-serif;