1
00:00:01,020 --> 00:00:07,590
So this video is going to focus on fonts in success and obviously having fun and picking fonts for a

2
00:00:07,580 --> 00:00:09,880
web page is really really important.

3
00:00:10,110 --> 00:00:14,660
But we're also going to cover a lot of other properties that are related to fonts and to text.

4
00:00:14,730 --> 00:00:23,470
And those are font family font size font weight line height text a line and text decoration.

5
00:00:23,610 --> 00:00:26,530
So in this video we're going to stop and cover all of those.

6
00:00:26,730 --> 00:00:32,670
And the first thing we're going to do is get our simple text up that we're going to style.

7
00:00:33,030 --> 00:00:39,080
So I have a simple Funk's that is Jim M-file and I'm going to go ahead and add in your mouth.

8
00:00:39,080 --> 00:00:42,660
So I'm just going to do an H-1 so that we can see a header and style.

9
00:00:42,750 --> 00:00:44,180
And then some paragraphs.

10
00:00:44,490 --> 00:00:51,720
So I'm just going to call this font's demo page and then the next thing rather than just typing some

11
00:00:51,720 --> 00:00:57,450
random words or some jibberish like this which actually doesn't really reflect what the English language

12
00:00:57,450 --> 00:00:59,580
looks like on a page.

13
00:00:59,620 --> 00:01:02,610
I'm going to use a Lorem Epsom generator.

14
00:01:02,610 --> 00:01:08,640
So for those of you who don't know Lorem Ipsum generators are used to generate a bunch of random text

15
00:01:08,730 --> 00:01:09,980
that is English words.

16
00:01:09,990 --> 00:01:13,550
It doesn't mean anything at all but it at least looks like real words.

17
00:01:13,560 --> 00:01:15,570
So it is placeholder text.

18
00:01:16,110 --> 00:01:23,310
So I have it kind of funny article open of 10 of the best or the most hilarious Lorem Ipsum generator's

19
00:01:23,310 --> 00:01:24,350
for web designers.

20
00:01:24,570 --> 00:01:30,480
And I'm just going to go with this first one bacon ipsum so I'm going to generate a few paragraphs here

21
00:01:30,480 --> 00:01:31,090
.

22
00:01:31,560 --> 00:01:31,910
Quick.

23
00:01:31,920 --> 00:01:34,370
Give me bacon and you can see it just give me some text.

24
00:01:34,470 --> 00:01:41,080
But this is real text that actually looks like a potential you know something you would have on a Web

25
00:01:41,070 --> 00:01:41,670
site.

26
00:01:41,700 --> 00:01:43,430
It doesn't look like just jibberish like this.

27
00:01:43,440 --> 00:01:45,890
So it's a better representation of a font.

28
00:01:46,110 --> 00:01:48,010
So I'm going to go ahead and paste that in.

29
00:01:48,120 --> 00:01:52,100
I'm going to make two paragraphs out of this.

30
00:01:54,140 --> 00:01:54,570
All right.

31
00:01:54,570 --> 00:01:59,510
And we'll leave it at that for now and we'll come back and add a little bit later.

32
00:01:59,670 --> 00:02:02,580
Let's just open this up and see what we have.

33
00:02:03,300 --> 00:02:03,720
OK.

34
00:02:03,750 --> 00:02:08,670
So here's a site that we're going to be styling and the first thing that we want to do is talk about

35
00:02:09,030 --> 00:02:11,840
how do we actually just assign a font to anything.

36
00:02:12,180 --> 00:02:17,790
And before we can even do that we have to talk about what font we even have available to us in the browser

37
00:02:17,790 --> 00:02:18,510
.

38
00:02:18,510 --> 00:02:23,370
So there's no easy answer as to which fonts a computer has available in the browser.

39
00:02:23,550 --> 00:02:26,420
And that's because they're different on every machine.

40
00:02:26,670 --> 00:02:28,360
And I have this site open here.

41
00:02:28,640 --> 00:02:30,070
She says fonts stack.

42
00:02:30,270 --> 00:02:34,250
That actually shows depending on if you're on a Mac or Windows.

43
00:02:34,350 --> 00:02:38,280
What's the percentage of those machines are that have a given font.

44
00:02:38,670 --> 00:02:42,820
And so these are just kind of the standard web fonts that we'll see a lot of the time.

45
00:02:42,840 --> 00:02:51,030
So if we look at one like Helvetica you can see that every Mac has America but very few windows have

46
00:02:51,450 --> 00:02:52,130
installed.

47
00:02:52,290 --> 00:02:55,430
And so these are the system fonts that come on a machine.

