1
00:00:01,269 --> 00:00:05,879
While percentages are a great tool for
building flexible layouts in CSS,

2
00:00:05,879 --> 00:00:09,760
they weren't designed specifically for
working with type.

3
00:00:10,850 --> 00:00:14,526
In this video, we'll learn two 
measurements, the em and

4
00:00:14,526 --> 00:00:17,990
the rem, that are considered 
font-relative units.

5
00:00:19,540 --> 00:00:21,370
We'll start with the em.

6
00:00:21,370 --> 00:00:25,660
The is a font-relative unit
because it's calculated based on

7
00:00:25,660 --> 00:00:28,740
a parent element's font size.

8
00:00:28,740 --> 00:00:32,948
Anytime we give an element's
property a value of 1em,

9
00:00:32,948 --> 00:00:37,700
that 1em is equal to the font
size value of the parent element.

10
00:00:39,380 --> 00:00:44,450
The difference between working with
percentages and ems can be subtle.

11
00:00:44,450 --> 00:00:49,175
Let's say I have a paragraph
with an h1 element above it,

12
00:00:49,175 --> 00:00:53,425
and I want the h1 to be twice
as large as my body copy.

13
00:00:53,425 --> 00:01:01,110
I could set my h1 to 2em or to 200%,
and the results would look the same.

14
00:01:01,110 --> 00:01:06,665
Since the default font size for
browsers tends to be 16 pixels,

15
00:01:06,665 --> 00:01:11,120
my h1 would now be 32 pixels
in size in both cases.

16
00:01:12,740 --> 00:01:17,965
However, let's say I wanted to increase
the spacing between the h1 and

17
00:01:17,965 --> 00:01:24,120
the paragraph, and maybe make it one 
and a half times the size of my font.

18
00:01:24,120 --> 00:01:27,220
When using ems, it's pretty simple.

19
00:01:27,220 --> 00:01:31,590
I'll set the top margin of
the paragraph to 1.5ems.

20
00:01:33,120 --> 00:01:34,853
As for using percentages,

21
00:01:34,853 --> 00:01:40,450
well, percentages weren't really
built to do this sort of calculation.

22
00:01:40,450 --> 00:01:42,865
This is where the em 
measurement shines,

23
00:01:42,865 --> 00:01:46,660
allowing you to make all kinds of
adjustments based on font size.

24
00:01:48,920 --> 00:01:54,565
In our previous video, we set 
our body copy to 20 pixels and

25
00:01:54,565 --> 00:02:00,446
the h1 element to 400%,
giving us an 80 pixel heading.

26
00:02:00,446 --> 00:02:04,390
The equivalent in ems would be 4em.

27
00:02:04,390 --> 00:02:09,425
If I preview in my browser,
the heading looks no different.

28
00:02:09,425 --> 00:02:13,090
20 pixels times 4em equals 80 pixels.

29
00:02:15,220 --> 00:02:21,395
We can also use ems to increase the margin
to 1.5 times the size of the font,

30
00:02:21,395 --> 00:02:25,205
something hard to achieve
using percentages.

31
00:02:33,190 --> 00:02:35,035
And let's check that out in the browser.

32
00:02:41,314 --> 00:02:43,070
Okay, that's interesting.

33
00:02:43,070 --> 00:02:49,010
We were probably expecting 30
pixels of margin underneath our h1.

34
00:02:49,010 --> 00:02:56,620
After all, our font size was 20 pixels,
and 20 times 1.5 is 30, right?

35
00:02:58,330 --> 00:03:02,780
But in my browser, I can see
the margin is far greater than that.

36
00:03:02,780 --> 00:03:05,169
Using my browser inspector,

37
00:03:05,169 --> 00:03:11,910
I can see that I am in fact looking at
120 pixels of margin at the bottom.

38
00:03:11,910 --> 00:03:12,730
What happened here?

39
00:03:14,220 --> 00:03:20,140
That's something important to understand
about ems, is the multiplication factor.

40
00:03:20,140 --> 00:03:24,702
Once we increased our
font size to 80 pixels,

