CSS and Fonts

[dm2000t]

I'm very new to CSS, so be warned. I'm working on Font sizes and have a couple questions. I've always done it with fixed pixels, and got what I was after.

Now trying to switch to CSS, and I keep reading about variable (ems,exs,%) but when I try them they are all over the board, and no where near what I was looking for.

I have no idea how to get my site to be close to a 12pix site using EMS values.

Whats it basing the font on? or do I set that and where?

(I guess this question would apply to exs & % as well)

[Easywebdev]

Use ems, this allows text to be resized if the user desires to do so.


ie.
body {
font-family: Arial,Verdana,sans-serif;
font-size: 0.8em;
line-height: 1.4em;
}
h1 {
font-size: 1.6em;
line-height: 1.8em;
}
h2 {
font-size: 1.4em;
line-height: 1.6em;
}

etc.

I find 0.8em is pretty close to 12px.

[ran_dizolph]

I don't quite follow the 'em' thing either...it looks great 'on paper', but doesn't seem to work how i need it to.

0.8em is comparable to 12px in FF, but it's huge in IE.

If anyone has any decent literature on this, i'd be interested in learning more.

[iwebgeek]

I'd stick to pixel units.

[Easywebdev]

Originally Posted by iwebgeek

I'd stick to pixel units.

From someone who states they are a "Web Standards & Accessibility Advocate" that is a misleading statement.

Pixel units (at present) are NOT accesible. The user has no control over font size in the most widely used browser - Internet Explorer.

For anyone struggling with font sizes have a read of this

[iwebgeek]

Yes, however Internet Explorer's font adjustment tool is hard to find so it's just easier to use pixels for fonts and use a style switching javascript so users can click on a web button to change font sizes.

[bj]

According to best use practices of the css-discuss group, which includes such distinguished members as Eric Meyer, Holly and Big John of Position is Everything and a number of W3 and WAI members, and to avoid the MANY font sizing browser bugs, especially in IE, you start on the body with font-size: 100.01%; and then adjust by either ems, percentages or descriptives on the internal elements. Using pixels is against best practices, and will not allow your sight challenged viewers to resize the text in their browser. For more information check the section on font sizing in the Css Discuss Wiki.

[jnoneiliv1]

Let me throw a little support DMiller and WebGeek's way.

To a point, the standards and accessibility guru's are very helpful, but after spending nearly a day on the position is everything website trying to understand some layout problems I have (probably my crap code), I think using fixed pixels isn't necessarily as gross a workaround to browser incompatibilities as many of the other "recommended" hacks. (by the way, bj's website has a fantastic, I mean kickass list of resources at http://kickasswebdesign.com/webgeekdir/CSS/, the best list I've seen yet.)

Let's get a little real for some of us beginner's. Sometimes we need something that just works.

Show me some consensus on ems, %, etc. that will ALSO be robust in lists, indented lists, lists with bullets, backgrounds, etc. accross several browsers (IE) and I'll give it try.

Fixed pixels does compromise accessibility, but it can be mitigated with a larger point size, whitespace, etc. When you know your text will render reliably, it's less tempting to shrink to fit your layout. The device side of the picture is not so clear either. Heck, try displaying in 800x600 on a 24" monitor versus 1024 on my puny screen, there are other ways to skin this cat.

With box layout problems, quirks mode, prodigious guru recommendations for hacks etc. I think fixed pixels is a minor deviation from the righteous path, and is definitely a low risk, standards compliant, quick fix for us neophytes. (You pro's are on you're own against the charge of the bifocals.

IMHO. Can you tell I'm a little bitter about IE standards support?

[bj]

We're ALL more than a little bitter about IE's lack of standards support!

A guy on the CSS-Discuss list passed on a trick to deal with lists and nested lists. If you define font size on the body as 100.01% and in a descriptive on the parent element of the main list, for instance "small", the inheritance problems that happen with ems or percentages don't happen. IE will get it right along with all the other browsers. So if your nested lists are in your sidebar then define the font size as "small" on your sidebar and breathe easy.

[bj]

Oh, and I forgot--

jnoneiliv1, thanks for the plug!

[ADAM Web Design]

Okay, now that we've all gotten sidetracked, I think someone should answer the question that dm2000t originally posed.

And the answer is: there is none. Not a conclusive one, anyway. Since the font size is relative, this will depend on how the user has their font size set up in the browser of their choice. The best thing I can suggest is to use either ems or percentages (I prefer percentages because they're much more precise) and size it in such a way to give it the appearance that you want if the user leaves their browser at the default.

For 12px, I usually find the default is between 71-80%, depending on the font.

And for those who think it's hard to find in a browser menu, it probably is. But there's a very easy way to resize text without even using the menu, if you have a mouse with a scroll wheel on it (e.g. the Logitech optical mouse.) Hold the <CTRL> key of your keyboard down and scroll the wheel of your mouse up and down.

You probably won't see the effect on WPW, but if you go to BJ's site (or for that matter, my own), you'll see the effect.

I don't know if anyone's ever documented this...I figured it out by accident when I sat my elbow down on the key while using my mouse to read something. But I suspect someone probably has since I've known about it for close to 3 years now.

As far as IE's "lack of standards support", I'm not bitter about it, since the issues go all ways across all browsers (and because IE has developed some rather obscure but cool filters that none of the rest have yet, such as the Gradient filter). It just doesn't get documented quite as thoroughly. But I'm not saying this to start a debate. I'm just saying that an opinion expressed does not reflect those of the participants.

[ADAM Web Design]

By the way, BJ, you've got some blog spam.

http://kickasswebdesign.com/wordpres...-for-download/

[Paul B]

Originally Posted by ADAM Web Design

<snip>And for those who think it's hard to find in a browser menu, it probably is. But there's a very easy way to resize text without even using the menu, if you have a mouse with a scroll wheel on it (e.g. the Logitech optical mouse.) Hold the <CTRL> key of your keyboard down and scroll the wheel of your mouse up and down.
<snip>

Only problem is how many users actually know this? I have had two panicked clients phone up on different occasions to scream that their site has been hacked and all the text is so small it can't be read. Both had inadvertently used ctrl + scroll wheel. After that I stick to px.

[ADAM Web Design]

Paul B: I used to do that too, but then I found that some of my "know just enough to be real, REAL dangerous" clients started using FF because they read some Globe and Mail article and that trick went out the window. So I just tell them to do the <CTRL> + scroll wheel down and away we go.

[jnoneiliv1]

Adam, you're right on, we've gone off topic, but it is so hard not to editorialize.

So, back to "Whats it basing the font on? or do I set that and where?"

Wikipedia provided this link back to W3C.

http://www.w3.org/WAI/GL/css2em.htm

Which contains this tidbit,

"When used to specify font sizes, the em unit refers to the font size of the parent element. So, in the example above, the font size of the h1 element is set to be two times the font size of the body element. In order to find what the font size of the h1 element will be, we need to know the font size of body . Since this isn't specified in the the style sheet, the browser will have to find it from somewhere else - a good place to look is in the user's preferences. So, if the user has set the normal font size to be 10 points, the size of the h1 element will be 20 points. This will make document headlines stand out relative to the the surrounding text. Therefore: always use ems to set font sizes."

OK, so can we verify where this user preference setting exists?
How would dm2000 achieve 12pt size in the body for the default browser settings?
Can these questions be answered with cross browser compatibility or tips for multiple browsers?

Now THAT would be on topic and well above MY head.

But, now I'm already distracted wanting to try the % methods recommended herein.

Maybe there's some consensus that % is easier to use and achieve the accessibility goals?