So this video is going to focus on fonts in success and obviously having fun and picking fonts for a
web page is really really important.
But we're also going to cover a lot of other properties that are related to fonts and to text.
And those are font family font size font weight line height text a line and text decoration.
So in this video we're going to stop and cover all of those.
And the first thing we're going to do is get our simple text up that we're going to style.
So I have a simple Funk's that is Jim M-file and I'm going to go ahead and add in your mouth.
So I'm just going to do an H-1 so that we can see a header and style.
And then some paragraphs.
So I'm just going to call this font's demo page and then the next thing rather than just typing some
random words or some jibberish like this which actually doesn't really reflect what the English language
looks like on a page.
I'm going to use a Lorem Epsom generator.
So for those of you who don't know Lorem Ipsum generators are used to generate a bunch of random text
that is English words.
It doesn't mean anything at all but it at least looks like real words.
So it is placeholder text.
So I have it kind of funny article open of 10 of the best or the most hilarious Lorem Ipsum generator's
for web designers.
And I'm just going to go with this first one bacon ipsum so I'm going to generate a few paragraphs here
.
Quick.
Give me bacon and you can see it just give me some text.
But this is real text that actually looks like a potential you know something you would have on a Web
site.
It doesn't look like just jibberish like this.
So it's a better representation of a font.
So I'm going to go ahead and paste that in.
I'm going to make two paragraphs out of this.
All right.
And we'll leave it at that for now and we'll come back and add a little bit later.
Let's just open this up and see what we have.
OK.
So here's a site that we're going to be styling and the first thing that we want to do is talk about
how do we actually just assign a font to anything.
And before we can even do that we have to talk about what font we even have available to us in the browser
.
So there's no easy answer as to which fonts a computer has available in the browser.
And that's because they're different on every machine.
And I have this site open here.
She says fonts stack.
That actually shows depending on if you're on a Mac or Windows.
What's the percentage of those machines are that have a given font.
And so these are just kind of the standard web fonts that we'll see a lot of the time.
So if we look at one like Helvetica you can see that every Mac has America but very few windows have
installed.
And so these are the system fonts that come on a machine.
So these are not the only fonts that you can use but these are some that are safer bets.
So if you wanted one that he knew for sure would work on every machine you would pick like Arial black
or aerial.
Obviously these fonts though are pretty limited.
So we're going to see how we actually include custom fonts later in this video.
But for now let's just pick one of these.
So let's go with Ariel Sharon Ariel.
So to use that we're going to assign that to our paragraphs here.
So we're going to go into my C S S which I have linked here.
Styles that C S S and the property is called the font family.
So I'm going to select paragraphs and I'm going to say font family is Arial just like that.
And if I refresh you'll see I now have Arial font here.
One quick note I can also put quotes around this which is totally valid.
Sometimes you'll have to do this if you have a font that has a number at the beginning.
Not that this is a real font but if that was I would have to put quotes around it because this is not
a valid CSSA line.
OK so I can give it Aeriel like that and you can see we get Aeriel.
So there are other fonts you can play around with.
Let's try Georgia.
So let's give our H-1 Georgia
just like that refresh.
And you can see it changes font so don't despair if you're a designer.
We're going to see how to use a lot more fonts and how to include custom ones.
But for now we're just going to focus on the built in system default fonts which are a little bit limited
.
And even then there's no guarantee as you can see there's not any that 100 percent of machines have
so the next property I want to talk about is font size so font size does sort of sounds like it controls
how big the font is or how small the font is of a given element.
So we can select something and let's do it to our H-1 and let's make each one a lot bigger.
So we do font size and there are different units that we can use.
And the first one is called pixels or peaks and we've seen it a little bit before with Forder.
So we're going to just give it something huge like 200 pics and if we go back to the browser you can
see if we get this gigantic fun 200 pixels what we can do just in case.
If you want to play around with font sizes you're not sure how big you want this to be.
We can inspect it
and then we can go over here and we can click on this and we can change this number so we can change
it to 100 or 60 or 85 or whatever we want and we can play around in the browser and just see it the
change reflected immediately.
So that's a really nice feature when you're playing around with font sizes.
So as I mentioned though this is not the only way of picking a font size.
It's not the only unit.
There's another popular unit called IEMs and E-M is basically a relative font size.
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
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
of the font that applies to the parent of the element in question.
So what that really means is I'm going to show you a quick example.
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
does.
This is probably our first time seeing them.
Is it just a way to group text together without actually making a difference visually so it's just a
way to kind of make an element around the word strip steak.
But if I refresh.
Nothing changes at all.
Well the search for the font size but nothing changes down here and where I have this span.
So it's a way to highlight or to single out some line and then do something to it.
And we're just going to make it a lot bigger.
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
font of this paragraph we just go into here.
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
of the enclosing element of the parent element which is this paragraph.
So you'll see that here if I refresh this span is double the font size of this.
But we didn't actually explicitly tell it how many pixels to make it.
It just knew how big this was and then it doubled it.
So this is dynamic which is why a lot of people like it is that if for some reason I needed to change
the font size of this this would automatically change.
So let me show you another example.
Let's increase the font size of paragraph's
font size and let's make them 40 pixels and you can see that this still stays double.
So then the one question about E-M that comes up a lot is what is the initial value of v and what is
the top level.
Because we can't just keep inheriting from a parent and that parent there has to be some source of truth
.
There has to be like at the very top level element that actually has a font size and that actually changes
depending on the browser which is a little bit frustrating.
But according to SDN it's usually about 16 pixels so that's no guarantee but it's usually around 16
pixels.
So what most people would do is set a font size on the body at the very beginning.
So something like this body font size.
And let's give it a let's do something really small to start like 10 pixels and then must change or
each one so that it's five times larger than the body.
So that's going to look like five porno E-M and then we go on our paragraph to be twice as large as
the body.
So 2.0 E-M.
And then lastly we want our span to be twice as large as a paragraph.
So that's also 2.0 because remember it's nested inside.
So let's do some text outside of a paragraph just like that and you'll see it's pretty small.
And then we made this five times larger than this.
We made this twice as large.
And this is twice as large as the paragraph