Forum Moderators: open
I'm asking because I've started to be more careful about writing W3C-compliant code as well as learning that Firefox is a stickler for it. Also, my site's fonts and font sizes appear much differently in Firefox than in IE.
Should I set font-size in "px" or "%" or something else?
If you want a fixed font size, my personal choice is to use px to define it.
If you want users to control the size of your text (even according to their browser default) my personal choice is to set the font size in body to 100% and then use ems to set the font size within the document.
But one thing to remember about the web is this - it is designed to allow great flexibility for the user agent and you cannot control appearances the way you do in print. However, all the choices are quite valid according the W3C. Now if you are talking about accesibility complaice rather than validation - well, that's a whole new country.
If you set the body font size to, say, 12px, no text on the page would be resizable in IE. If you set the body font size to a percent, but size your <p>aragraphs, for example, to 12px, the paragraphs will not be resizable in IE.
Other browsers do not have this problem and will resize text no matter how it is sized, but given IE's prevalence, it remains an important decision.
I routinely do as Tedster mentioned and set the base font (in the body tag) to a percent and then size in EMs throughout the document. Both are relative units that will allow the user to resize text in ALL browsers.
cEM
There's a great article on this topic at "A List Apart" called "Elastic Design", but I can't seem to drop the link into this post. I thought SOME links where ok according to TOS. Whatever.
It's certainly respectful to create pages with font sizes that can be adjusted by readers but...what about my design? Won't my page designs break up and look unprofessional if readers start adjusting font sizes as they please? Or should I give readers the opportunity to adjust font sizes and just feel confident that my pages will look terrific if readers view them at the font sizes I've intended?
what about my design? Won't my page designs break up and look unprofessional if readers start adjusting font sizes as they please?
There WILL be variations, and some breakage is bound to occur when extreme resizing happens, but extreme resizing is rare, and I believe it's a fair trade off for providing users with the option to see the page in a way that they need to see it.
Consider this: A user comes to your site. Thier eyesight is bad, and upon landing on your page, the first thing they notice is that your font is too small for them to read. Immediately, they use thier browser resize option, but because it's an IE browser and you've sized in PX in order to maintain control of your layout, the text won't resize. You MIGHT think this visitor is now faced with a choice - view the site as you intended, or leave - but in reality they don't have a choice at all. They can't read, or comfortably read, your site. Leaving is the only option. So you lose a user.
Now consider ALL of your other, non-sight challenged users who visit, find your font size just dandy, and don't ever touch the resize option in their browser. Have they benefited at all from preventing them from resizing? No. It's a non-issue for them, but a HUGE issue for people with sight problems.
I think this is a key point worth repeating: Users that don't need to resize your text don't care one way or the other; they gain nothing from the presence of resizability, but they also gain nothing from it's absence. And since they're not resizing text, your layout comes through as intended for most users. Users who do need the resizability, however, do care. A great deal.
And believe me, there are many of them out there. And they're not all elderly, either. I'm a 30 year old man in decent health. I wear glasses, but they're not coke-bottles. I have a high quality 15inch flat panel monitor running at 1024 x 768. Still, I use the resizer often. Why? Because sometimes your head hurts or your eyes are feeling strained and it's just EASIER to resize the text if it's bigger. At the point where I decide to do this, I (a) understand it may break the page's layout and (b) couldn't care less. By then I'm committed to reading the CONTENT. Whether a nav-item wraps to a new line and ruins a nifty button effect is irrelevant.
Bottom-line: using relative units for font size costs you nothing and adds what I see as an integral peice of usability for all users that need it.
Some tricks that will make your layout resizable font friendly:
1) In most cases, the only time font resizing negatively affects a layout is when the layout depends heavily on explicit heights. For instance, if you've set up four divs that form the corners of a centered square on the screen, resizing the text MIGHT break up the square as one div may become larger than others. So tip number one is avoid layouts that are explicit-height dependent. IMO, these sorts of layouts defy one of the primary benefits of online publishing, anyway: a flexible layout that handles any amount of text by simply making the content area longer. Limit your widths, but try to let your heights be content defined.
2) In certain specific cases, having text wrap and extend an elements height really can be unsightly. The prominent example is a horizontal navigation bar. If you have a link that says "About Us" and the text is resized too large, it will wrap "Us" to a new line. If your nav bar uses background images to create a button effect, it will be lost.
To help alleviate this, size the nav bar elements in EMs, too. This way the width of the navbar element will scale up as the font scales up. It won't be in perfect step, mind you, but it works good enough to maintain your nav bar through several size increases. Certainly enough for most users who need the resize. Bear in mind that people don't get carried away with reszing unless they're just goofing off. One or two steps is enough for just about anyone to be able to read your text.
cEM
I agree with everything you've stated here. Thank you so much for your very generous answer.
(I've never encountered a forum with such knowledgeable and giving participants. I've learned a lot. Thank you all.)
