Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

gm1234

macrumors newbie
Original poster
Oct 1, 2004
2
0
Now this is really serious. There are some who say that a font size of 10 to 12 points would be good, some others who say that font sizes should be specified in percentage of 80 to 90% and some others who are against specifying font sizes. I wonder which one would be correct on the web usability point of view. Any help?
 
personally i do it in pixels, but i prefer smaller fixed size text, really you should do it with em units or as you say %s.
 
It comes down to accessibility vs. ascetics. I prefer pixels because I favor ascetics. The down side to using pixels is that it does limit some, mostly older, browsers and their ability to enlarge the text for the viewer. Using ems or %s allows the fonts to flex for the viewer giving them the ability to easily manipulate your layout.

I feel that it comes down to preference and understanding your audience. Then again no matter how well you know your audience you can never predict every situation and every users need.

As I said, I prefer px but have also used a system of establishing a base font size in my body style and then use %s for everything else.

You can find some articles on the subject at:
http://www.alistapart.com/

I found this article by Eric Meyer to be well written:
http://www.meyerweb.com/eric/articles/webrev/199912.html
 
I always specify an "em" value in the body tag in my css, then use %'s to either upsize or downsize that base font for h3, p, etc... It's the best way to ensure that your end user can view the page how they would like to.
 
zim said:
It comes down to accessibility vs. ascetics. I prefer pixels because I favor ascetics. The down side to using pixels is that it does limit some, mostly older, browsers and their ability to enlarge the text for the viewer. Using ems or %s allows the fonts to flex for the viewer giving them the ability to easily manipulate your layout.

Hi,
It's not actually just older browsers that have trouble with pixel sizes, Internet Explorer 6 cannot resize text set in pixels!!! So the browser with %90+ market share cannot do a simple text resize! I always use ems for font sizes now, it's the only way to get IE to do it's thing. it takes a little bit of tweaking but you can get it to work on all browsers (IE 5 upwards, I tend not to worry about NN4 as it's so old).

I would definitely recommend checking www.alistapart.com as there's a lot of good articles.

Cheers,

Rick
 
raytube said:
Hi,
It's not actually just older browsers that have trouble with pixel sizes, Internet Explorer 6 cannot resize text set in pixels!!! So the browser with %90+ market share cannot do a simple text resize! I always use ems for font sizes now, it's the only way to get IE to do it's thing. it takes a little bit of tweaking but you can get it to work on all browsers (IE 5 upwards, I tend not to worry about NN4 as it's so old).

I would definitely recommend checking www.alistapart.com as there's a lot of good articles.

Cheers,

Rick

Right, and I always mistakenly lump EI6 into that group of old browsers. What I should have said is non compliant or non accessible browsers. Even some more recent browsers have had issues, Opera had issues too, a few versions back, but they have been resolved. I think you will find most accessible browsers capable of sizing px fonts.

What we need is a defined way of setting fonts on the web. The w3 has made some suggestions as to which they prefer but they have also swayed back and froth on them.

The biggest issue with using keywords such as small, large, etc.. is that they don't equal the same size from browser to browser. The same can be said for em and %. The only way for em and % to work is that you need to assume that everyone has the same default browser font-szie. Still, many designers/developers use px, because 10px = 10px making designing a lot easier to predict.

The best advice is to pick a solution that works for you and your immediate audience and then stick with it. Inconsistencies will throw your site... h1 { font-size: 16px } and p { font-size: .5em } so here you might have a problem where the paragraphs could dominate your headings because you have set your headings at a defined 16px and the paragraphs are .5 of the base font, which we could assume is 16pt but could be 18pt due to a user change.

Again, pick a solution that works for you and remember that there are no right or wrong answers here. Everyone has an opinion on the subject and no one opinion is more right then the other because there are always exceptions to the rule.
 
Old browsers

Hi,
Yep, I would class IE6 as an old browser really too! it is definitely long in the tooth now! It's just unfortunate that it has the market share it does, with accessibility being such an issue within web design now it's a real pain to have to work around. Pixels definitely are the easiest way to things working at a fixed size, one alternative is to give user changeable style sheets so that you can let the user control it regardless of browser.

Cheers,

Rick
 
raytube said:
Hi,
Yep, I would class IE6 as an old browser really too! it is definitely long in the tooth now! It's just unfortunate that it has the market share it does, with accessibility being such an issue within web design now it's a real pain to have to work around. Pixels definitely are the easiest way to things working at a fixed size, one alternative is to give user changeable style sheets so that you can let the user control it regardless of browser.

Cheers,

Rick

I agree. :D
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.