[milf]

I normally use 'pt' or 'px' with my font-size attribute, but I've been reading about others, such as 'small' and 'x-small'. I just put together a site where the stylesheet has the font set to 9pt. On Chimera and (now) Safari the text is small, but still legible. IE on a Windows machine, however, displays huge text, almost as if it is ignoring the stylesheet attribute definitions. Which should I use to insure that the text size is consistent on various browsers. The large text is throwing off my design.

[Millennium]

This problem results from a bug in IE/Windows.

The standard defines a set of keywords, from xx-small and x-small up through x-large and xx-large. According to this standard, "medium" is supposed to be normal-sized (whatever the default you have set for the page happens to be).

The problem is, IE/Windows, for some insipid reason, considers "small" to be normal-sized, and so "medium" will actually make the text larger (it shouldn't change the size at all) and "small" won't change size (when it should make text smaller).

IE6 fixes this bug, if you include a proper DOCTYPE in yor HTML (the whole "DOCTYPE switching" bit). For IE5/Win and below, however, you're going to have to use a hack to hide the "real" keywords, and instead give it keywords for one size smaller than the "real" one.

[milf]

For IE5/Win and below, however, you're going to have to use a hack to hide the "real" keywords, and instead give it keywords for one size smaller than the "real" one.

How would I go about doing this? Would it be better to leave out the Doctype tag? Thanks.

[ism]

There is no real way of ensuring your text size is consistent on all browsers and systems, there are too many variables to play with: browser, OS, screen resolution.

I would suggest investigating the use of em's as a unit and adapting you design to be more fluid so that the user can set the font size of the page as they desire.

However since this is rarely the answer people want to hear, there should be some good practical advice to be obtained at css-discuss.org try searching the public archives, I know this has come up before:

See this thread

Have fun!

[Simon Mundy]

OK, I just KNOW that I'll get flamed for this, but I always use 'px' as a measurement for type/distances where possible. This keeps things as close to consistent as possible.

One school of thought argues that this is a hindrance to legibility, especially for those with larger screen sizes.

My point of view is that graphics/widgets and anything else on the browser page is rendered at 72dpi, and your text should remain at a size complementary to those elements. If you allow proportionally bigger text, you end up with huge text and small graphics which is pretty ugly. Yep, the internet is there to distribute information, but design principles still apply.

There we go. Had my rant now. Now for that first cup of tea of the morning...

[ism]

Originally posted by Simon Mundy:
OK, I just KNOW that I'll get flamed for this, but I always use 'px' as a measurement for type/distances where possible. This keeps things as close to consistent as possible.

I won't flame. There isn't a right and wrong answer to all of this and everyone can approach design with a different philosophy.

I would say that if text is being used with graphics then yes it makes sense to use px, etc. For instance a div for a navigation menu that uses a background image. You hardly want the text growing out of it's background. And if people really want to resize your text they can always use mozilla, etc that can resize fixed units anyway.

Maybe eventually with SVG, etc we'll be able to scale the graphics as well.

Originally posted by Simon Mundy:
Now for that first cup of tea of the morning...

Time for bed...

[Millennium]

There are several cheesy hacks you can use to make sure IE/Win gets the proper stylesheet, but to be honest, I'm not sure it's all that worth it. I'd suggest -at least for now- eschewing the size keywords altogether, and size using ems instead. You can also use percentages, but this doesn't work as consistently across browsers. Here's a quick list of equivalents:

xx-small - 0.4em - 40%
x-small - 0.6em - 60%
small - 0.8em - 80%
medium - 1em - 100%
large - 1.2em - 120%
x-large - 1.4em - 140%
xx-large - 1.6em - 160%

NOTE: The standards actually say that the difference between adjacent keywords should be 50%, rather than the 20% I use here. But this leads to some rather ridiculous proportions, so much so that even Gecko ignores this and uses the 20% measurement instead. However, Netscape 4 uses the 50% measurement (it's the only browser that does), so the use of ems will keep things more consistent there too.

Now, to set the exact size for "medium" (and thus all the others), if you really want to do so, just set the font size on the html tag to whatever you want. Just remember: the font size for a given block, when measured in em's, is calculated relative to whatever block contains it; this is also true for the size keyword.

[derbs]

Originally posted by Simon Mundy:
OK, I just KNOW that I'll get flamed for this, but I always use 'px' as a measurement for type/distances where possible. This keeps things as close to consistent as possible.

One school of thought argues that this is a hindrance to legibility, especially for those with larger screen sizes.

My point of view is that graphics/widgets and anything else on the browser page is rendered at 72dpi, and your text should remain at a size complementary to those elements. If you allow proportionally bigger text, you end up with huge text and small graphics which is pretty ugly. Yep, the internet is there to distribute information, but design principles still apply.

There we go. Had my rant now. Now for that first cup of tea of the morning...

I'm with you there Simon. px measurements are the only reliable way of ensuring text is the same size on all platforms. Guess we're just control freaks huh?

Plus i have a real thing about big text. 11px Tahoma or Verdana is my personal choice.

The only downside with using px is IE on windows doesn't have a 'text zoom' facility, so visually impaired can't resize the text. The solution - tell 'em to get a Mac

[Millennium]

Originally posted by derbs:
I'm with you there Simon. px measurements are the only reliable way of ensuring text is the same size on all platforms. Guess we're just control freaks huh?

Yes, and you're missing the entire point of the Web. If you want immutable works that look the same to everyone, get a piece of paper. If you want information over which the user has a limited ability to affect their experience, that's what the Web is for.

And oh yeah; pixel measurements are not consistent either. Sad, but true; take a look in Opera/Mac and their braindead inconsistent handling of pixel measurements, and you'll see what I mean.

[Simon Mundy]

Originally posted by Millennium:
Yes, and you're missing the entire point of the Web. If you want immutable works that look the same to everyone, get a piece of paper. If you want information over which the user has a limited ability to affect their experience, that's what the Web is for.

What the web is for is what not that much different than what paper is for. Communication and interaction.

Don't even try and tell me that a (mainly) visual medium doesn't deserve a concerted effort to keep information well flagged/scaled/treated in order to make the presentation of that information as usable and attractive as possible.

I appreciate that web fonts don't look the same to everyone. That's why we have style sheets. I appreciate that everyone doesn't use javascript or flash. I appreciate that people like to customise their browsers, or use command lines or use a mobile phone to get their info fix. That's why we degrade information gracefully in order that they may still get what they need.

But to tell me that it's missing the entire point of the web is a load of bollocks. If it looks like a visual mess, it's harder for a user to process information. If the basic design principles of scale, tone, grids and typographic standards are misapplied, then you actually create barriers between users and content.

I know I was going to get flamed, but there is a good reason why I do what I do. It's real-life design. Sure some person may prefer having all fonts scalable to 24px on their 2048 x 1560 screen and blowing out the grids and tables. I respect their right to it. But to tell me it's bad web design to try and enforce rigid stylesheets to an audience who EXPECT to be able to read and interpret information in a similar way to print design is, perhaps, taking a much more retentive point of view that myself.

Discuss.

[Edit: And I'm just as annoyed as anyone that browsers render 'px' inconsistently, but just as open to the idea that choice is a good thing. Even if it means adding extra hours to my production fee to get things right!]

[derbs]

Originally posted by Millennium:
Yes, and you're missing the entire point of the Web. If you want immutable works that look the same to everyone, get a piece of paper. If you want information over which the user has a limited ability to affect their experience, that's what the Web is for.

And oh yeah; pixel measurements are not consistent either. Sad, but true; take a look in Opera/Mac and their braindead inconsistent handling of pixel measurements, and you'll see what I mean.

Pixel measurements are consistent on all browsers that people actually use...

When i create a site, i want the text to look like the way I designed it. If people want to increase the size to some ridiculous size, then that's what the 'Text Zoom' feature is for, which was invented by IE5 on the Mac, and has been copied by Mozilla and now Safari.

Your argument Millenium, is that the actual content of the internet is more important than how it looks. A good many designers would disagree with you

The majority of users on the internet are utter novices, the 'AOL users' if you like. They don't tune their local stylesheets, they don't even know they can. So if i specify a 'normal' relative size, it comes out at frikkin' 16points!

There's no way i'm allowing type that large. If people want to increase the font size, they can use text zoom. If they can't use text zoom, they should get a better browser. I also always use 11px Tahoma (or Verdana), which incidentally is the standard Windows system font, so if people can't read that it's unlikely they'll be doing much surfing anyway.