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!