Relative Font Units

What are the options?

[Nick_W]

Okay, I know of

• <font>
  
• Em's
  
• %'s
  

Are there more?

Nick

[BlobFisk]

Ex.

One ex is the x-height of a font, the x-height is usually about half the font-size...

X-height. A scaling factor relative to the height of the letter 'x' for a font (also known as the relationship of lowercase low-rise letters to high-rise characters.) If this type of unit is specified for the root element of a document, the scaling factor should be relative to the browser default value for the property.

Can't say that I've ever used it though...

[SmallTime]

For sake of completeness, you can use size keywords in css, and some have hacked it to be fairly consistent.
p {font-size: small;}

[Nick_W]

Thanks guys!

ex is a css unit right?

Nick

[BlobFisk]

ex is a css unit right?

Yep!

[tedster]

size keywords in css

The big problem there is inconsistences between browsers. Also, strictly speaking these are not relative, but absolute sizes.

The so-called scaling factor as you go up or down the list was recommended to be 1.5 in CSS-1 and then it was changed to 1.2 in CSS-2. I've also heard that some browsers use 1.3 as a scaling factor.

Browsers also assign the default size to a keyword in various unpredictable ways.

The default size is set by which keyword gives the same result as totally "unstyled" text. You might expect it to be "medium", but some versions of Explorer assign "small" to be the same as the default size. I'll bet there are other browsers that do the same.

So I leave this stuff alone.

[Nick_W]

Personally I only deal in em's. And just recently (to my shame) I've had to use px :(

But for relative font sizing: em's all the way....

Nick

[shelleycat]

>Browsers also assign the default size to a keyword in various unpredictable ways.

I just changed my main page from pixel sizes to keyword sizes last night and this was my main problem. I don't want to serve separate style sheets so I used a CSS snippet I grabbed from diveintomark.org's "30 days to a more accessible website" which seems to have addressed all the problems though. He uses a bunch of weird comments which block out certain broswers. I've tested it in all the browsers I have available (IE5.5, Mozilla 1.0 and Netscape 4.7) and it looks the same all of them. I don't know if this is the best way to go about things, but I don't really have time for researching more stuff right now (and I'm still learning CSS) and I knew where to find instructions for this method without looking.

[tedster]

Here's a similar font size hack from ALA [alistapart.com].

It's not actually the comments that do the trick, it's the clever use of voice-family: rules -- the same approach as Celik's box model hack.

I just can't deal with that insanity.