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!