48
00:02:55,950 --> 00:03:00,650
So these are not the only fonts that you can use but these are some that are safer bets.

49
00:03:00,660 --> 00:03:05,790
So if you wanted one that he knew for sure would work on every machine you would pick like Arial black

50
00:03:06,270 --> 00:03:07,590
or aerial.

51
00:03:08,160 --> 00:03:10,310
Obviously these fonts though are pretty limited.

52
00:03:10,350 --> 00:03:14,030
So we're going to see how we actually include custom fonts later in this video.

53
00:03:14,130 --> 00:03:16,230
But for now let's just pick one of these.

54
00:03:16,260 --> 00:03:19,750
So let's go with Ariel Sharon Ariel.

55
00:03:20,010 --> 00:03:24,720
So to use that we're going to assign that to our paragraphs here.

56
00:03:25,370 --> 00:03:27,700
So we're going to go into my C S S which I have linked here.

57
00:03:27,720 --> 00:03:31,840
Styles that C S S and the property is called the font family.

58
00:03:32,040 --> 00:03:40,820
So I'm going to select paragraphs and I'm going to say font family is Arial just like that.

59
00:03:41,060 --> 00:03:46,390
And if I refresh you'll see I now have Arial font here.

60
00:03:46,410 --> 00:03:51,830
One quick note I can also put quotes around this which is totally valid.

61
00:03:51,840 --> 00:03:57,200
Sometimes you'll have to do this if you have a font that has a number at the beginning.

62
00:03:57,200 --> 00:04:02,160
Not that this is a real font but if that was I would have to put quotes around it because this is not

63
00:04:02,160 --> 00:04:04,360
a valid CSSA line.

64
00:04:04,830 --> 00:04:10,660
OK so I can give it Aeriel like that and you can see we get Aeriel.

65
00:04:10,830 --> 00:04:12,970
So there are other fonts you can play around with.

66
00:04:12,990 --> 00:04:16,340
Let's try Georgia.

67
00:04:16,800 --> 00:04:19,290
So let's give our H-1 Georgia

68
00:04:24,150 --> 00:04:28,520
just like that refresh.

69
00:04:28,860 --> 00:04:33,100
And you can see it changes font so don't despair if you're a designer.

70
00:04:33,120 --> 00:04:36,810
We're going to see how to use a lot more fonts and how to include custom ones.

71
00:04:37,110 --> 00:04:42,390
But for now we're just going to focus on the built in system default fonts which are a little bit limited

72
00:04:42,410 --> 00:04:42,500
.

73
00:04:42,600 --> 00:04:48,780
And even then there's no guarantee as you can see there's not any that 100 percent of machines have

74
00:04:51,570 --> 00:04:57,370
so the next property I want to talk about is font size so font size does sort of sounds like it controls

75
00:04:57,490 --> 00:05:00,990
how big the font is or how small the font is of a given element.

76
00:05:01,240 --> 00:05:07,230
So we can select something and let's do it to our H-1 and let's make each one a lot bigger.

77
00:05:07,590 --> 00:05:12,460
So we do font size and there are different units that we can use.

78
00:05:12,450 --> 00:05:18,170
And the first one is called pixels or peaks and we've seen it a little bit before with Forder.

79
00:05:18,330 --> 00:05:25,770
So we're going to just give it something huge like 200 pics and if we go back to the browser you can

80
00:05:25,770 --> 00:05:31,740
see if we get this gigantic fun 200 pixels what we can do just in case.

81
00:05:31,750 --> 00:05:35,640
If you want to play around with font sizes you're not sure how big you want this to be.

82
00:05:35,680 --> 00:05:36,610
We can inspect it

83
00:05:40,410 --> 00:05:46,470
and then we can go over here and we can click on this and we can change this number so we can change

84
00:05:46,470 --> 00:05:55,190
it to 100 or 60 or 85 or whatever we want and we can play around in the browser and just see it the

85
00:05:55,200 --> 00:05:57,010
change reflected immediately.

86
00:05:57,270 --> 00:06:01,570
So that's a really nice feature when you're playing around with font sizes.

87
00:06:01,560 --> 00:06:06,310
So as I mentioned though this is not the only way of picking a font size.

88
00:06:06,450 --> 00:06:07,650
It's not the only unit.

89
00:06:07,900 --> 00:06:15,730
There's another popular unit called IEMs and E-M is basically a relative font size.

90
00:06:15,840 --> 00:06:23,250
So I'm going to go ahead and open up the font size M.D and page and go to the E-M section and I'm going

