setting fonts with pixels

[tictike]

I was hoping someone could share some experience with setting font in pixels. Is it true IE does not support font resizing (with ctrl +/-)?

Also, if a layout doesn't "break" when resizing with em specified font sizes, would it also not break with pixel font sizes?

[Paul O'B]

Hi,

IE7 and under don't allow the text to be resized from the browsers controls when the font is specified in pixels (although IE7 does have a zoom facility).

Most other browsers will allow the text to be resized whatever the unit.

A layout will break if an element has a fixed height and width in pixels and contains text content. If the text is resized then it grows bigger than the container and then overflows. If the element didn't have a height (e.g. it's height was dictated by content) then the layout would grow vertically with the resize although it would look different.

If you size the element in ems and the font in ems then the layout grows proportionately with the text resize and looks much the same but just bigger.

Here is a very old example showing the differences.

http://www.pmob.co.uk/temp/emdemo.htm

Sizing the font in pixels is bad for accessibility because there are still many IE6 users around and they need to be able to change their text size to suit.

[rbutler]

Yeah, IE doesn't support font resizing in pixels even though they're technically a relative unit of measurement. I tend to disagree, that any layout will eventually break with font sizes in em's, however, a properly designed site using em's won't break until a really huge font size.

/*EDIT -- dang it, Paul beat me. Paul's explanation is a bit better anyway and what I was attempting to get at*/

[c.t.c.]

As the others said, IE6 is the real stumbling block when it comes to sizing text in pixels. The latest versions of IE, Firefox, and Opera all favor a page zoom over text resizing in their user interfaces. As more user agents move toward a full page zoom, we will need to re-evaluate how we size text on the web. However, I'm addressing only desktop browsers. I don't have experience resizing text/pages on mobile devices and other user agents.

[tictike]

If the latest browsers are moving towards page zoom.. what is page zoom's advantage over text resizing?

[Rayzur]

what is page zoom's advantage over text resizing?

Think of zoom as a magnifying glass, it is going to enlarge a div along with the text in it.

Say for example you have a 2 column site with fixed width navigation sidebar of 150px, if you have a long word and the text size is increased 2-3 times it will spill out.

With zoom it is magnifying the sidebar and the text, a quick test of a fixed width site of 775px in Opera with zoom of 120% at my resolution of 1152 x 864 keeps it intact but fills my whole screen. A step up to 150% creates a horizontal scroll bar for me.

The advantage I see is that the site will not break.

[Tailslide]

The difficulty with zooming is that it depends how well the browser does it.

Opera and Firefox zooms seem to work fairly well. IE7 however.... I haven't bothered checking recently to see if it's fixed but, for instance, it won't zoom background images on the body element - which breaks layouts immediately.

[Rayzur]

it depends how well the browser does it

Same story as always, just a different subject. It's a viscous circle were in I guess.

As you said though, the good browsers seem to work fairly well. I wasn't aware of IE7's body image issue, I can see how it would break a layout that was dependent on that image though.