20 - How to use EM for fonts


Questions & Comments

No comments

ALL ACCESS: $12 per Month + Cancel anytime   

Video Description

Dreamweaver tutorial 20: How to use the EM measurement for fonts in in Dreamweaver CC

 

  1. ‘Em’ is the name given to a type of measurement used in website design. The same way Millimeters (mm) and Centimeters (cm) are types of measurement.

    Em’s are a ‘relative’ measurement. This means that 1em is 1 unit of the default font size for your web browser. For example if Internet Explorer has a built in default font size of 16px, then 1em is 16px. If you make your font size 1.2ems it will be about 19px.

    Why do we use em’s? Because some people with visual impairment need to make their default font size bigger so that they can see it. If you use an absolute font size like pixel (px) then when they are visiting your site the fonts don’t get bigger and are fixed at the px size. Also importantly it is something that search engines (Google) check and if there are two equal sites (yours and your competitor) listed in search results and yours is more accessible then... hey presto you are more likely to be listed first. 
    When selecting your font size in the CSS window, make sure you use em’s instead of pixels. To change our tutorial file follow the directions below.

    1. Open index.html
    2. With your CSS Designer panel open choose main.css from Source.
    3. Choose ‘h1’ from the selectors.
    4. From the properties section scroll down until you find font-size.
    5. Choose ‘em’ from the drop down menu.
    6. Type in 1em. 
      Note: Your ‘h1’ tag will now be 1em in size.

      Font sizing using EM
    7. Repeat this process for the ‘h2’ & ‘p’ CSS rules and choose a font size that suits your page. 

      Note that 0.8em or 0.9em is normally right for body copy (paragraph text). 

 

Video Transcription

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. 

ALL ACCESS: $12 per Month + Cancel anytime