*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.