Where to set Font-Size?

*edit Paul ninja’d me

Debbie:
if I understand std76 and Paul (and I believe I do), there’s a base size set on the body element and from then on, of course you will want to adjust your individual elements, so also the p’s etc. What you don’t want to do is set font-sizes in ems on containers. That’s the “danger” everyone’s been hinting at, because then you start needing to do math and as Barbie once said to me math is hard and I personally go out of my way to avoid doing any math at all possible ever if I can avoid it.

And yeah I’m a girl but that should mean I do get to perpetuate stereotypes. Nerdy WolframAlpha girls, go away or I’ll steal your lunchmoney.

So here’s what I do, I think it’s pretty similar to what most of the others in this thread do regarding ems and setting fonts:

body {
font: 100%/130% family, generic-family;
}

I’m just using 130% because it seems to work better than the 1.2em (120%, same thing) that I would usually use as default line-height…

So right now most of the page text is set to whatever the user has set on their OS or their browser or their applications or whatever.

The browser still has a default stylesheet which for example will make the header tags larger and bold (h1-h6) and some other small things.
When you go to set whatever size you want on, say, your h1, you just set what you want on it, easy:

h1 {
font-size: 1.6em;
}
(supposing you want it to be .6 times bigger than your default text setting)

Usually with headers I find I have to go all out and set line-heights too, though you’ll only see that if you strip margins from them.

You want most body text to be “normal” and right now p’s are 1em. You don’t have to set anything if you don’t want to. But if you want all text in a particular container to be smaller than normal, you’d

.someContainer p {
font-size: .9em;
}

You’ve seen those diagrams where they have a tree showing DOM nodes? Like in a Javascript book? The ends of each branch eventually is either an element (or an attribute of an element or its text node). I set my font sizes on the ends of the branches: the elements.
Meaning I don’t do

.someContainer {
font-size: .9em;
}

People like to do this with px sometimes but here’s where, if you’ve got different elements in someContainer and there’s nesting going on, you start having to do math. I hate doing math, so I don’t set on the container. if I set on the p inside the container, then any children of the p are the size I expect: same as the p.

Huh?

Debbie:
if I understand std76 and Paul (and I believe I do), there’s a base size set on the body element and from then on, of course you will want to adjust your individual elements, so also the p’s etc. What you don’t want to do is set font-sizes in ems on containers. That’s the “danger” everyone’s been hinting at, because then you start needing to do math and as Barbie once said to me math is hard and I personally go out of my way to avoid doing any math at all possible ever if I can avoid it.

And yeah I’m a girl but that should mean I do get to perpetuate stereotypes. Nerdy WolframAlpha girls, go away or I’ll steal your lunchmoney.

If you set the font size on <body> or <h1> or <p> how does that not create the same propagation issue as with <div>?

So here’s what I do, I think it’s pretty similar to what most of the others in this thread do regarding ems and setting fonts:

body {
font: 100%/130% family, generic-family;
}

I’m just using 130% because it seems to work better than the 1.2em (120%, same thing) that I would usually use as default line-height…

Not following you?

How does percentage vary from em?

So right now most of the page text is set to whatever the user has set on their OS or their browser or their applications or whatever.

Rumor has it that is too big?!

You want most body text to be “normal” and right now p’s are 1em. You don’t have to set anything if you don’t want to.

So 100% = 1em?

But if you want all text in a particular container to be smaller than normal, you’d

.someContainer p {
font-size: .9em;
}

How does that compare to

body{
font-size: .9em;
}

or

body p{
font-size: .9em;
}

You’ve seen those diagrams where they have a tree showing DOM nodes? Like in a Javascript book? The ends of each branch eventually is either an element (or an attribute of an element or its text node). I set my font sizes on the ends of the branches: the elements.
Meaning I don’t do

.someContainer {
font-size: .9em;
}

People like to do this with px sometimes but here’s where, if you’ve got different elements in someContainer and there’s nesting going on, you start having to do math. I hate doing math, so I don’t set on the container. if I set on the p inside the container, then any children of the p are the size I expect: same as the p.

Why are children of <p> the same as <p> but children of <div> inherit from <div>??

Debbie

Not much, but as Paul said—“IE6 … has a scaling bug if you use em”

So 100% = 1em?

Yes.

Why are children of <p> the same as <p> but children of <div> inherit from <div>??

Not sure what you mean? Font sizes are inherited by both in the same way.

Why is that and issue… what issue?

