Forum Moderators: open
I've looked at the code on sites created by highly respected website designers and I see a lot of "font-size: 12px" and "font-size: 1.2em", etc. Have I been led astray by this need to keep to relative sizes? Life would be so much easier if I could just pick a hard size that would look like I want it to on ALL browsers.
I see a lot of "font-size: 12px" and "font-size: 1.2em", etc. Have I been led astray by this need to keep to relative sizes?
It sounds like you're misunderstanding what "em" is all about:
[style.cleverchimp.com...]
"em" is what you use if you want variable sized stuff.
check out [webmasterworld.com...] .... or a site search on "font size" without quotes brings up many related threads.
also, i am sure that there will be a way with PHP to sort the problem without making entirely new pages. Maybe if one css file was called for one browser and another .css for A.n.other browser you could "re-correct" the deviance in size between each brother.
I'm sure some programmer/CSS wizard has sorted this problem :) ......
We discussed this fairly thoroughly recently, but the screenshots are new (to me at least), and quite helpful at illustrating the problem.
I wonder how long it will be before IE and Mozilla emulate Opera's ZOOM feature? This one feature alone places Opera far in front of the others in accessibility.
I'm not as surprised in the case of M$IE, but Mozilla? c'mon!
Regarding IE font size - I'm quite sure that "medium" is the default installed size. I have a simple file server running Win98. I just ran IE for the first time on it and the font size is set to medium. It's also set to medium on my PC and my wife's PC (both XP) and neither of us have changed it.
Most builds of MSIE actually do a good job of implementing CSS -- much better than Netscape any day -- and the fact that a zoom function is unavailable has nothing to do with MS being sluggish, and everything to do with the fact that it's theoretically not needed -- much better to resize and reflow the text than zoom in and introduce horizontal scroll.
Relative sizes are nice because a visitor can crank up their default view size and still get a nice idea of what YOU think is important. Sure, it affects the way the text ends up being laid out on the page, but I know of no one who minds. I'm not going to do things to make sure that the layout is perfect for people who have the font size on their browser cranked up five notches, but I am going to make sure that it works if they do it.
G.
1. Is it not the case that a user of your site will have a standard text size that they can read, or will have had to get help to correct the problem BEFORE they see your site? Surely if they find text is too small in Browser A they will use Browser B in preference, or alter the defaults in Browser A?
2. Would I be right in assuming that the average surfer doesn't actually revisit a site in several browsers to compare how it looks?
if the answer to both is "yes" then there is no reason to use px to specify font sizes except on the rare occasions that small amounts of text have to be accurately aligned with an image
or am I completely wrong and are there several million poor souls out there totally unable to read anything on their computer until rescued by a web designer who knows what size they need to read text at
1. Is it not the case that a user of your site will have a standard text size that they can read, or will have had to get help to correct the problem BEFORE they see your site? Surely if they find text is too small in Browser A they will use Browser B in preference, or alter the defaults in Browser A?
Yep. The problem is that there are LOTS - and I mean LOTS - of sites that dictate a PX size. You wouldn't believe the clients I get for a revamp of a website where I go round and round with them for hours trying to convince them that a 12px font that they want for text on their site might look good on THEIR monitor and resolution, but that there are gazillions of folks who are going to have a problem with that.
I for one, have my screen rez cranked up as high as it will go because I tend to multi-task and like to have lots of room on the desktop to get at things. For this reason, I have my browser font sizes cranked up large so I don't have to change screen rez to look at a site. (Granted, if I'm doing layout, I go to defaults and change rez, but that's different than regular daily work).
G.
If you are catering for the Average-Surfers, you need to use whichever method gives you the most consistency over a wide range of platforms at relatively low resolutions. If you are catering for the Graphic-Designers, you need to concentrate on hi-res Macs. For Gamers, it's hi-res Windows.
That's a rule of thumb. Because each different method of specifying font sizes has its different strengths and weaknesses, you have no choice but to do it differently for each type of audience. Simply going through all your clients' sites and changing absolute to relative regardless may actually be making the site less accessible to a surprisingly large number of people.
Mr and Ms Average-Surfer, incidentally, tend not to use a different browser. They tend to use just one browser which is usually MSIE. If they have AOL, they will use the AOL browser and (believe it or not) be totally unaware of the existence of MSIE on their desktop -- even though the icon is there for all to see.
rather than trying to fight that for no particular reason, why not work with it and allow a site to work effectively with any settings?...if you do no more than the basic minimum a site will operate admirably in almost any circumstances, if somewhat blandly...so every single thing that stops a site resizing any aspect of its design has been added by the designer...mostly when there were perfectly good alternatives that wouldn't have made the layout "brittle"
if your site is fluid use relative fonts.
I've never had a problem reading pixel fonts and my monitor is set at 1280 x 1024 and I do not have 20/20 vision.
Instead of trying to tweak browser settings and monitor displays you should just invest in some glasses - sounds like you need them ;)
However, any comments on this one (papabaer?):
Just had a look at the new webstandards.org redesign. Very nice, btw. Looking at their stylesheets (/inc/css/wsp.css) shows this:
body, code, pre {
font-family: Georgia, serif;
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
What's going on here? Font-size x-small? Is this recommended as a Web standard? I'm fairly novice at CSS, so should I be implementing this?
the whole point of allowing users to alter font sizes, screen resolutions, monitor gamma etc is that we don't want to all have identically set up computers
Or put it this way: I used to always use relative font sizes. I also used to get complaints from a Mr or Ms Average-Surfer, complaining the text was too small to read. I'd fix it, and then I'd get a mail from somebody else to the effect that "for about a week now I haven't been able to read anything on your site". Once I looked at my stats and decided it was safe to ignore NS4.7 for Mac, only to get a flurry of angry mails from Windows users.
The moment I switched to pixel sizes, all that stopped. What am I to conclude? Basically, that for the audience I am aiming for, absolute sizes create fewer problems than relative sizes. That may change in future, and it's certainly not true of all audiences. But I'm not aiming at graphic designers at the moment, I'm aiming for the Average-Surfers.
were you using proportions lower than 100%?...surely that's the only reason it might happen...otherwise you are using the visitor's default font size...unless the very first thing they do on getting the computer is to visit your site I would hardly expect them to be blaming it
Larger fonts tend not to look as pretty, but people can read them. It's also true that larger fonts put less information "above the fold" - so people must scroll a bit more. But if the readability factor is high, then users will WANT to scroll.
Smallish fonts make for a tougher user experience, even if the result is more beautiful. A lot of times what is considered a "clean" design includes small fonts and is not as easily read. Beautiful alone doesn't get the job done.
As web developers, we usually are packaging and delivering information, and not creating works of art for art's sake. That's a tough pill to swallow for many art school graduates. As a matter of fact, small print is also the downfall of a lot of award winning print advertising.
Small type looks pretty, but it doesn't bring the message across to the widest audience - and usually that is the idea, after all.
It's also true that larger fonts put less information "above the fold" - so people must scroll a bit more. But if the readability factor is high, then users will WANT to scroll.
A lot of pages contain a good deal of different types of information. Let's say that I'm looking at a web page that is actually a newspaper of sorts. I don't care about the first five items that they're headlining - I want to get to the tech section. If the font is large, that's a lot of scrolling that I need to go through to get to where I want to be.
Now unless I'm mistaken, the font on these forum pages is smaller than the default font size. Although I need glasses to read and my screen resolution is reasonably high, I have no trouble at all reading this.
px is not portable enough; em & ex break disasterously in IE3.0; CSS size keywords are illegible in MacNav4; 'medium' was chosen strangely in IE; in, cm, mm, pt and pc are all strictly evil for Web use; and both Nav4 and IE have inheritance problems with relative units.
Last time I looked into this, the <BIG> and <SMALL> HTML elements seemed to be the most portable approach (unfortunately). larger and smaller are not supported in IE3, but ignoring them isn't a problem. % is OK as long as you avoid Nav4's bizarre font-size inheritance by using newline characters between elements in the source, and are careful about the HTML element inheritance bugs in IE.
