Font-size css issues
Well, I revamped my site and was delighted with myself. Until Tom R called me to let me know he had broken my site. By looking at it with a mac. I told him it looked fine on my monitor and he could look at it there if he wanted but he was adamant about being able to browse my site from the comfort of his own home so I had to take another look at my style sheets.
I had been using font-size keywords, and then I tried percentages and ems - none of which worked on their own.
I had a good ol' Google around the place and discovered that relative font sizing was indeed causing headaches all around.
Jeffrey Zeldman says in his faq
The problem is that ie doesn't allow people to set the font size to their preference if you use pixel font-sizes. Zeldman gets around this by having a script which allows people to use alternate style sheets. However I'm not crazy about this solution. People who are browsing with ie and have text set to large or largest aren't going to want to have to figure out how to change the setting on your site specifically. They may not even be aware they can. If they are used to browsing with large text and stumble upon your site with tiny text they can't read are they going to stay long enough to figure out they can increase the font size? Maybe - if they really want your content. But for a site like mine they'll probably take it or leave it in the first couple of milliseconds.
So I looked around and tried various methods, most of which worked for me (pc, firefox & ie6) but none of which worked for Tom R's mac. The problem was with making smaller text - it became so small it was illegible on Tom's mac (often in both firefox and ie).
Anyway the method I finally found that worked was this one at thenoodleincident.com
This guy had also been tearing his hair out with this problem and so he did a fairly in-depth study with screenshots to prove it and came up with this method. On his articles recommendation I set the font-size in the body to 76% and then used ems throughout the rest of the css. The small font is 1em and my main text is currently 1.2em. We'll see how that works.
If you are viewing this site and there are problems with the text size please leave a comment with platform/browser details. Many thanks!
Click to buy on Amazon. While I didn't use Zeldman's techniques for this issue I have a lot of respect for him and so am including a link to one of his books on Amazon. I've heard good things, I haven't read it and Christmas is coming up... ;)
I had been using font-size keywords, and then I tried percentages and ems - none of which worked on their own.
I had a good ol' Google around the place and discovered that relative font sizing was indeed causing headaches all around.
Jeffrey Zeldman says in his faq
...pixels are still the only means of CSS text sizing that works reliably across good and bad browsers, and across all platforms.
The problem is that ie doesn't allow people to set the font size to their preference if you use pixel font-sizes. Zeldman gets around this by having a script which allows people to use alternate style sheets. However I'm not crazy about this solution. People who are browsing with ie and have text set to large or largest aren't going to want to have to figure out how to change the setting on your site specifically. They may not even be aware they can. If they are used to browsing with large text and stumble upon your site with tiny text they can't read are they going to stay long enough to figure out they can increase the font size? Maybe - if they really want your content. But for a site like mine they'll probably take it or leave it in the first couple of milliseconds.
So I looked around and tried various methods, most of which worked for me (pc, firefox & ie6) but none of which worked for Tom R's mac. The problem was with making smaller text - it became so small it was illegible on Tom's mac (often in both firefox and ie).
Anyway the method I finally found that worked was this one at thenoodleincident.com
This guy had also been tearing his hair out with this problem and so he did a fairly in-depth study with screenshots to prove it and came up with this method. On his articles recommendation I set the font-size in the body to 76% and then used ems throughout the rest of the css. The small font is 1em and my main text is currently 1.2em. We'll see how that works.
If you are viewing this site and there are problems with the text size please leave a comment with platform/browser details. Many thanks!
Click to buy on Amazon. While I didn't use Zeldman's techniques for this issue I have a lot of respect for him and so am including a link to one of his books on Amazon. I've heard good things, I haven't read it and Christmas is coming up... ;)
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home