Hi, and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott,  and I'm a trainer here at Bring Your Own Laptop. Now, in this tutorial what we're gonna look at is using the  EAMS measurement for fonts instead of pixels or points. So in previous tutorial, just to make things easy,  we looked at using points to size fonts. Now the reason we don't like points is, is  because they're called something called  an absolute font size. And the real reason we don't like them is  because it doesn't work for, um, people  that are visually impaired that need  to increase their font size and it doesn't.

And in that fact, Google doesn't like them for that reason. So we do what Google likes  and one of the things is using these Eames fonts. So let's look at what they are. So at the moment I've got my H one selected. Um, so in main CSSH two, um, sorry, H one. And you drop down to text  and you can see I've used this font size of 20 point, okay?

So that's what they call an absolute font size. It's like a millimeter or a meter  or a yard or a foot. And they are physical measurements. You can't have a slightly bigger millimeter okay? Or a slightly bigger inch. An inch is an inch is an inch, it's an absolute size,  whereas something like a percentage is a relative size.

So a percent is dependent on the total overall size. So 20%  of something really depends on what a hundred percent is. So that is what they, the difference between a relative  and an absolute font size. So points and pixels are absolute. We're gonna use this one called eams,  which is a relative point size. And so let's look at creating one of those.

So essentially all you need to do is you need  to come into here and change it from 20 points, okay? To, we're gonna use eams EM, okay? And um, a rough start  is gonna be 1.2 EAMS eem. So I'm gonna hit enter and I'm gonna show what  that size looks like and then explain why we use it. Can you see 1.2? EAMS is a lot smaller than we had  for 20 pixels, so I'm gonna increase it up a little bit.

So to 1.7, that's getting closer to the size that I have. Now what happens is, um, an eem is one  of the default font size. Now most of the, um, browsers we use, so Firefox, Chrome,  safari, internet Explorer, they roughly have a font size. Is it their default as 16? So if you say, I want this thing to be one eem,  you are telling the browser to use one  of its default font size, which is normally is 16 points. Okay?

So, um, I can pretty much guarantee that if I use one,  it's gonna look about 16. So, um, let's have a look at  The difference between the two. So if I make this my 1.7 Eames,  okay, and I've left my H two as 17 pixels,  and same with my, um, my paragraph tag, I've left that  as 12 points. Okay? So that is fixed sizes, they shouldn't change. Why?

The reason we don't, uh,  don't like using these ones is when it gets  to a person who's say, visually impaired  and using a screen reader that needs to help them, um,  it'll enlarge all the fonts for them to help them work  with the, um, website. Let's look at demoing that. So if I preview it in Firefox,  now this is load open Firefox. Now, um, what happens is if I have a, um, a problem  with my vision, what I can do is I can go into preferences  and I can upgrade my default font size. There it is 16 if I make it to 20 just  so I can read it a little easier, watch  what happens on the left hand side there. Can you see my P tag?

And my H two didn't change size, but my H one did. Let's exaggerate it a bit. So let's go up to 40. Can you see my H one, which was using my Eames has gone up  a percentage, okay, to match the default font size. So, but my PT tag and my H two haven't, okay? That means they're fixed forever at that size.

So that can be handy for some things,  but most especially your type needs to be done in Eames. And the reason we love that is because Google loves that. And whatever Google loves we do. All right? So that's the difference between EAMS and pixels. So, um, a good default font size for body copy  for EAMS is about, is about 0.8.

And a good default font size for um, uh,  titles gets, you know, that's up to you totally. It's uh, 1.7 and up. Okay? Depending on the style you want. Before we go, actually,  what we'll do is we'll look at changing the font sizes. So at the moment we'll change our Ps from 12 point to,  I'll change it to 0.0  em, head enter.

You can see it's roughly the same size,  and we'll change our H two from 16 point  or 17 point to 1.4. Em hit enter. You'll see roughly the same sort of size. But the nice thing about that now is  that if I resize them in my browser, they'll come along  for the ride and resize with them. Okay? So from now on, you're banned from using pixels  or points you have to use s Alright, thanks for that.

See you in the next tutorial.