CSS font size

We can also use CSS to change
the size of our text.

As you can see by looking at
the headings on this page

compared to the paragraphs,
the browser already provides

default styles with different sizes
for different elements.

There's a body font size,

and bigger sizes
for each level of heading.

Sometimes we want to tweak
those sizes, though.

And we can do that with the CSS
`font-size` property.

For example:

What if we want all of the text on our
page to be just a little bit smaller?

Well, we'll go to the `style` tag,

and we'll add a CSS rule
for the `body` tag.

And then inside that,
put a `font-size` property.

Now, what should the value be
for `font-size`?

How do we measure font size, anyway?

That's actually
a really good question.

Because there are at least
ten different units

that CSS supports for `font-size`.

Let's start with a unit
that you've seen before: pixels.

We used pixels to decide
how big to make images.

And we'll keep using them a lot in CSS.

Let's try 11 pixels.

Hah. Everything got smaller.

Even the headings got smaller, actually.

Why did the headings get smaller, too?

Shouldn't they be whatever pixel size
the browser set them to before?

No.

Because the default browser style
for headings isn't specified as a pixel.

It's specified using a different unit,
called "em".

And that unit is a relative unit

that makes the heading font size
scale proportionally to the body font.

Let me show you what I mean.

Let's go to our `h2` style rule

and add the `font-size` property.

This time, instead of thinking in pixels,
I'm going to think relatively.

How much bigger, relatively,
do we want ``s compared to body text?

Maybe, two times bigger?

For that, we write `2em`.

What actually happened now is that
the browser has calculated

a pixel size for the font.

The browser knows that
the body font size is 11 pixels.

And you told it that `h2` should be
two times bigger,

so now all the ``s
are 22 pixels high.

If we change the body font size
to 12 pixels,

then how big will the ``s be?

That's right, 24 pixels.

What if we change the `h2` font size
to 1.5em?

Now the `h2` will be
12 times one point five,

which is 18 pixels high.

We can also specify a pixel size
for the `h2` like we did for `body`,

and it would work the same way.

It depends on what you find easier.

And like I mentioned earlier, there are
lots more units that we could use

besides pixels and em.

These are just two
of the most popular units.

But if you're hungry for more,

check out the documentation
for `font-size`,

or search the Internet for more tutorials.

It's time to "super size" your font size!