View Full Version : text in pixel sizes...opinions?

dreamweaver beginner
09-27-2009, 02:55 AM

I see that there is a way to specify the text size in CSS using pixel numbers. Anybody have an opinion on this?

It seems like it could be a good way to guarantee a consistent user experience. But since fonts are created in stepped sizes, using an in-between pixel size could create some subtle aliasing blurring.

There's also a 100% function, 90% function, etc. too. I'm wondering what the standard way is for a corporate website to control font sizing. I know for page organizing, "frames" are completely lame and out of style. Even tables with an invisible border is fading out of style. The real way to organize a modern web page is with CSS divs. That's what the consensus is that I've seen.

I'm wondering if there is a similar consensus for font size management on a page. I'm almost guessing that straight CSS with the percentage function is the popular way, but maybe it's pixels.

09-27-2009, 05:22 AM
The default text size in browsers is 16px.
100% = 16px
1em = 16px

The use of a fixed (px) size is absolute. This is ok if you need to have a fixed size for a particular reason. Not so good if you want to have better control of page display consistency across multiple browsers.

Internet explorer has issues when it comes to a user that needs to resize the text when using an absolute font size, typically it won't change.

The use of %'s only or em's only.
This is a better way to go but IE still has a problem getting the text to size uniformly or properly.

The best way, more designers are starting to set their font size this way is to use a combination of both % and em.

With CSS you can set your choice of default font size using %'s based on the browser default of 16px.

Example setting the page to be defaulted to 80% of the browser default(approx 12px)
The CSS;
body {font-size:80%;}
You would then set the actual page display font size's with em's;
The CSS example
p {font-size:.9em;}
h1 {font-size:1.4em;}
h2 {font-size:1.2em;}
h3 {font-size:1em}
You now have consistent display and consistent resizing availability across browsers, and yes, even IE :mrgreen:

On a side note you would want to use pt (points) if you are going to have a print stylesheet.

09-28-2009, 12:02 AM
The reason for using % in the body style declaration is a bug in IE that resizes type incorrectly if an em value is used in the body style. Otherwise all ems would work.

dreamweaver beginner
09-28-2009, 12:39 AM
thanks everyone,

so it seems that the normal practice for professionals is to use % and em's rather than declaring fixed pixel sizes. so i'll avoid fixed pixels unless there is some compelling reason to use it.

em's seem more and more interesting the more i read about them. so i'll have to make that one of my skillsets.


09-28-2009, 12:47 AM
The nice thing about using % and ems is that you can resize text throughout your site by simply changing the % value in the body style.

I still use pixels for most widths so I know exactly how things will fit but that's about it.