Best way to define font size?

rubyfruit · #1 Sep 11th, 2006, 16:48

Hi

Sorry for the basic question, but I've just read about font size and found that there are several ways to define it- percentage, em, pixels, etc.

The article I read suggested combining em and percentages. This seems a bit convoluted. I notice that css zen garden just use font: 8pt/16pt georgia.

Obviously I want to choose a method that gives the most control over the font size across the largest number of browsers.

Cheers,

Ruby

moojoo · #2 Sep 11th, 2006, 16:51

0.85 em or 0.9 em are usually good starting points.

ukgeoff · #3 Sep 11th, 2006, 17:04

Ems are the best way to specify font sizes but you need to be aware of a number of things.

Specify a start point for the <body> tag and then use ems to go above and below this point. Even though it's a percentage a good starting point is 100.01%. This gets over a wierd bug in IE.

You also need to remeber that em is a relative size. Relative to the em size of its containing element. What this means is that if you have a div with its font-size set to 0.8em and inside this div you have another div with its font-size specified as 0.8em, the font in the ineer div will be 0.8 of 0.8.

So if your base point happened to be say 12px (set by the end user), then the first divs font as displayed would be 10px rounded up and the inner div's font would be 8px.

Some browsers like Firefox allow the user to specify both a base font size and a minimum font size, so what ever the sums work out at, the font will never be displayed any smaller than that.

So typically I will set the following:

Code: Select all

h1 - 1.4em
h2 - 1.2em
p - 0.85em
#nav - 0.75

rubyfruit · #4 Sep 11th, 2006, 17:05

Thanks Moojoo.

PS - split personality or master of disguise? I'm sure you were a man, then a woman, now text.

Ruby

moojoo · #5 Sep 11th, 2006, 17:08

Maybe I am Man, Woman, and ASCII.. Behold!

rubyfruit · #6 Sep 12th, 2006, 11:09

Thank you Geoff - am about to put your advice into practice.

mreine · #7 Sep 12th, 2006, 13:15

I found the 101% thing interesting, it was something I've yet to see one ounce of text on and I've read a lot of stuff on bugs.

Anyway, I did some reading on it and from what I've seen it should actually be 100.01% due to another browser having issues with 101%. This does have an interesting affect when you downsize the IE fonts. I played around before and after adding this setting and the text is much more legible after adding it.

Nice recommendation ukgeoff, works nicely.

Legacy_Staff · #8 Sep 12th, 2006, 20:01

Quote:

Originally Posted by rubyfruit22

Thanks Moojoo.

PS - split personality or master of disguise? I'm sure you were a man, then a woman, now text.

Ruby

He's Webforumz' very own self-proliferating entity.

moojoo · #9 Sep 12th, 2006, 20:04

And I can leap an em in a single bound? I like that 100.1% thing. very interesting. Although Ihave never had issues using em's in my browser testing.

rubyfruit · #10 Sep 13th, 2006, 09:16

Loving the white boots

masonbarge · #11 Sep 13th, 2006, 13:51

If you have a complex design that breaks when font size changes, you'll want to use px for font-size. IE has reserved this measure not to change when the browser "view" is used to increase/decrease text size.

Ems are really nice to keep design from breaking, as long as you use them for vertical box element measurements.

I wouldn't advise anyone except an advanced css user to use %. The inheritance rules are just one more variable to mess you up.

moojoo · #12 Sep 13th, 2006, 13:58

Your layouts should never break when fonts are resized. There is always a solution.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Font size question on websites?	ugadawgvi	Starting Out	2	Aug 3rd, 2007 16:50
IE7 font size and formatting - help	Xhristy	Web Page Design	4	Apr 3rd, 2007 17:35
How font size works in CSS?	sahota	Web Page Design	19	Dec 20th, 2006 22:56
font-size: does not work in <body>	andersonoo7	Web Page Design	4	Jul 23rd, 2005 03:00
Overriding pre-set text/font size	autumn_whispers2me	Web Page Design	10	Apr 25th, 2005 17:24

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Best way to define font size?