font size in stylesheets ?

[prequel]

I am converting my larger site i have (2,200+ html pages) to use stylesheets

i have created a file mystyles.css and put in it so far

p { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
td { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
li { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
a:link { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
a:visited { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333}
a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FF0000}
blockquote { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333}

.newsheadline { font-family: Arial, Helvetica, sans-serif; font-size: 13px}
.dateline { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px}
.mainfont { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
.justify { text-align: justify}

I am using IE 5.5 with text size set to medium size on a 15" monitor @ 800x600 16bit high resolution and it looks fine and the font size is only slightly smaller that standard font size = 2 setting.

But when i change my browser's text viewing size to say larger or smaller font the page which has this style sheet linked to doesn't change the size of the text - so it's been fixed by the stylesheet.

Is this the correct way to do css for fonts ? i didn't use them much until now (gotta reduce the site's bandwidth from 50gb/month hehe)

thanks

[creole]

prequel...

px is a "fixed-size" measurement. As such it says "this type will be twelve pixels tall on the users screen".

Needless to say, that is not very user friendly. Your best bet for great cross-browser support is to use either em (1.0 is regular) or pt.

font-size: 1.5em;
font-size: 1.5pt;

I personally use pt as it is very recognizable by users that have Word, Excel, and most other Applications that let you change fonts. Keep in mind that even with em or pt, there will still be some slight variances between browsers and OS's. You will never be able to totally control the display unless you make it an image.

[prequel]

ooooh thanks

lucky i posted about this otherwise i'd move and relaunch my site on my server next week and have angry visitors ...

phew...

so what's the closed pt value to font size = 2 ?

[Michel V]

I could have gone in a big rant promoting the use of pixels, but I remembered this article sums it all:

http://www.alistapart.com/stories/fear4/

[prequel]

wow now i am confused

i see on that web site you linked to the use of

P {font: 11px/18px verdana, arial, helvetica, sans-serif; margin-top: 5px;}

what does 11px/18px do ?

[creole]

prequel...

font size=2 would be equivalent (on a Win system) to 10pt.


the 11px/18px is the relationship between font size/line height.

It allows you to specify the size of the letter themselves as well as the distance between the lines of text.

[OneChance]

Actually, all in all, px is better to use than pt. pt is not device independent. For example, 12pt is somewhat larger on Windows than on Mac. On the other hand, pixel (px) units are relative to the resolution of the canvas. See http://richinstyle.com/masterclass/lengths.html for more information.

Note that Netscape 4.x doesn't exactly recognize pixel sizes the same way IE does (e.g., 13px in IE 5.x is equal to 13.5px in Netscape 4.x). Netscape 4.x is rendering the font incorrectly here; Netscape 6 doesn't have this problem. So if you're going to use pixels, as suggested, you should use two different stylesheets; one for Netscape 6 and one for all other browsers, probably using JavaScript to choose between the two. In the Netscape 6 stylesheet, you would specify pixel sizes without decimals, such as 12px, 13px, 14px, etc. The stylesheet for all other browsers would use decimals, 12.0px, 13.5px, 14.9px, etc. You can see this at work at http://www.palmtown.com/.

[creole]

OneChance...

did you even read the original post? Prequel is having problems with the fonts being too small on some browsers.

So then you go and tell him to use pixels as his unit of measurement? Please try to solve the problem.

Actually, all in all, px is better to use than pt. pt is not device independent. For example, 12pt is somewhat larger on Windows than on Mac. On the other hand, pixel (px) units are relative to the resolution of the canvas.

Pixel is not device independent either. Some monitors/OS's display screens at 96dpi. Which would result in the font being different on them as well.

In addition, using pixels basically takes away ANY control that the user has over font size. That is poor design from a usability standpoint. What if one of your users had eye troubles? There Is a reason that browser manufacturers allow the type to be resized. You as a designer have no business taking that functionality away from the user...the REASON why you are designing the site in the first place.

I'm not trying to be rude, but please be more responsible when you post. Nonsense that like that is the reason why people leave websites.

[OneChance]

creole, here are the problems I have with the statements you made:

First of all, px is relative, not fixed. It is relative to the user's screen resolution.

Second, your statement, "Your best bet for great cross-browser support is to use either em (1.0 is regular) or pt." is extremely misleading. What browsers are you including here? Certainly not IE 3 or Netscape 4.x and earlier. Have you even tested em in those browsers? And I can't find a single reputable source that suggests using pt in a web-based environment.

Third, using pixels does not take away the user's control over font size. Are you even aware of the fact that IE 5.x allows the user to specify their own stylesheet? If someone has such a severe vision impairment that they can't view the text on a web page, then they are probably aware of their browser's accessibility functions.

Fourth, I wonder if you read the original post. The OP stated nothing about the text being too small on some browsers. The problem was that the Text Size option under the View menu breaks. But this isn't the only way to change the text size on a page; it's only the most convenient way. In IE 5.x, go to Tools > Internet Options > Accessibility.

Oh, I just wanted to add, how did you become a SitePoint Mentor, anyway?

[prequel]

oh no need to get heated up okay

my original problem is that i am worried some viewers are using the IE browser option of View -> Text Size -> and seletcing small, medium or larger selections and how that would appear in a page using CSS font size defined by px and/or pt

current i am using font size at 12px as in my original post.

Oh, I just wanted to add, how did you become a SitePoint Mentor, anyway?

was that directed at me ?

[OneChance]

Originally posted by prequel
was that directed at me ?

No, at creole. Since I was amazed someone with a designation like SitePoint Mentor would ever suggest using pt at all.

[creole]

1) When it comes down to it, pixel IS fixed, meaning that the user cannot resize it using View > Text Size >. You are correct in saying that people with that severe of a disability may be aware of the ability to change their stylesheet. But what about people like me?

Sometimes I like to sit way back from my monitor, about 3-4 feet or so. Add in to that, the fact that I also wear glasses and then you use PX as your unit of measurement? That means that I cannot easily increase the size of the text on your page? I would say "good bye" to your/anyone's site.

2) I was invited to become a mentor. Being a mentor means that you try your best to take all things into account when you post.

Do I do that all the time? No.
Am I wrong sometimes? Yes.
Often? No.

But when i change my browser's text viewing size to say larger or smaller font the page which has this style sheet linked to doesn't change the size of the text - so it's been fixed by the stylesheet.

Prequel stated thet he/she was viewing the text on a 15" monitor. When he/she viewed it on a larger monitor prequel noticed that the text was not able to be resized. My guess was that the text was too small.

Here is a link to an article called "Understanding EM"
http://www.webreview.com/1998/06_26/..._26_98_7.shtml

I am also going to post a few excerpts from it.

But the control that CSS gives is also a dangerous thing -- and not just in the hands of the inexperienced. The biggest danger comes in the area of type size and leading. Why? Because while you can do queries and determine a particular screen resolution, you can't query their brains and determine their eyesight and personal preferences.

This is especially important for people who are getting older (and more of the population is getting older), and people with vision disabilities.

Yet as designers start to use CSS, they tend to use the more familiar measurement units -- things like pixels (px) or points (pt). The problem with pixels is that they're going to give you type and leading that's different, depending on screen resolution and the type of computer the visitor is using (i.e., Windows, Mac, Unix, etc.). For example, Windows users tend to have 96px per inch, compared to Mac users who normally have 72px per inch. The problem with using points is that they, too, will differ in actual size depending on screen resolution.

These set measurement units also have one more very important disadvantage: Once you set type in points or pixels, users cannot change it. Like it or not, they're stuck with your settings (unless, of course, they override them in their browser Preferences).

and

The answer is a measurement unit called an "em," which may be completely new to you. If you have heard of it, it's probably because you have a background in type -- which is where this measurement comes from.

The term em used to be the height of an upper-case M, which, if you were working with a 12 point font, was 12 point. Now an em simply equals the size of the type. So 12 point type has an "em" of 12 points (there are 72 points per inch).

The default type size of Web browsers is 12 point, that is, of course, unless you've changed the browser settings. Most people do this for a reason -- most often to make type bigger so it's easier to read. However, the font size does get changed to a smaller size to get more information on-screen, or because they find the smaller text to be sharper or easier to read.

Using em units allows you to set type in relative sizes -- only specifically. Setting type at 1.5em would do the following: Someone with a default of 12 point type, would see 18 point type (that's 12 point times 1.5). Someone who likes bigger type and has set their default to 14 would see 21 point type. Someone who set a default to 10 point would see 15 point type.

Because it's all relative based on the user's default setting, the designer still has control, in that they can specify how much larger or smaller type is on the page, but the user still has control so they can read it.

That is a link directly from the W3C website. Do YOU think they would have information on their website that wasn't up to spec or was invalid code?


3) So you as a web designer would rather say "screw you" to your users than easily give them the ability to change the site to the way THEY want it? That is what I have a problem with regarding your comments.

Keep in mind that I don't know you, nor do I have a problem with you in general. Your post was written intelligently and you made good points. What I did not appreciate was telling other users incorrect information. I could flog a dead horse, but the fact is that using PX as your unit of measurement is irresponsible to your users. Plain and simple.

[OneChance]

I understand your position on em and the benefits of using em. I would use it too, if not for the fact that there are browsers that simply don't render it correctly. If one were to use em, one would end up with at least three different stylesheets; one for IE 4/5 and Opera using em, one for Netscape 6 using px without decimals (e.g., 14px), and one for IE 3 and Netscape 4.x using px with decimals (e.g., 14.9px). Some people may find it too much of a burden to supply all three versions, but I think if you're going to accommodate those with bad vision or those who like to sit three feet from their monitor, then you should take the extra step to accommodate those with older browsers. Maybe this is something I should have explained in my original reply.

By saying em is the only way to go is, in my opinion, saying that all browsers render it properly, and that's misleading. em may be the best solution in theory, but in practice it is not. Now if someone wants to view my web page from a city block away, and they complain that they can't read my text, then that's too bad. Not a personal attack towards you, but I'm sure that you can see my point.

[prequel]

Prequel stated thet he/she was viewing the text on a 15" monitor. When he/she viewed it on a larger monitor prequel noticed that the text was not able to be resized. My guess was that the text was too small.

actually what i mean is i am still viewing it on the 15" monitor at 800x600 but resizing using the

View - Text size - largest

is when nothing happens

[creole]

prequel...

right...

OneChance and I sort of got...sidetracked with our discussion.

Your best bet would be to use neaerly any of the other measurements. The W3C would recommend using EM, I personally use pt and I would still recommend usign PT as it is the most familiar to the majority of computer users. There are of course drawbacks to all of these measurements.

In short, expect minor differences between your display and if you absolutely need a piece of text to be a specific size, then make it an image.


OneChance...I do see your points. It basically comes down to personal opinion.

[lynlimz]

I apologise for noticing this thread till now..
hey guys..i see flames up there m8....lol =)

okie...back to the topic...well...not really..
prequel...
here's an optimised code of your style sheets...
note..optimisation is crucial..as that means reducing the number of bytes in your style sheet =) lol...and also loading time..( sorry..i'm obsessed with it )

here's it.

p,td,li,a,.mainfront { font : 12px Arial, Helvetica, sans-serif; }
a:visited { color : #333333; }
a:hover { color : #FF0000; }
blockquote { color : #333333; font : 12px Arial, Helvetica, sans-serif; }
.newsheadline { font : 13px Arial, Helvetica, sans-serif; }
.dateline { font : 10px Verdana, Arial, Helvetica, sans-serif; }
.justify { text-align : justify; }