Text size

[Marc]

I was wondering if anyone could help me..

I am making a site and I want the font size to be exactly 10pt, and to not be effected by what setting the user chose in their browser (largest to smallest). I know when I do size="2" that is effected by the users choice, but I thouhgt if I used css it would not be? Only links appear to be staying at the size I chose.

Thanks a lot anyone.

[delemtri]

body { font-family : arial, sans serif ; font-size : 10pt ; }
td { font-family : arial, sans serif ; font-size : 10pt ; } // at least if you're using tables

[Marc]

I posted one dumb question, but you answered it perfectly

It even solved problems I hadn't addressed yet

thanks a lot

[delemtri]

Glad to help.

[isotope235]

Specifying the font attributes using the body element has caused me some grief in the past. Better to specify the font attributes for the individual elements:

li,p,td
{
font-family: foo;
font-size: 10pt;
}

[Aes]

You can still change it in a browser, even using CSS and points.

To keep users from changing it you need to use "px" instead of "pt" in your CSS.

[Adam P.]

Actually, I've found that the BEST way to use CSS is by using all classes. Example:

[css]
.sidebar { font-size: 10pt ; color: #FFFFFF ; font-family: verdana ; }
.content { font-size: 12pt ; color: #000000 ; font-family: verdana ; }
[/css]

Therefore, you can use the class in any HTML tag that it can be used in. Example:

<td class="sidebar">
Home
<br>About Us
<br>Contact
</td>

<td><ul class="content">
<li>blah
<li>blah
<li>blah</ul>
</td>

A good example stylesheet is mmj's at mostlyamphigory.com:
http://www.mostlyamphigory.com/navbar/vn1style.css
I learned a lot from his stylesheet.

[creole]

Adam...that's not the best way actually. Classes are good, but you duplicate code when you define font faces and sizes for each class.

Ideally, if consistency of font faces and sizes are your desire, set every block level element right off like so:

body, td, p, div, li (and more) {font-family: verdana; font-size: 10px; }

Then you change the sizes and faces from there using classes. Doing it this way makes it a snap to change sizes and faces all over your site. You just change the body tag declaration and presto. If you define it using classes you have to change it multiple times. That defeats the whole purpose of stylesheets.
-------------------------------------
Now, to address Marc's comment about setting the body font so that someone can't change the size.

FOR THE LOVE OF GOD DON'T DO THAT!!

That is bad design of the highest order. YOu are in effect telling your users that you don't care about their opinion. Remember, you are making a website for THEM right? Let me address a few common statements that designers make when they say they want to use pixels

-= If the user resizes the text, then my site will break.
A. Then your site is designed poorly to begin with.

-= I want the text size to be IDENTICAL in Netscape and IE on a MAc and PC.
A. It will NEVER happen, so why trouble yourself and piss off your users. You can't even get an IMAGE to be the same size with all 4 of those variables. How can you expect text to be the same?

Browsers have BUILT IN functionality to allow a user (one who might have poor eyesight, or a crappy monitor) to resize the text to THEIR liking. The way I look at it, when you start taking away that functionality you start making people angry. You don't want to make your users angry at you do you?

If you do your site layout properly, then a user can resize your site all they want to and it should not break. Even if it does, the user will understand that THEY are the ones who did that and not you.

[Adam P.]

Adam...that's not the best way actually. Classes are good, but you duplicate code when you define font faces and sizes for each class.

::mumbles to self::
i'm so stupid, stupid, stupid...

[creole]

no no no...

it's just thinking ahead, that's all. Besides, the code you posted was good. Just not the best way. You should know by now that there are always several ways to accomplish something in web design. Some are more efficient is all.

[Adam P.]

haha, thanks for the uplift creole

[mmj]

Originally posted by swimm5001

A good example stylesheet is mmj's at mostlyamphigory.com:
http://www.mostlyamphigory.com/navbar/vn1style.css
I learned a lot from his stylesheet.

Wow - I just was browsing through and found this, completely by chance.

The truth is, my stylesheet isn't the best example. It has its problems, and these are the same problems that all stylesheets have.

I use % values for the text (just like em really). This is great. Users of netscape and IE can resize their text to their liking, and it looks great.

The nightmare starts when I see my site on netscape on a mac. Anything under 10pt is now so small that I cannot see a thing! It is just a line of pixels. As it turns out, 12pt on a mac uses only 75% the size as 12pt on an average PC. It is the same for all point sizes.

However, after eliminating everything under 10pt, by increasing it to 10pt, there is no way of having small text on a PC. 10pt is quite large on a PC.

It is turning into a nightmare. It turns out that sitepoint.com uses a different stylesheet for mac as for PC. You may not realise it (unless you view the stylesheet on both a mac and PC) but the stylesheet is different. Font sizes are generally 33% larger on the mac stylesheets to compensate for the differences.

I don't want to switch to fixed font sizes (pt or px) but I don't want my site unreadable on a mac! Yikes...


By the way, I am editing my stylesheet this week, so it might change a bit.

[[MOS]]

I don't think Creole is right. I always use pixels for the type, because of some different interpretations in what is a 'point' between PC & Mac.

Using pixels is not a fault: the CSS standard defines several units of measure, and pixels is one of them. Yes, we may be used to points in non web related jobs, but using pixels is very easy and much more useful. 11px is the modern little type you see everywhere, 12px is more legible.

And for the discussion on using classes for specifying the text size, it should be ok to put it only in the body tag, but several browsers have problems with the 'cascading' part of CSS, so they would break the font style when reaching a <TD>.

So, just adding:

body, td, td p {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
}
(Using line-height with NS4 is not recommended, but...)

Should work. Anyway, my philosophy is to forget about NS4, specially since we have the much better NS6, Opera, Konqueror, IE5/Mac...

User font-resizing is not a matter of the web designer, but of the browser manufacturer. Opera5 and IE5/Mac already have got the Zoom feature, which is what eventually every browser will have.

If you're interested in the point vs. pixels matter, I'll give you some links where you can find the technical explanation, from Zeldman, AListApart and Code*****.

[wrkalot]

Wow! This is the best thread i've run across yet. When I designed my site I used pt with no CSS. After getting complaints for customers and resizing one page at a time (60 in all ) using CSS and em and ran into similar problems on the different OS's. I have now converted all text to px and get a consistant look no matter the browser or platform.

Printing is a problem with px tho so I'm in the process of making "printable" pages of certain sections of my site.

I us a Mac btw

[cyberprince]

wrkalot i am just curious what problems you enountered using the em unit. I am still trying to learn CSS and the book I'm using recommends using the em unit above anything else.

[wrkalot]

Well, I'm no expert thats for sure but if I remember correctly em acted like pt did. The text in Netscrape was much smaller than IE.

It could very well have been poor coding on my part but since converting to px all has been well.

Some of the previous post attempt to clarify these issues but I too am a bit confused as to the best method.

[OneChance]

cyberprince, you may want to check out this link: http://www.richinstyle.com/masterclass/lengths.html

[cyberprince]

thanks OneChance. just printed that Article out for some reading.

[creole]

MOS (and others)

There are times when PX is an acceptable unit of measurement (accent text, buttons etc...), however (IMO) it should NEVER be used for body type. The reason? It takes away control from the user, you know...that person you designed the site for in the first place?

When possible you should ALWAYS design for the widest range of people. That includes people who have trouble with their eyes. Setting a font to PX effectively removes the users ability to increase the size of the text, which means that they might just leave your site?

Besides...is it REALLY that important that a font is EXACTLY the same size in all browsers? The way I look at it, if your site breaks in different browsers just because of font size, then something is wrong with your site's structure.

[Marc]

So, creole, when you set your text size, you use the standard html "2" for most content?

I think you are right about not using absolute values for text sizes, but that is just another variable that we designers have to deal with and makes producing a nice looking website that much harder

And you use "medium" size when viewing your site and others, I assume?

I wonder if there's anywhere one could find reliable statistics on what setting most people use, from smallest to largest, and since netscape just goes by increments, do you know how many different sizes it has?