1
00:00:00,400 --> 00:00:03,780
Over the next few stages, I'll be working
off the basic knowledge that

2
00:00:03,780 --> 00:00:08,000
Treehouse teacher, Gil Hernandez, covers
in his CSS lessons.

3
00:00:08,000 --> 00:00:09,200
If you haven't already,

4
00:00:09,200 --> 00:00:12,690
make sure to catch yourself up to speed
through the link in the teacher's notes.

5
00:00:13,960 --> 00:00:15,030
Getting proper sizes for

6
00:00:15,030 --> 00:00:18,950
your web fonts is crucial to good
typography and readability.

7
00:00:18,950 --> 00:00:22,350
All the hard work of choosing a good
typeface can go down the drain if

8
00:00:22,350 --> 00:00:24,540
the body size is illegibly small.

9
00:00:24,540 --> 00:00:27,430
Or, if it's out of proportion to your
headings.

10
00:00:27,430 --> 00:00:32,010
In this video, we'll discuss best
practices on setting this up in CSS.

11
00:00:32,010 --> 00:00:36,370
I've set up a new workspace here, with
some stripped-back, basic CSS.

12
00:00:36,370 --> 00:00:38,980
I've also left all the font sizes as
blank.

13
00:00:38,980 --> 00:00:40,868
So, we can change those throughout this
video.

14
00:00:40,868 --> 00:00:46,150
In the index.html, I'm utilizing copy from
The War of the Worlds,

15
00:00:46,150 --> 00:00:48,030
a book by H.G. Wells.

16
00:00:48,030 --> 00:00:51,100
I've also improvised some headings and
lists for this example.

17
00:00:52,140 --> 00:00:57,370
In our head section, we can see I'm
calling Alegreya from Google Fonts API.

18
00:00:57,370 --> 00:01:01,540
In the style, I've assigned our body font
family to be Alegreya,

19
00:01:01,540 --> 00:01:02,740
then Georgia, then Serif.

20
00:01:02,740 --> 00:01:06,620
If you want to check out Alegreya, you can
go to Google Fonts, and

21
00:01:06,620 --> 00:01:08,490
you can see the different styles
available.

22
00:01:08,490 --> 00:01:11,570
And, we're calling the normal, bold and
bold italic.

23
00:01:11,570 --> 00:01:14,800
I chose this typeface because its roots in
literature,

24
00:01:14,800 --> 00:01:17,110
due to the content at hand being a book.

25
00:01:17,110 --> 00:01:21,250
It also has diverse weights and italics,
and it includes small caps and

26
00:01:21,250 --> 00:01:21,970
other features.

27
00:01:23,020 --> 00:01:26,880
Our text size is set through our CSS font
size property.

28
00:01:26,880 --> 00:01:32,040
This value can be set with pixels, ems,
rems, percent and more.

29
00:01:32,040 --> 00:01:36,300
We'll first focus on pixels and then
discuss font sizing with em and rem.

30
00:01:37,330 --> 00:01:39,510
A pixel is a fixed unit of measure.

31
00:01:39,510 --> 00:01:43,610
It pertains to media with display screens,
such as a computer.

32
00:01:43,610 --> 00:01:47,280
For example, if we wanted to set our body
copy's font size in pixels,

33
00:01:47,280 --> 00:01:51,658
we would simply write font size 20 pixels
under our body.

34
00:01:51,658 --> 00:01:57,180
Then, we could set our h1 to be at 50
pixels through its font size.

35
00:01:58,730 --> 00:02:02,960
If we refresh the page, we see that our
body font size has increased, and

36
00:02:02,960 --> 00:02:04,790
our h1 font size has increased.

37
00:02:04,790 --> 00:02:08,986
That's because our default size there was
16 pixels, and is now at 20 pixels.

38
00:02:08,986 --> 00:02:11,190
And, our h1 is now at 50 pixels.

39
00:02:12,370 --> 00:02:15,930
Setting sizes with pixels is pretty
straightforward, and you can do that for

40
00:02:15,930 --> 00:02:16,800
any of the elements.

41
00:02:18,520 --> 00:02:23,060
A good rule of thumb is to set your body
text anywhere between 16 pixels,

42
00:02:23,060 --> 00:02:25,245
which is the default, to 24 pixels.

43
00:02:25,245 --> 00:02:28,980
Readers' eyes are usually a few feet from
screens, so

44
00:02:28,980 --> 00:02:30,810
these larger sizes are necessary for

