Web Design 1 - HTML Lesson 5 - Working with Fonts

A typeface defines the shape of characters.

A font is a combination of the typeface and and other details such as spacing, size, etc.

Create a lesson_5.html page - remember that all the require elements need to be added for each page.


Font Family

The font-family property specifies the fonts for an element. If you just pick one font style you run the risk of your website visitor using a browser that does not support that style, and then you have no control over how your page will look.

The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on until it gets to the end.

There are two types of font family names:

    1. family-name - The name of a specific font-family, like "times", "courier", "arial", etc.

    2. generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".

You have already used the style element to change text color in Lesson 4. You can continue to add other options within the same statement - just remember these basic coding rules:

    1. Everything within your style command is enclosed within the starting and ending double quotes
    2. Use a colon : to set the style command apart from the attributes you are defining
    3. Use a semi-colon ; to separate different commands
    4. Use commas within a particular command to list options
    5. If a command within a style section has spaces then use single quotes to enclose it

Look closely at the code below

  • the first style element is color with a colon and the color definition of #999999

  • then you see a semi-colon which separates color from font-family

  • the font-family element has a colon and then a list of 4 types of fonts to use (these are separated by commas) - note that the word Times New Roman has spaces in it so it must be enclosed in single quote marks

  • Remember that the computer does not care about spacing - this example is wrapping to the next line because of the display I have set on this page - you should just type out your full line in the editor

<p style="color: #999999; font-family: fantasy, monotype, 'Times New Roman', Geneva"> This is a line of text to try and change the font color and style. </p>

Go ahead and try to get the code from above to work on your page - don't be lazy and copy & paste because...

1. This does not always work as you sometimes pick up special formatting characters that you can't see
2. It does not help you learn to write the code and debug it yourself - the more your write and test your pages the better you become at recognizing simple mistakes

Where do you find the font family names? Lots of places - but here are just two of the sites that list commonly used fonts.



Font Weight, Size and style

In addition to the font style, you can change the weight and size.

To add these to your code we simply use a semi-colon ; to separate the style definition.

font-size: small;

font-size: 20px;

* note that these choices can range from xx-small up to xx-large, you can also name a specific size such as 20px

font-style: italic;

* easy - this changes the font to italic

* note: you can also change a style to underline but we usually only use this for hyperlinks

font-weight: 200;

font-weight: bold;

* note you can use a word such as lighter, bold, bolder or use a number from 100 up to 900

If I add some of these styles to the example from above it may look like this:

<p style="color:#999999; font-size: 10px; font-style: italic; font-family: fantasy, monotype, 'Times New Roman', Geneva"> This line of text should be a smaller font size and be in italics in addition to a different font than the default for this page. </p>



Assignment for html lesson 5

  • When this assignment is complete your lesson_5.html should include the following:

    • Four different paragraphs or heading sizes using a variety of fonts, colors, and styles to make them each different

    • Include in the text for each what styles you are applying - this is the best way to be sure they are working

    • Include a hyperlink back to your index page

    • Include links to lesson on index page, and a link back to your index

    • Upload all files to x10 and check to be sure they work