HTML and CSS Reference
Q: So, by defining a font size in the
<body> element, I'm somehow defining a
default size for the page? How does that
A: Yes, that's right. By setting a font
size in your <body> element, you can then
define the other font sizes of your elements
in relation to their parent. What's so great
about that? Well, if you need to change the
font size, then all you need to do is change
the body font size, and everything else will
change in proportion.
Q: Do we really need to worry about
users resizing their browser fonts? I
never do that.
A: Yes. Almost all browsers allow their
users to make the text of a page bigger or
smaller, and many users take advantage
of this feature. If you define your fonts in a
relative manner, then your users will have no
trouble doing this. Just be careful not to use
pixel sizes, because some browsers have
problems resizing those.
Q: I like the idea of using pixels
because then my page will look exactly
like I specify it.
A: There is some truth to that — by using
pixels for every element's font size, you
are choosing the precise font size you want
for each element. But you do that at the
cost of giving some of your users (the ones
using older versions of Internet Explorer)
the flexibility to pick a font size that is
appropriate for their display and eyesight.
Q: What's the difference between em
and %? They seem like the same thing.
A: They are basically two different ways
to achieve the same thing. Both give you a
way to specify a size relative to the parent
font size. A lot of people find percent easier
to think about than em, and also easier
to read in your CSS. But you should use
whichever you want.
Q: If I don't specify any font sizes, do I
just get the default font sizes?
A: Yes, and what those sizes are
depends on your browser, and even the
version of the browser you are running. But
in most cases, the default body font size will
be 16 pixels.
Q: And what are the default sizes for
A: Again, it depends on the browser, but
in general, <h1> is 200% of the default body
text font size, <h2> is 150%, <h3> is 120%,
<h4> is 100%, <h5> is 90%, and <h6> is
60%. Notice that by default <h4> is the same
font size as the body font size, and <h5> and
<h6> are smaller.
Q: So rather than using the size
keywords, can I use em or % in the body
rule? If I use 90% for the font size of the
body, what does that mean exactly? It's
90% of what?
A: Yes, you can do that. If you specify
a font size of 90% in your body rule, then
that would be 90% of the default font size,
which we just said is usually 16 pixels, so
90% would be about 14 pixels. If you'd like a
font size slightly different than the keywords
provided, go ahead and use % or em.
Q: There seems to be so many
differences between browsers: font-
family, font-size, various default settings,
and so on. How will I ever know if my
design looks good on other browsers?
A: Great question. The easy answer
is that if you follow the guidelines in this
chapter, then most of your designs are going
to look just fine in other browsers. However,
you should know that they may look slightly
different in different browsers — the fonts may
be slightly bigger or smaller, spacing here
and there may be different, etc. But all the
differences should be very minor and should
not affect the readability of your pages.
However, if you really care about having
your pages looking almost identical in many
browsers, then you really need to test them
in lots of browsers. And to really take this
to the extreme, you'll find a variety of CSS
“hacks” to try to make different browsers
behave the same. If you want to take it this
far, there's nothing wrong with that, but just
keep in mind a lot of these activities take
time and have diminishing returns.
You also are creating pages that are a
little harder to maintain because if you
suddenly want to increase the font sizes of
all the elements in a page, you have a lot of
changes to make.