45
00:02:30,810 --> 00:02:35,100
comfortable reading, whereas smaller text
can strain and tire their eyes.

46
00:02:35,100 --> 00:02:39,040
This ranges the verse too as every type
face is different.

47
00:02:39,040 --> 00:02:40,253
As we've seen before,

48
00:02:40,253 --> 00:02:43,990
the x height of a typeface can greatly
effect its perceived size.

49
00:02:43,990 --> 00:02:47,600
So, use what you've learned, and make a
judgement call on what looks best.

50
00:02:47,600 --> 00:02:50,980
When in doubt, lead toward the larger
size.

51
00:02:50,980 --> 00:02:53,950
Many web designers gravitated towards
setting the font size in

52
00:02:53,950 --> 00:02:58,480
CSS as pixels because of its simplicity,
consistency, and

53
00:02:58,480 --> 00:03:01,790
ability to create exact designs with a
fixed unit.

54
00:03:01,790 --> 00:03:03,610
But, because this is a fixed unit,

55
00:03:03,610 --> 00:03:06,550
it can create more work with responsive
typography.

56
00:03:06,550 --> 00:03:09,900
And, an accessibility problem can arise
with older versions of browsers,

57
00:03:09,900 --> 00:03:11,530
such as Internet Explorer.

58
00:03:11,530 --> 00:03:14,910
When font sizes are set in pixels, users
cannot increase or

59
00:03:14,910 --> 00:03:19,000
decrease the text size on a page through
the browser preferences.

60
00:03:19,000 --> 00:03:21,360
This can create problems with
accessibility.

61
00:03:21,360 --> 00:03:24,720
This issue can somewhat be skirted through
zooming in on those browsers.

62
00:03:24,720 --> 00:03:26,740
But, let's look at a commonly practiced
alternative.

63
00:03:28,070 --> 00:03:33,690
Whereas pixels are a fixed unit, ems and
rems are relative units for font sizing.

64
00:03:33,690 --> 00:03:36,560
Ems are relevent to its parent space size.

65
00:03:36,560 --> 00:03:40,660
For example, most browsers default to a
font size of 16 pixels,

66
00:03:40,660 --> 00:03:41,890
which is equal to one em.

67
00:03:41,890 --> 00:03:50,250
If we set our body at one em, and our h1
at two em, let's see what happens.

68
00:03:51,890 --> 00:03:56,580
All right, our body has now gone back to
16 pixels, which is the default.

69
00:03:56,580 --> 00:03:58,280
And our h1 is two times that,

70
00:03:58,280 --> 00:04:03,050
which would make it 32 pixels, because
it's relative to the body font size of 1m.

71
00:04:04,180 --> 00:04:11,590
Lastly, if we change the containers class
to a font size of ten pixels [SOUND],

72
00:04:11,590 --> 00:04:16,497
we can see that everything on the page has
changed.

73
00:04:16,497 --> 00:04:20,390
That's because the m is now relative to
those ten pixels.

74
00:04:20,390 --> 00:04:25,530
So, one m is equal to ten pixels, and two
m is equal to 20 pixels.

75
00:04:25,530 --> 00:04:29,070
This can be incredibly helpful, scalable
and powerful for

76
00:04:29,070 --> 00:04:32,730
responsive typography by saving time and
extra code.

77
00:04:32,730 --> 00:04:35,750
It also corrects accessibility issues if a
user needs to

78
00:04:35,750 --> 00:04:38,780
change the default font size of their
browser.

79
00:04:38,780 --> 00:04:41,441
But, you want to be on the lookout for a
compounding m's,

80
00:04:41,441 --> 00:04:46,000
meaning nested elements font sizes can
begin to multiply on top of each parent.

81
00:04:47,340 --> 00:04:52,910
For example, let's set the li element to
be a font size of 0.8m.

82
00:04:52,910 --> 00:04:55,650
We'll also remove this ten pixel font size
for our container.

83
00:04:57,410 --> 00:04:58,450
We'll save and refresh.

84
00:04:59,660 --> 00:05:02,830
Now, we see that our paragraphs are at one
m, and

85
00:05:02,830 --> 00:05:05,220
there our li's are 0.8 of that one m.

86
00:05:05,220 --> 00:05:09,820
And then the nested li's under that are at
0.8 of that 0.8.

87
00:05:09,820 --> 00:05:14,370
That's because these nested elements are
compounding on top of each other.

88
00:05:14,370 --> 00:05:14,940
To fix this,

89
00:05:14,940 --> 00:05:20,010
you can set all nested elements like li li
to have a font size of one m.