I think that’s what I’m not grasping about your question – I just don’t see the problem. Set it on body, scale on semantic children when there’s a reason to resize, not “just because” – where’s the problem?

That question I think is about when people set em’s on containers and then start getting nested elements at unexpected sizes.

I did look through some old code of mine (not that old) and I noticed I did actually set a container to .9em, on a terms&conditions page. Pretty much, everything in that box was just a bit smaller. I like making people squint to read legalese. The whole point is to discourage people from actually reading it, of course.
Still wasn’t a problem because although header tags in general also had a set (in em) font-size, I didn’t go around setting font sizes on everyone else inside. I don’t believe I set any differing font sizes inside that container at all. Avoided the math problem.

If someone ninjas a post in, it means while you were still typing your reply, another one got submitted to the thread by someone else, so what you typed doesn’t take into account the new last post, cause you didn’t see it (like a ninja!).

If you set the font size on <body> or <h1> or <p> how does that not create the same propagation issue as with <div>?

One reason I set it to 100%, so nothing changes… but Paul’s answer that came in right before me explains it pretty well.

Putting the font-size on containers like divs means that if the children inside the div have children and then you go trying to set more sizes inside that container, it can start turning into math hell. Ideally, you’re not going around manually setting font-sizes on a whole lot of elements anyway.

Not following you?

How does percentage vary from em?

As ralph said, it doesn’t. Em can be considered a unit equal to %, and if % makes more sense, go ahead and use it.
Actually, line-height is special: you can leave the unit off if you want. Have you ever seen this?
font: bold 90%/1 somefamily;
?
That 1 means “100%” or “1em” or whatever. Line-height basically gets an assumed unit. I say “130%” in my body because I’m using 100% for the font-size, so I like to keep them using the same units, but I don’t have to. I also don’t have to even set a line-height but as Crusty will point out, that can cause issues 'cause browsers don’t all use the same relative line-height. It’s safest to set a line-height wherever you set a font-size really.

Rumor has it that is too big?!

You know why? Everyone makes these websites with 9px light grey text on white. People just get used to squinting. So when someone finally makes a site that uses the user’s default sizes, it tends to look bigger… especially if you use a large x-height font like Verdana. Like this page, even my boss mentioned how large the text seemed to him. Cause he’s used to sites that look like [url=http://www.cursussen.hu.nl/los/Onderwijs%20en%20Opvoeding/Seminarium%20voor%20Orthopedagogiek/Seminarium%20voor%20Orthopedagogiek/Expertisecentra/Begeleiden%20Schoolontwikkeling%20Leidinggeven.aspx]this one (which uses the 62.5% body font size thing).

BTW on that 62.5% thing… the guy who came up with it, he always re-enlarged everything on a container who enclosed the whole page (so a div inside the body that still otherwise held everything else). Nobody else seems to remember this part, which is why when people use the 62.5% it’s too damn small. They’re doing it wrong.

On the highest element you can. That way, you only have to set it once.

If you re-size the Font in body, then everything in your website will be increasing/decreasing a “Base Font” that is only 90% the size of the default browser Font Size, right?

Nope. What’s dangerous is

* {font-size:90%;}

or

div {font-size:90%;}

because then you can get nesting, and you find that once you’ve got your container <div> and then your content <div> and then your section <div> and suddenly you’re down to a font size of 72%, which is likely to be way too small. But you can only have one <body> on a page, so there is no nesting conflict (aka Cuckoo Problem).

That seems kinda dangerous, because when you get deep into your website and code, now when you type…

someClass{
	font-size: 2em;
}

you are really getting…

someClass{
	font-size: 1.8em;  /* 0.9em X 2em = 1.8em */
}

That’s exactly what you want to happen. By saying whatever {font-size:2em;}, you’re saying that you want <whatever> to be double the size of the rest of the text. And that’s what you’ve got. The reason for using ems (or %) relative to the <body> is to keep text size proportionate. It is very unlikely to matter what the exact computed font size is (on the basis that there will be a margin of error of maybe 25% across just regular setups, let alone people with more heavily customised browsers and computers), but what you want to ensure is the consistency of knowing that X will be double the body text, and Y will be 20% larger, etc.

Too many cooks…

If I have…

body{
0.90em;
}

and then…

h1{
1.5em;
}

and

div{
0.90em;
}

and

p{
0.90em;
}

Then everything on <body> starts off at 90%, and…

<body>
<h1> // 0.901.5=1.35
<div> // 0.90
0.90=0.81
<p> // 0.900.900.90=0.729

Right?

I think it would make more sense if everything was sized off some “global em”, for example, <body> or default browser font size

So regardless of how much nesting, everything would be based off of that global em which should be “1em” in my mind.

That way, I could have a paragraph nested in 19 div’s, style <p> as p{2em} and it would be twice the size of the default browser size.

Very simple…

Debbie

Yes, but it’s not a good way to do it. Much more complicated than needed. As mentioned, just set body to your prefered size for most text (e.g. for <p>) and only change the size on an element where needed (as in the h1).

I think it would make more sense if everything was sized off some “global em”, for example, <body> or default browser font size

That’s what Paul was talking about in post #14 with the new rem.

If you say, “My daughter is half my age and a quarter of a century old…” But your parents are 90 years old (versus 100) does that really make your daughter 22.5 years old instead?? :wink:

Debbie

Cool! :cool:

One reason I set it to 100%, so nothing changes… but Paul’s answer that came in right before me explains it pretty well.

Putting the font-size on containers like divs means that if the children inside the div have children and then you go trying to set more sizes inside that container, it can start turning into math hell. Ideally, you’re not going around manually setting font-sizes on a whole lot of elements anyway.

Maybe the trick is to just have 2-3 font sizes per page?? :wink:

Debbie

I agree with StevieD here and the way the nesting and rescaling of em’s and %'s work in browsers is the way it should be.

Obviously there will be others like you who, in your opinion, believe it would be simpler some other way and that is fine. But regardless of how people think it should work, the fact is you have to work with the way it actually works whether you agree with it or not.

Since you appear to understand how the nesting and cascading of font sizes works with em’s and % then I also agree with DeathShadow and I don’t see what you’re :bouncy3: and :headbang: about. There is no issue as far as I can see and if you want to use em’s and/or %'s then you just have to use them with the way they work because you can’t change the way they work. And assuming you can do simple multiplication it’s a “no-brainer” to size fonts according to what you want.

That really has nothing to do with this issue, though.

If your parents leave you $90K in their will but specify that you must give 50% of your inheritance to your daughter and that she must in turn give 50% of hers to her dog, you will get $45K, your daughter will will get $22.5K and so will her dog. :slight_smile:

Yes and no:)

