Working with Fonts and Text styles (Tutorial 3 Tutorial)

1

 

This snippet from the Sunny Acres Home Page shows how to properly use font family, font style and letter spacing. These words are found in the body of the website directly underneath the <h2>. Here the font family sans serif is used. In order to be able to use this font, the following must be inserted into the style declaration for the body element. It should look as follows:

body   {background-color: white; font-family: Arial, Helvetica, sans-serif}

Aside from choosing what font you want, you can also choose the font size. Font size is measured in length and can be specified in four different ways: with a unit of measurement, a keyword description, a percentage of the size containing element, and with a keyword expressing the size relative to the size of the containing element. Most easiest to use are absolute unites that are a fixed size. For this example, the relative unit – (em) was used. Relative units are expressed relative to the size of other object within the Web page. The em unit expresses the size relative to the font size of the parent element. In this example the unit 2em is inserted into h2 element and should look as follow

h2    {font-size: 2em}

Lastly is character spacing. Spacing can keep things from looking overcrowded on your Web page. One can control the kerning (which refers to the amount of space between characters) or tracking (which refers to the amount of space between words). The default unit of length for this is pixels but other units can also be used. The final coding for this section would look as follows:

body   {background-color: white; font-family: Arial, Helvetica, sans-serif}

h2   {font-size: 2em; letter-spacing: 0.4em; text-indent: 1 em}

 

This snippet

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a comment