I am currently working on a complete redesign of my site.
I want to make it more accessible. I want to make it look great no matter what platform or browser it is on, or how good the viewer's eyesight is.
So I started to use relative font sizes. MSIE lets the user select from 5 different font tables, of varying sizes. NS lets the user scale the font table continually, by steps of about 1pt.
The sitepoint.com site uses an assortment of both absolute and relative font sizes. Try resizing the article text, and it won't budge. The text in some of the left navigation bar changes size though.
Relative font sizes allow lots of flexibility. They allow users to scale the font table up and down in MSIE or NS.
So I set about creating relative font sizes. I have a bit of a preview in IE5.5, then switched to NN4.7 and I was shocked at my discovery. While the fonts were all relative to each other, they were all 2 steps smaller than in IE.
I could have easily made the fonts bigger at the time with CTRL-], but I wanted the default fonts to be a certain size, and they weren't.
So I went back and created a font-size: 12pt in the BODY tag. Then I made all the font sizes relative to that.
I found that increasing/decreasing the font table in IE allowed the fonts to change size even though they were all relative to an absolute 12pt size.
However, the subtle differences in behaviour between my three browsers indicated to me that making a website accessible and making it look good were mutually exclusive.
I will have to hack it, and experiment, until I find a happy medium.
What are your experiences in all this? Do you set a "pt" size, do you use sizes from the font table "x-large, medium, etc" or what? Does it look the same on all browsers?
PS I realise that this would fit into the stylesheets forum, but I really want to look at it from a design perspective.
Here's the new design I am working on. It is unfinished.
My current design can be found in my sig.
Well, I dont like to let users resize the font, I hope that it is not too small but if they did it would spoil the design, especially on the navigation to the point it would stretch the tables. However I did have one experience worth mentioning.
I was using pixel sizes. something like font-size:9px and it looked fine on IE (verdana font) just how I wanted it, however when I opened it in netscape the font was so small it was unreadable, it just looked stupid. So I changed to font-size:8pt and it appeared pretty much the same on IE as it had with 9px (I think that was the size) however it also looked okay on netscape.
So there you are, strangeness indeed.
Try using ems instead of x-large etc. This is also relative sizing, I am sure I saw a thread here just the other day, I'll see if I can find it.
The way I look at it is this. If the users resize the text on your page and the design breaks, then the design was bad to begin with. Keep in mind that I have not seen your site. That's just a good principal to follow.
I personally HATE (and I mean HATE) when sites don't let me resize the text. I won't go into that now as that is somewhat beside the point. What I am trying to say is design the site so that if they do resize it then no big deal. It might not look as good as you envision it, but I can guarantee you. It will NEVER look like you envision it on EVERY monitor out there.
I think I agree with Creole here. The site should be flexible enough so that it looks fine no matter what fonts or browser the user chooses.
On my current site, everything is fixed. If anyone tries to resize anything, nothing changes. Some of the tables might stretch a bit and break up...
I am working on a much more straightforward design.
On the new design, I am currently using % values rather than em units but I'd be interested to hear more, sowen, about this.
I fully realise that netscape 4.x is buggy when it comes to CSS, but one thing really annoys me. When you set a percentage value for an H1 element, or similar, it bases the relative size not on the default font size but on what the H1 would have been if you hadn't set it. I'll figure out a happy medium eventually though...
There are a couple of good snippets about the use of ems here http://www.hpaa.com/css1/ I am still looking for that thread I mentioned - I'd lose my head if it wasn't securely stapled on.