WEBVTT

00:00:00.526 --> 00:00:03.525
We can also use CSS to change 
the size of our text.

00:00:03.666 --> 00:00:06.564
As you can see by looking at 
the headings on this page

00:00:06.564 --> 00:00:09.357
compared to the paragraphs, 
the browser already provides

00:00:09.357 --> 00:00:12.248
default styles with different sizes 
for different elements.

00:00:12.352 --> 00:00:13.643
There's a body font size,

00:00:13.643 --> 00:00:15.936
and bigger sizes 
for each level of heading.

00:00:16.102 --> 00:00:18.650
Sometimes we want to tweak 
those sizes, though.

00:00:18.857 --> 00:00:22.206
And we can do that with the CSS 
`font-size` property.

00:00:22.419 --> 00:00:23.853
For example:

00:00:23.853 --> 00:00:28.643
What if we want all of the text on our 
page to be just a little bit smaller?

00:00:28.948 --> 00:00:31.062
Well, we'll go to the `style` tag,

00:00:31.102 --> 00:00:34.590
and we'll add a CSS rule 
for the `body` tag.

00:00:34.889 --> 00:00:39.247
And then inside that, 
put a `font-size` property.

00:00:39.477 --> 00:00:42.669
Now, what should the value be 
for `font-size`?

00:00:42.959 --> 00:00:45.654
How do we measure font size, anyway?

00:00:45.930 --> 00:00:47.954
That's actually 
a really good question.

00:00:47.954 --> 00:00:50.267
Because there are at least 
ten different units

00:00:50.267 --> 00:00:52.358
that CSS supports for `font-size`.

00:00:52.684 --> 00:00:55.674
Let's start with a unit 
that you've seen before: pixels.

00:00:55.853 --> 00:00:58.623
We used pixels to decide 
how big to make images.

00:00:58.623 --> 00:01:00.993
And we'll keep using them a lot in CSS.

00:01:01.286 --> 00:01:02.985
Let's try 11 pixels.

00:01:04.040 --> 00:01:06.145
Hah. Everything got smaller.

00:01:06.405 --> 00:01:08.510
Even the headings got smaller, actually.

00:01:08.786 --> 00:01:11.172
Why did the headings get smaller, too?

00:01:11.363 --> 00:01:15.316
Shouldn't they be whatever pixel size 
the browser set them to before?

00:01:15.502 --> 00:01:16.288
No.

00:01:16.432 --> 00:01:21.954
Because the default browser style 
for headings isn't specified as a pixel.

00:01:21.962 --> 00:01:25.207
It's specified using a different unit, 
called "em".

00:01:25.495 --> 00:01:27.450
And that unit is a relative unit

00:01:27.450 --> 00:01:31.695
that makes the heading font size 
scale proportionally to the body font.

00:01:32.099 --> 00:01:33.817
Let me show you what I mean.

00:01:34.055 --> 00:01:36.439
Let's go to our `h2` style rule

00:01:36.574 --> 00:01:38.904
and add the `font-size` property.

00:01:39.446 --> 00:01:44.489
This time, instead of thinking in pixels,
I'm going to think relatively.

00:01:44.701 --> 00:01:49.903
How much bigger, relatively, 
do we want ``s compared to body text?

00:01:50.173 --> 00:01:52.857
Maybe, two times bigger?

00:01:53.305 --> 00:01:56.763
For that, we write `2em`.

00:01:56.992 --> 00:02:00.171
What actually happened now is that 
the browser has calculated

00:02:00.171 --> 00:02:01.608
a pixel size for the font.

00:02:01.810 --> 00:02:05.048
The browser knows that 
the body font size is 11 pixels.

00:02:05.048 --> 00:02:08.055
And you told it that `h2` should be 
two times bigger,

00:02:08.055 --> 00:02:11.574
so now all the ``s 
are 22 pixels high.

00:02:12.142 --> 00:02:16.576
If we change the body font size 
to 12 pixels,

00:02:16.576 --> 00:02:18.932
then how big will the ``s be?

00:02:19.267 --> 00:02:21.494
That's right, 24 pixels.

00:02:21.868 --> 00:02:26.345
What if we change the `h2` font size 
to 1.5em?

00:02:26.760 --> 00:02:30.805
Now the `h2` will be 
12 times one point five,

00:02:31.023 --> 00:02:32.666
which is 18 pixels high.

00:02:33.273 --> 00:02:37.754
We can also specify a pixel size 
for the `h2` like we did for `body`,

00:02:37.754 --> 00:02:39.521
and it would work the same way.

00:02:39.634 --> 00:02:41.502
It depends on what you find easier.

00:02:41.502 --> 00:02:45.258
And like I mentioned earlier, there are
lots more units that we could use

00:02:45.258 --> 00:02:46.922
besides pixels and em.

00:02:47.224 --> 00:02:49.568
These are just two 
of the most popular units.

00:02:49.568 --> 00:02:51.016
But if you're hungry for more,

00:02:51.016 --> 00:02:53.193
check out the documentation 
for `font-size`,

00:02:53.193 --> 00:02:55.402
or search the Internet for more tutorials.

00:02:55.503 --> 00:02:58.883
It's time to "super size" your font size!