Setting body font-size using %

Can I set at 90%?

[jamie]

Hi all,

can i set the body font in the style sheet to 90%, or ist it better to leave it at 100% (i.e. don't bother specifiying) and then specify for each element

either

BODY {font: 90% Arial}

or

BODY {font-family: Arial}

P, TD, A {font-size: 90%}

many thanks!

[danec]

Jamie,

You can do it either way .. just depends upon your requirements. Also, glad to see that you're using relative font sizes! Its nice to allow the user the ability to resize the font up or down (which he can't do if you use absolute font sizes.)

[Hagstrom]

Jamie, I have converted my own pages to specify the size as a percentages myself. This was a lot more difficult than I thought and I would like to give a few warnings:

1. The percentages a calculated of the parent, e.g. if you specify that the P, B and I-tags should be 90%, then text that is bold and Italic will only be 90% x 90% x 90% = 53%.
   
2. There seems to be an undocumented feature that text in tables is only 80% - unless you override this in your style sheet.
   
3. If you don't close the paragraph before a table, then the table will be a child of the paragraph and the text will be 90% (= your paragraph-percentage) multiplied by 80% (undocumented table-percentage) multiplied by 80% (your paragraph-percentage).
   

Other than that, percentages are good because they let your guests override the fontsize.

Lots of luck :)

[Nick_W]

Be carefull with the body rule. I don't think netscape handles it very well. I always specify for each element. Saves worrying wheather NN will handle the cascade properly ;)

Nick

[jamie]

thanks peeps!

hagstrom: great that you mention that. i too am in process of swapping from px to % and specifying the 90% on the body tag and then 90% on P and others, ended up in some tiny ilegible sizes ;-) i did think they might inherit...

will leave it alone on the body then and specify each element. we don't use many elements anyway. P TD BLOCKQUOTE BIG SMALL A and DIV should be enough. thanks nick

another question, if you don't mind :)

i would like to set margin-bottom: 0px on a <form> so that it integrates well into the design. i have read in richinstyle that if you start setting margins on one element, you have to set in all elements.

is it not simply pssible to set a margin-bottom on <form> and not specify on any other element.

thanks for the help with the double-whammy question!

[Eric_Jarvis]

what I don't understand is this insistence on reducing the default font size on the page...surely if you are getting fonts too large you should be reducing the default font size on your computer, not trying to reduce it on mine too?...90% is fine here and there, I use 80% and 70% quite often for menu items or "small print"...but I've got the default sizes on my computer set where I like them (slightly larger at home than at work, since my eyes are usually more tired, and because I sit slightly further away from the monitor)...and yet for the majority of web sites I have to use zoom to read the text

it's good to go to relative sizes...but do it with a clear idea of why it's a good thing

[tedster]

It's been VERY common for websites to use <font size=-1> for body copy. I venture to say that many people have chosen their browser defaults based on that fact.

So, if you don't reduce relative font sizes down from 100%, I think many people will see bigger text than they are accustomed to.

[Nick_W]

i have read in richinstyle that if you start setting margins on one element, you have to set in all elements.

Absolute rubbish. Go ahead ;)

Nick

[Hagstrom]

One more warning: Be careful with percentages and Netscape 4.
If you set your paragraphs to anything else than 100% you have to close all the paragraphs ( </p> ). Otherwise the text will grow smaller and smaller (or larger and larger).

Actually I have found that with NS4 the paragraphs inherit size from other closed elements so I have to sprinkle a few </p>-tags here and there. E.g. in some of my pages the first paragraph seems to inherit size from the header-tag so I have to start the page like this:

<h1>xxxxxxxxxxx</h1></p>

Of course my HTML-validator doesn't like this.

[jamie]

hi eric,

in an ideal world yes, i agree. but that supposes that everyone knows how to adjust font size through the browser.

no one i know even thinks about that and i have many friends who use the web regularly. i would be surprised if they even knew that that function exists.

our target base is more novice than expert, and more young than old, and a 90% verdana/arial, looks 'cooler' than a 100% verdana/arial. plus it is 'normal' around the web.

i want my site to look normal, something people are comfortable with, and in my opinion, leaving default size on fonts verdana/arial makes them look like reading a 'large-print' book from the library. as though the site has been designed 'only' for the hard of sight.

people who are genuinely not comfortable with the small font size have learned to scale it up via the browser anyway - either that or they give up surfing, because the vast majority of websites, including text-heavy ones like bbc and cnn use 12px or even 11px.

we are now in the process of re-styling the site with % and not px. so for those who wish to rescale, the option is there.

hope this doesn't sound too blasé, is only my opinion ;)

thanks all for the input!

[tedster]

Making font size adjustments more obvious is one of Jakob Nielsen's suggestions [useit.com] to improve browser usability. Earlier versions of IE had it right out there on the top menubar. I wonder why they buried it?

I personally love the Opera zoom function - I never touch the actual font settings anymore unless I'm 'stress testing' a design template.