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 we are going to look at using the Em’s measurements for fonts instead of Pixels or Points. So in the previous tutorial, just to make things easier, we looked at using points to size fonts. Now the reasons we don’t like points is because they are called something called an absolute font size, and the real reason we don’t like them is because it doesn’t work for people that are visually impaired that need to increase their font size, and Google doesn’t like the for that reason and we do what Google likes. and one of these things is using these ‘EM’ fonts. So lets have a look at what they are.

So at the moment I’ve go my H1 selected, in mains here it says H1 and you drop down to text, and you can see I’ve used this font size of ‘20 Point’ and thats an absolute font, its 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 or a slightly bigger inch, and inch is an inch is an inch its an absolute size, whereas a percentage is a relative so a percent is dependent on the overall size so 20 percent of something really depends on what 100 percent is. So that is what the difference between a relative and a absolute font size.

So points and pixels are absolute font sizes and we are going to use this one called EM’s which is a relative Point size so lets look at crating one of those. So essentially all you need to do is you need to come into here and change it from 20 points to, we are going to use EM’s. ok and a rough start is going to be 1.2 EM’s so we hit enter and ill show you what that sized looks like and ill explain why we use that size.

Can you see 1.2 Em’s is quite smaller for what we had for 20 Pixels so I’m going to increase it up a little bit to 1.7, and thats getting closer to the size that i have. Now what happens is, an EM is one of the default fonts sizes. Now most of the browsers we use so Firefox, Chrome, Safari and Internet Explorer, they roughly have a font size as there default is 16, so if you say i want this thing to be 1 EM, you are telling the browser to use one of its default font size, which normally is 16 points, so i can pretty much guarantee that if i use 1 EM its gonna look about 16. so, lets have a look at the difference between the 2. if i make this my ‘1.7 EM’s’ and I’ve left H2 as 17 pixels and same as my paragraph tag, I’ve left that as 12 Points ok so that is fixed sizes, that shouldn’t change, the reason we don’t like using these one is when we get to a person that is visually impaired and is using a screen reader that need to help them it’ll enlarge all the fonts for them and help them work with the website.

Lets look at demoing that, so if i preview that on Firefox, now this is loaded up in Firefox now what happens is if i have problem with my vision, i can go into preferences, and i can upgrade my default font size, there it is 16 and if i make it to 20 just so i can read it better, watch what happens on the left hand side there.

Can you see my P tag and my H2 size didn’t change but my H1 did. Lets exaggerate that a bit. So lets go up to 40, so can you see my H1 which was using my EM’s, has gone up a percentage to match the default font size, but my P Tag and my H2 haven’t, that means the are fixed forever at that size, that can be handy for some things but most, especially your type need to be done in EM’s.

The reason we love that is Google loves that and whatever Google loves we love too. So that the difference between Em’s and Pixels, so a good default font size for body for EM’s is about 0.8 and a good default for titles is up to you totally but 1.7 and up. Before we go actually what we will do is we will look at changing the font size.