Hi,

Can anyone explain why the "base-weblog.css" file defines the body font-size as 12px (pixels)? Is this a mistake? Was it supposed to be "pt" instead of "px"?

"px" is used for measuring in pxels which will vary widely depending upon screen size and monitor resolution. People should NEVER use "px" as a font size unless they are trying to make text to fit captions for pictures.

This is terrible for people using high-resolution monitors. Assuming a monitor screen that is 10 inches high, a 12px font will vary widely depending upon the resolution used:

640 x 480 screens show 12px as 18pt (0.25 inch high)
800 x 600 screens show 12px as 14pt (0.20 inch high)
1024 x 768 screens show 12px as 10pt (0.15 inch high)

I happen to run my monitor at 1600x1200. At that size, 12px characters are only 0.1 inch high, equivalent to about 7pt text. That, combined wtih my middle-age need to get bifocals, means that it's almost impossible to read any of the default styles.

(Note, 1 point is 1/72 of an inch. If a monitor is properly adjusted, a point size should remain the same size in inches on the screen no matter wht the resolution, unlike PX which varies widely)

Another bad side-effect of this is that people with low vision problems cannot adjust their browser font sizes to make the blog text larger or smaller. They're stuck with that eeny-tiny font.

I want to fix this on our site. Either by chaniging the "12px" to a fixed size that will stay the same on all monitors and not shrink, like "12pt", OR to a relative font size like "smaller" that is relative to the current font size set in the browser. However, I have a couple qeustions before I do this:

1) Is there a good reason why Six Apart chose "12px" as the body font default?
2) Will I break some layouts if I change this to "12pt" or "small"?
3) What about if I use the "stylecatcher" pluin? Are there default stylecatcher styles that rely on this 12px setting?

Thanks,
- Kevin Lowey, University of Saskatchewan

P.S. I read this after I originally typed it and saw that there were a lot of typos in it. I was going to go back and fix them, but they prove my point. I was having such difficulty reading the text I was typing I couldn't even proof the message properly.

Ah, but .....

using pixels means that text will be the same same on different platforms (Mac, windows,linux)

However, you can't resize pixels in Windows IE

What are you trying to get to - same size text no matter the platform or screen resolution? Or are you trying to enable a resizing feature in IE?

If the former, give up now!
If the latter, go for ems or xx-large,x-large ...etc.

There is no perfect answer. If you feel like getting well into this, check out Fahrner's method in A List Apart

It may be the same in different platforms, but it won't be the same at different screen resolutions. As the resolutions get bigger, the text size gets smaller until it is unreadable. Try it yourelf. Set your screen resolution lower to what you have now and you'll see that the text gets larger on the screen.

Here's some HTML code to demonstrate the problem:



Create a page with this, and then try looking at it on different browsers, changing screen resolutions, etc. You'll see that the "pt" doesn't change size, the "px" will change size with screen resolutions, and the "small" and "medium" will adjust themselves according to the initial font size defined in your browser.

If the goal is to have the text line up perfectly with pictures (which are measured in pixels) or layouts that are measured in pixels (a bad idea too, they should be layed out in inches), then you need to use "px". However, that should be done very rarely.

If the goal is to have the text look as close as possible to the same size in all browsers and all resolutions, then you should use "points" or "inches" or "centimeters", not "pixels".

If the goal is to let users scale the font size by changing their starting browser font size, then "medium" or "small" etc. works fine. I know there are some problems with MSIE using "small" as the default font, instead of the more correct "medium". But worst that will happen is they will see the text slightly smaller, which is still better than the absolute tiny 12px text. The site you listed provided a way to get around this problem.

My question is why did SixApart decide to go with "px" as the default? I'm the site administrator for Movable Type on our system. I want to change the default setting to "small" for the body font so that everyone's site will allow scalable text. I want to know if anyone can tell me a good reason why NOT to do that. I realize it will affect all the existing blogs on the system, but I think the benefit of having blogs that are actually readable is worth it.

- Kevin Lowey

There shouldn't be any issues with you switching to resizeable fonts.

But given the requirement " to have the text line up perfectly with pictures" resizable fonts WILL be a problem. Allow your user to resize a "sensible" size font and say goodbye to your carefully planned layout. But I guess that's less of a problem then users screaming they can't read their pages.

There is no perfect answer to this - either you force the text to have the size you wish and accept there will be some platforms/browsers where you will still fail, or you hand over some control of the layout to your users, and with resizable fonts that's what you're doing...

As well as the List Apart article above, you could also read Zeldman on the topic in "Designing with Web Standards" which is definitely worth the 35USD/27GBP price or even the price of a beer to borrow it from someone.

Why did SixApart choose pixels? I guess its because for a given resolution of screen, pixels work "correctly" in nearly every browser / OS combination. The problem arises when a) you have really large resolutions as Kevin correctly points out, and/or b) your browser prevents you from resizing the font (take a bow IE!)

Enter the designer who now has to make a call between perfect design and browser limitations. So what's new?!!

Best of luck
Nick

I could see SixApart using "px" IF their default layouts relied on a lot of graphics and proper placement of stuff around the graphics, but that's not the case. Their layouts, aside from the Creative Commons graphic, is all text based.

I do notice that they use "px" to define the overall page layout. Personally I would have used inches, so that the layout would always be the same size on al monitors and wouldn't keep shrinking as the resolution got bigger.

They may want to exercise more control over the text in the menus so they don't wrap funny, but you could specify "px" just for the menu text, not for the entire body text.

I know how to fix all this stuff, it's relatively trivial. My worry is that if I do too much mucking about with the default stylesheets provided by MT on a system-wide level, then I'm going to break the stylecatcher styles. I'll also have to remember to fix these defaults every time I upgrade the system (and it replaces those .css files).

Just wish SixApart had got it right in the first place. Oh well.

- Kevin Lowey