1
00:00:00,526 --> 00:00:03,525
We can also use CSS to change 
the size of our text.

2
00:00:03,666 --> 00:00:06,564
As you can see by looking at 
the headings on this page

3
00:00:06,564 --> 00:00:09,357
compared to the paragraphs, 
the browser already provides

4
00:00:09,357 --> 00:00:12,248
default styles with different sizes 
for different elements.

5
00:00:12,352 --> 00:00:13,643
There's a body font size,

6
00:00:13,643 --> 00:00:15,936
and bigger sizes 
for each level of heading.

7
00:00:16,102 --> 00:00:18,650
Sometimes we want to tweak 
those sizes, though.

8
00:00:18,857 --> 00:00:22,206
And we can do that with the CSS 
`font-size` property.

9
00:00:22,419 --> 00:00:23,853
For example:

10
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?

11
00:00:28,948 --> 00:00:31,062
Well, we'll go to the `style` tag,

12
00:00:31,102 --> 00:00:34,590
and we'll add a CSS rule 
for the `body` tag.

13
00:00:34,889 --> 00:00:39,247
And then inside that, 
put a `font-size` property.

14
00:00:39,477 --> 00:00:42,669
Now, what should the value be 
for `font-size`?

15
00:00:42,959 --> 00:00:45,654
How do we measure font size, anyway?

16
00:00:45,930 --> 00:00:47,954
That's actually 
a really good question.

17
00:00:47,954 --> 00:00:50,267
Because there are at least 
ten different units

18
00:00:50,267 --> 00:00:52,358
that CSS supports for `font-size`.

19
00:00:52,684 --> 00:00:55,674
Let's start with a unit 
that you've seen before: pixels.

20
00:00:55,853 --> 00:00:58,623
We used pixels to decide 
how big to make images.

21
00:00:58,623 --> 00:01:00,993
And we'll keep using them a lot in CSS.

22
00:01:01,286 --> 00:01:02,985
Let's try 11 pixels.

23
00:01:04,040 --> 00:01:06,145
Hah. Everything got smaller.

24
00:01:06,405 --> 00:01:08,510
Even the headings got smaller, actually.

25
00:01:08,786 --> 00:01:11,172
Why did the headings get smaller, too?

26
00:01:11,363 --> 00:01:15,316
Shouldn't they be whatever pixel size 
the browser set them to before?

27
00:01:15,502 --> 00:01:16,288
No.

28
00:01:16,432 --> 00:01:21,954
Because the default browser style 
for headings isn't specified as a pixel.

29
00:01:21,962 --> 00:01:25,207
It's specified using a different unit, 
called "em".

30
00:01:25,495 --> 00:01:27,450
And that unit is a relative unit

31
00:01:27,450 --> 00:01:31,695
that makes the heading font size 
scale proportionally to the body font.

32
00:01:32,099 --> 00:01:33,817
Let me show you what I mean.

33
00:01:34,055 --> 00:01:36,439
Let's go to our `h2` style rule

34
00:01:36,574 --> 00:01:38,904
and add the `font-size` property.

35
00:01:39,446 --> 00:01:44,489
This time, instead of thinking in pixels,
I'm going to think relatively.

36
00:01:44,701 --> 00:01:49,903
How much bigger, relatively, 
do we want ``s compared to body text?

37
00:01:50,173 --> 00:01:52,857
Maybe, two times bigger?

38
00:01:53,305 --> 00:01:56,763
For that, we write `2em`.

39
00:01:56,992 --> 00:02:00,171
What actually happened now is that 
the browser has calculated

40
00:02:00,171 --> 00:02:01,608
a pixel size for the font.

41
00:02:01,810 --> 00:02:05,048
The browser knows that 
the body font size is 11 pixels.

42
00:02:05,048 --> 00:02:08,055
And you told it that `h2` should be 
two times bigger,

43
00:02:08,055 --> 00:02:11,574
so now all the ``s 
are 22 pixels high.

44
00:02:12,142 --> 00:02:16,576
If we change the body font size 
to 12 pixels,

45
00:02:16,576 --> 00:02:18,932
then how big will the ``s be?

46
00:02:19,267 --> 00:02:21,494
That's right, 24 pixels.

47
00:02:21,868 --> 00:02:26,345
What if we change the `h2` font size 
to 1.5em?

48
00:02:26,760 --> 00:02:30,805
Now the `h2` will be 
12 times one point five,

49
00:02:31,023 --> 00:02:32,666
which is 18 pixels high.

50
00:02:33,273 --> 00:02:37,754
We can also specify a pixel size 
for the `h2` like we did for `body`,

51
00:02:37,754 --> 00:02:39,521
and it would work the same way.

52
00:02:39,634 --> 00:02:41,502
It depends on what you find easier.

53
00:02:41,502 --> 00:02:45,258
And like I mentioned earlier, there are
lots more units that we could use

54
00:02:45,258 --> 00:02:46,922
besides pixels and em.

55
00:02:47,224 --> 00:02:49,568
These are just two 
of the most popular units.

56
00:02:49,568 --> 00:02:51,016
But if you're hungry for more,

57
00:02:51,016 --> 00:02:53,193
check out the documentation 
for `font-size`,

58
00:02:53,193 --> 00:02:55,402
or search the Internet for more tutorials.

59
00:02:55,503 --> 00:02:58,883
It's time to "super size" your font size!