91
00:06:23,250 --> 00:06:29,790
to read from here for just a moment the size of an E-M value is dynamic and E-M is equal to the size

92
00:06:29,790 --> 00:06:33,500
of the font that applies to the parent of the element in question.

93
00:06:33,880 --> 00:06:36,900
So what that really means is I'm going to show you a quick example.

94
00:06:37,320 --> 00:06:47,580
If I put Let's go inside of here under strip steak I'm going to put a span element in all that a span

95
00:06:47,580 --> 00:06:48,120
does.

96
00:06:48,120 --> 00:06:50,300
This is probably our first time seeing them.

97
00:06:50,380 --> 00:06:57,510
Is it just a way to group text together without actually making a difference visually so it's just a

98
00:06:57,510 --> 00:07:01,050
way to kind of make an element around the word strip steak.

99
00:07:01,050 --> 00:07:03,470
But if I refresh.

100
00:07:03,510 --> 00:07:04,710
Nothing changes at all.

101
00:07:04,750 --> 00:07:09,230
Well the search for the font size but nothing changes down here and where I have this span.

102
00:07:09,780 --> 00:07:13,540
So it's a way to highlight or to single out some line and then do something to it.

103
00:07:13,550 --> 00:07:15,620
And we're just going to make it a lot bigger.

104
00:07:16,020 --> 00:07:22,890
So we use an E-M or we use the E-M units and we're if we wanted to make this double the size of the

105
00:07:22,890 --> 00:07:26,380
font of this paragraph we just go into here.

106
00:07:26,520 --> 00:07:38,290
So let's span and then we just say font size 2.0 E-M and so that is going to be double the font size

107
00:07:38,460 --> 00:07:41,940
of the enclosing element of the parent element which is this paragraph.

108
00:07:41,940 --> 00:07:49,220
So you'll see that here if I refresh this span is double the font size of this.

109
00:07:49,240 --> 00:07:53,170
But we didn't actually explicitly tell it how many pixels to make it.

110
00:07:53,160 --> 00:07:56,430
It just knew how big this was and then it doubled it.

111
00:07:56,440 --> 00:08:02,430
So this is dynamic which is why a lot of people like it is that if for some reason I needed to change

112
00:08:02,440 --> 00:08:05,930
the font size of this this would automatically change.

113
00:08:06,190 --> 00:08:08,320
So let me show you another example.

114
00:08:08,460 --> 00:08:12,600
Let's increase the font size of paragraph's

115
00:08:16,800 --> 00:08:27,140
font size and let's make them 40 pixels and you can see that this still stays double.

116
00:08:27,150 --> 00:08:32,410
So then the one question about E-M that comes up a lot is what is the initial value of v and what is

117
00:08:32,400 --> 00:08:33,500
the top level.

118
00:08:33,580 --> 00:08:38,840
Because we can't just keep inheriting from a parent and that parent there has to be some source of truth

119
00:08:38,840 --> 00:08:38,860
.

120
00:08:38,860 --> 00:08:45,120
There has to be like at the very top level element that actually has a font size and that actually changes

121
00:08:45,660 --> 00:08:48,580
depending on the browser which is a little bit frustrating.

122
00:08:49,050 --> 00:08:55,480
But according to SDN it's usually about 16 pixels so that's no guarantee but it's usually around 16

123
00:08:55,480 --> 00:08:56,060
pixels.

124
00:08:56,160 --> 00:09:01,680
So what most people would do is set a font size on the body at the very beginning.

125
00:09:01,950 --> 00:09:07,960
So something like this body font size.

126
00:09:08,220 --> 00:09:16,860
And let's give it a let's do something really small to start like 10 pixels and then must change or

127
00:09:16,890 --> 00:09:23,560
each one so that it's five times larger than the body.

128
00:09:23,620 --> 00:09:30,330
So that's going to look like five porno E-M and then we go on our paragraph to be twice as large as

129
00:09:30,340 --> 00:09:31,090
the body.

130
00:09:31,120 --> 00:09:33,000
So 2.0 E-M.

131
00:09:33,180 --> 00:09:37,230
And then lastly we want our span to be twice as large as a paragraph.

132
00:09:37,360 --> 00:09:40,810
So that's also 2.0 because remember it's nested inside.

133
00:09:41,080 --> 00:09:46,710
So let's do some text outside of a paragraph just like that and you'll see it's pretty small.

134
00:09:47,010 --> 00:09:50,080
And then we made this five times larger than this.

135
00:09:50,160 --> 00:09:51,820
We made this twice as large.

136
00:09:52,000 --> 00:09:54,300
And this is twice as large as the paragraph