1
00:00:00,960 --> 00:00:05,410
Rems, which stand for route ems, have been
on the rise in web design.

2
00:00:05,410 --> 00:00:07,760
Instead of being relative to it's parent
class or

3
00:00:07,760 --> 00:00:12,910
element like an em, Rems are relative to
the route em, set to the html.

4
00:00:12,910 --> 00:00:17,690
As mentioned before, the common default
font size for browsers is 16 pixels.

5
00:00:17,690 --> 00:00:21,320
So in this case, one Rem will always equal
16 pixels.

6
00:00:21,320 --> 00:00:23,810
Instead of being relative to a parent
class, or element.

7
00:00:24,970 --> 00:00:29,720
In our example, let's use rems, or root
ems, instead of ems.

8
00:00:29,720 --> 00:00:32,550
We know that 16 pixels is the browser
default, so

9
00:00:32,550 --> 00:00:37,110
here, 1.25 rem will be equal to 24 pixels.

10
00:00:38,320 --> 00:00:44,190
Then we can set our h1 at 3 rem, which
will be equal to 48 pixels.

11
00:00:44,190 --> 00:00:45,910
Let's save and refresh.

12
00:00:45,910 --> 00:00:49,460
Our font sizes have changed based on their
rem values.

13
00:00:49,460 --> 00:00:53,698
Even if we add a container value of ten
pixels, and we'll set this to be

14
00:00:53,698 --> 00:00:58,460
1.25 rem for our paragraphs, we can
refresh, and we can see that these do

15
00:00:58,460 --> 00:01:03,440
not change because they're referencing the
root element and not the parent element.

16
00:01:03,440 --> 00:01:06,340
This also corrects the problem of
compounding ems and

17
00:01:06,340 --> 00:01:10,550
still provides the benefits of scalability
for responsive design.

18
00:01:10,550 --> 00:01:14,320
It should be noted, that Internet Explorer
8, does not support rems.

19
00:01:14,320 --> 00:01:19,500
So if IE8 support is required, then you
would want to set a fallback in pixels.

20
00:01:19,500 --> 00:01:22,590
I've also provided some further reading in
a link to tools that

21
00:01:22,590 --> 00:01:26,150
help size references with pixels to ems
and rems.

22
00:01:26,150 --> 00:01:31,130
Lastly, sizing your headings, paragraphs
and other text elements may seem a little

23
00:01:31,130 --> 00:01:35,330
tricky, and it's not a great idea to just
guess by shooting in the dark.

24
00:01:35,330 --> 00:01:38,760
This can lead to inconsistent heading and
paragraph sizes.

25
00:01:38,760 --> 00:01:42,560
This is why following a typographic scale
can help immensely.

26
00:01:42,560 --> 00:01:47,060
A scale gradually increases at a certain
rate to ensure consistent proportions for

27
00:01:47,060 --> 00:01:47,990
your font sizes.

28
00:01:49,000 --> 00:01:54,780
The classic typographic scale increases in
intervals of one, two, three and then 12.

29
00:01:54,780 --> 00:01:56,560
It's been used for centuries and

30
00:01:56,560 --> 00:02:01,140
is reliable to adhere to especially if
you're using 16 pixels as your base size.

31
00:02:02,320 --> 00:02:05,140
I liked our body copy at about 20 pixels,
but

32
00:02:05,140 --> 00:02:08,790
that size is not in that typographic scale
we just looked at.

33
00:02:08,790 --> 00:02:09,710
Don't fret.

34
00:02:09,710 --> 00:02:13,440
Let's take a look at typescale.com and
build one out.

35
00:02:13,440 --> 00:02:16,990
This site is incredibly helpful because
you can set your base size,

36
00:02:16,990 --> 00:02:21,200
test different scales, and even import
Google webfonts to the site.

37
00:02:21,200 --> 00:02:22,030
So let's set ours up.

38
00:02:24,150 --> 00:02:28,900
We'll put 20 pixels here, and we see it's
in reference to 1.25 em.

39
00:02:28,900 --> 00:02:30,390
We can set our scale.

40
00:02:30,390 --> 00:02:32,740
I like the major third for our example.

41
00:02:32,740 --> 00:02:35,270
If we wanted to, we can even see what our
typeface, alegreya,

42
00:02:35,270 --> 00:02:39,750
looks like by writing it in here, and then
copying it and

43
00:02:39,750 --> 00:02:44,600
pasting it into this font family, and here
it appears.

44
00:02:44,600 --> 00:02:49,400
So we're now presented with different em
values to build our scale.

45
00:02:49,400 --> 00:02:55,405
We'll start with this base size at 1.25 em
so I wanna set that for our body copy.

46
00:02:55,405 --> 00:03:00,858
[BLANK_AUDIO]

47
00:03:00,858 --> 00:03:06,240
So now we're given some sizes in em's and
this largest one will be our h1,

48
00:03:06,240 --> 00:03:10,110
the next largest is our h2, h3, and so
forth.

49
00:03:10,110 --> 00:03:13,380
This 1 em is what we want our paragraphs
to be at.

50
00:03:13,380 --> 00:03:17,090
Now, in our design, I've already set these
up down here as h1, h2, h3,

51
00:03:17,090 --> 00:03:20,230
with those corresponding sizes.

52
00:03:20,230 --> 00:03:23,150
I didn't go all the way to h6 because our
design doesn't have all those

53
00:03:23,150 --> 00:03:23,800
heading numbers.

54
00:03:24,900 --> 00:03:28,350
We could also set the p element to be 1 em
if we like, but

55
00:03:28,350 --> 00:03:30,320
this is set by default in the browser.

56
00:03:31,390 --> 00:03:35,110
Remember, these are relative to our body
font size of 1.25 em.

57
00:03:35,110 --> 00:03:37,840
So let's go check out what the scale looks
like.

58
00:03:39,530 --> 00:03:40,330
Great.

59
00:03:40,330 --> 00:03:43,170
Our typographic scale looks good and it's
intact, and

60
00:03:43,170 --> 00:03:49,750
if we were change our body font size here,
let's say to 1 em,

61
00:03:49,750 --> 00:03:53,630
our whole scale changes with it which is
very nice, and it's great for responsive

62
00:03:53,630 --> 00:03:58,000
design, but I really want this to be 1.25
em, so I'll move it back to that.

63
00:03:59,100 --> 00:04:01,660
Now that that's set up, we still have a
little ways to go,

64
00:04:01,660 --> 00:04:05,040
but getting a proper body size and scale
is a great place to start.

65
00:04:06,350 --> 00:04:11,070
To summarize this lesson we saw that
pixels give the designer much control over

66
00:04:11,070 --> 00:04:15,595
the design but lack easy scalability and
accessibility.

67
00:04:15,595 --> 00:04:18,810
Em's are easily scalable but can be
confusing at first and

68
00:04:18,810 --> 00:04:22,830
have issues with compounding font sizes
and nested elements.

69
00:04:22,830 --> 00:04:24,730
Rems are root ems.

70
00:04:24,730 --> 00:04:27,490
They're growing increasingly in popular
use because they bring

71
00:04:27,490 --> 00:04:32,170
the scalability of ems without that hassle
of compounding font sizes.

72
00:04:32,170 --> 00:04:33,940
Once you've set your body text size,

73
00:04:33,940 --> 00:04:37,770
he sure to build the rest of the sizes
based on a typographic scale.

74
00:04:37,770 --> 00:04:39,220
That's it for font sizing.

75
00:04:39,220 --> 00:04:41,060
Next we'll look at measure and space