41
00:03:24,702 --> 00:03:29,952
the margin is calculated
using this new measurement,

42
00:03:29,952 --> 00:03:34,303
and 80 pixels times 1.5 equals 120.

43
00:03:34,303 --> 00:03:38,945
If you're not a fan of this
cumulative effect, you're in luck.

44
00:03:38,945 --> 00:03:41,623
CSS offers another 
measurement called

45
00:03:41,623 --> 00:03:46,310
rems that always refers back
to the original font size.

46
00:03:46,310 --> 00:03:50,177
It's important to understand the 
difference between ems and rems, so

47
00:03:50,177 --> 00:03:51,990
let's examine them carefully.

48
00:03:53,510 --> 00:03:55,610
Here are two paragraphs.

49
00:03:55,610 --> 00:04:02,147
The body copy on the left and right is
set to 16 pixels, the browser default.

50
00:04:02,147 --> 00:04:06,258
Let's set the paragraph on
the left to font size 2em and

51
00:04:06,258 --> 00:04:09,680
the paragraph on the right
to font size 2rem.

52
00:04:10,800 --> 00:04:14,700
Each paragraph has a font
size of 32 pixels.

53
00:04:14,700 --> 00:04:17,520
There's no difference in
how they work just yet.

54
00:04:18,950 --> 00:04:25,300
If I bump the HTML font size up to
20 pixels, it's the same story.

55
00:04:25,300 --> 00:04:29,650
Each paragraph now has
a font size of 40 pixels.

56
00:04:29,650 --> 00:04:36,189
However, let's say each paragraph was
contained within a section element,

57
00:04:36,189 --> 00:04:40,557
and my section element is
set to font size 1.5em.

58
00:04:40,557 --> 00:04:44,260
The paragraphs have
different font sizes now.

59
00:04:44,260 --> 00:04:49,579
The one on the left, using ems,
is calculated by multiplying

60
00:04:49,579 --> 00:04:56,180
20 times 1.5 times 2, which equals 
60 pixels. That's because ems 

61
00:04:56,180 --> 00:04:59,691
include the measurement of 
parent elements when making

62
00:04:59,691 --> 00:05:01,110
size calculations.

63
00:05:02,450 --> 00:05:07,327
Meanwhile, my paragraph on
the right is still 40 pixels

64
00:05:07,327 --> 00:05:11,805
because rems always refer
back to the root font size.

65
00:05:11,805 --> 00:05:18,393
20 times 2 is still 40, and the rems
will ignore what the parent is doing.

66
00:05:18,393 --> 00:05:24,415
If inside that section element each
paragraph was inside a div and

67
00:05:24,415 --> 00:05:29,793
that div had the font size 0.75em,
what happens now?

68
00:05:29,793 --> 00:05:34,288
The math on the left
gets even more complex.

69
00:05:34,288 --> 00:05:41,460
20 times 1.5 times 0.75
times 2 equals 45 pixels.

70
00:05:41,460 --> 00:05:45,929
But the rems version on the right
remains steady at 40 pixels,

71
00:05:45,929 --> 00:05:50,000
since rems refer back to the root
font size no matter what.

72
00:05:52,110 --> 00:05:54,812
So let's put that in practice and

73
00:05:54,812 --> 00:06:00,035
see what happens when we use rems
instead of ems to style our h1.

74
00:06:04,219 --> 00:06:11,520
The heading font size is the same, 4 times
20 pixels still gives us 80 pixel type.

75
00:06:12,720 --> 00:06:19,561
But when I inspect, I see 30
pixels of margin underneath my h1,

76
00:06:19,561 --> 00:06:25,305
since our root font size
determined by our HTML element

77
00:06:25,305 --> 00:06:30,210
is 20 pixels, and 20 times 1.5 is 30.

78
00:06:30,210 --> 00:06:34,276
If I set the HTML element
back to 16 pixels,

79
00:06:34,276 --> 00:06:37,915
which would match the browser default,

80
00:06:42,779 --> 00:06:46,975
Now the margin beneath is 24 pixels,

81
00:06:46,975 --> 00:06:51,395
since 16 times 1.5 is 24.

82
00:06:51,395 --> 00:06:55,625
This is a great advantage to both the em 
and rem measurements.

83
00:06:55,625 --> 00:07:00,553
A change to the base font size will
cause everywhere you've used relative

84
00:07:00,553 --> 00:07:04,305
measurements to automatically adjust.

85
00:07:04,305 --> 00:07:07,539
If you were building
a responsive website and

86
00:07:07,539 --> 00:07:10,943
wanted the text to be
larger on a large monitor,

87
00:07:10,943 --> 00:07:15,893
making the adjustment would be
a snap using relative measurements.

88
00:07:15,893 --> 00:07:20,961
Whereas fixed pixel measurements
would require making

89
00:07:20,961 --> 00:07:25,818
adjustments to every single
measurement one by one.

90
00:07:25,818 --> 00:07:28,040
Let's make one last change.

91
00:07:28,040 --> 00:07:29,250
You'll notice that so far

92
00:07:29,250 --> 00:07:33,590
I've used the pixel measurement
to set the root font size.

93
00:07:33,590 --> 00:07:36,350
However, this could cause difficulty for

94
00:07:36,350 --> 00:07:40,960
users who need to adjust the base
font size for accessibility reasons.

95
00:07:42,540 --> 00:07:45,705
Under the Preferences
menu in Google Chrome,

96
00:07:45,705 --> 00:07:50,590
I'm going to click Appearance and
then Customize fonts.

97
00:07:50,590 --> 00:07:54,666
A user with low vision might use 
this setting to increase the size of 

98
00:07:54,666 --> 00:07:56,170
their web fonts.

99
00:07:56,170 --> 00:08:00,588
Let's try 24 pixels as an example.

100
00:08:00,588 --> 00:08:06,200
If we set the base font size of our HTML
element to a fixed size of 16 pixels,

101
00:08:06,200 --> 00:08:11,202
now we're actually overriding
the user's default preferences,

102
00:08:11,202 --> 00:08:16,400
which could cause difficulty for
users who can only read larger text.

103
00:08:18,540 --> 00:08:22,270
What happens if we switch
to a relative unit?

104
00:08:22,270 --> 00:08:25,728
I could change 16 pixels to 1em or

105
00:08:25,728 --> 00:08:30,239
100%. Both measurements 
work the same.

106
00:08:36,518 --> 00:08:42,118
I've included a comment to remind me
that 100% usually means 16 pixels,

107
00:08:42,118 --> 00:08:45,808
but the user might adjust
this on their own machine.

108
00:08:48,380 --> 00:08:54,790
When we preview our page, our root font
size is now 24 pixels rather than 16,

109
00:08:54,790 --> 00:08:59,335
since our layout now respects
the user's preferences.

110
00:08:59,335 --> 00:09:05,283
I'll switch that customized font setting
back to 16 pixels before I continue.

111
00:09:07,480 --> 00:09:10,230
So are rems superior to ems?

112
00:09:10,230 --> 00:09:11,890
Not necessarily.

113
00:09:11,890 --> 00:09:17,058
The math is easier to follow with rems,
but it really depends not only on personal

114
00:09:17,058 --> 00:09:22,400
preference, but also what your
typographic goals are in your layout.

115
00:09:22,400 --> 00:09:26,371
The important thing to remember
is the distinction between them.

116
00:09:26,371 --> 00:09:32,806
Ems include parent elements in calculating
size and spacing measurements,

117
00:09:32,806 --> 00:09:39,646
while rems always refer back to the root
font size determined by the HTML element.

118
00:09:39,646 --> 00:09:42,016
But whether you prefer ems or rems,

119
00:09:42,016 --> 00:09:46,290
both measurements are ideally
suited to working with web type.

120
00:09:47,310 --> 00:09:48,900
Try them out yourself.

121
00:09:48,900 --> 00:09:52,872
Experiment some more with
Developer Diane's resume and

122
00:09:52,872 --> 00:09:57,834
see what happens when you switch
between pixels, percentages, ems,

123
00:09:57,834 --> 00:10:01,490
and rems when working with font 
sizing and spacing.