You missed the point of what most of us have been saying and you cannot possibly know what size the p element will be unless you know where it is.

Using your example above the p element in the code below will be different in every setting.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { font-size:90% }
h1 { font-size:1.5em }
div { font-size:0.90em }
p { font-size:0.90em }
</style>
</head>

<body>
<div>
		<p>small</p>
</div>
<div class="wrap">
		<div>
				<p>smaller</p>
		</div>
</div>
<div class="wrap">
		<div class="inner">
				<div>
						<p>smallest</p>
				</div>
		</div>
</div>
</body>
</html>



That’s why we suggested not setting the font-size on containers like divs but applying directly to p elements and headings as required.

I think that was what I was missing – why the devil would you set it on a div that has child elements with semantic meanings. Methinks that’s where the entire discussion lost me. The only time I MIGHT change it on a div would be in my #footer – and that’s usually because footers don’t have elements of different font sizes in them… otherwise I’d NEVER set it on a div when it has perfectly good child elements like H2, P or LI — which as rule don’t/shouldn’t contain other block level tags. (unless in the case of LI you have a UL/OL – you put a H3 inside it, IMHO that ceased to need a lists semantic meaning).

2cents. Simple. Usually your p is going to take up most of your text. So… size the body whatever it is you want your p size to look like (font-size:75%). Done. You dont have to size that anymore. Now anything else you want bigger or smaller adjust accordingly. H1, h2, ul, li. Etc. You will now be sizing whatever else from the 75% value. h1 font-size:115%.

Right. So why on earth would you set a font size of 0.9em on div and p? You don’t need to, because you’ve already set it on body, which means that it will be inherited throughout every child and descendent element. You set the base font size once on the highest level element you can (usually body) and then you leave it alone. Sure, scale it up or down for specific elements that need to be bigger or smaller than the plain body text, but for generic blocks like div and p you leave the font size well alone, and the computer will get it right without needing you to interfere at every step of the way.

It was an example of the cascading Math if things were nested as I implied they were in my unformatted example…

Debbie

Well, then you created as an example a nasty case of “doctor, doctor, it hurts when I do this”… :smiley: