CSS Tutorials - Code-Sucks.com

Setting Fonts with CSS

In HTML, if you want to change the font used in an element you would use the font element. This could make your code very messy if you had the same font that you want to use multiple times, but not make the font the same on the whole page. Also, if you wanted to make a font bold, italic, or underlined you would need to use the correct element to do so. If needing to make some text that was red, size 12, bold, underlined, and italic the code you use may look something like this in HTML.

This is a test

With CSS, we can do the same thing. In addition to these font options, CSS allows us more control over the font that is on the site. CSS will also make it easier for us to change the font in the future if we choose to use a different theme for the site we are coding for, and make it easier to read and follow.

<style>
p{
 font: italic bold 12px arial;
 color: red;
 text-decoration: underline;
}
</style>

The CSS above will do the same as the HTML code that we looked at. By using the font attribute, we have told CSS to make all paragraph elements use the Arial font, make the text 12 pixels tall, make the font bold, and italic. We use the color attribute to change the color of the text, and the text-decoration to underline the text. Now if we wanted to change the color of the text, or the size we can do it in one place instead of having to manually edit each element.

There are some additional attributes we can set using the font attribute. Above we used the generic font attribute to set a variety of settings. If we did not want to make the array of changes that we did we can use other font attributes, like font-family. Below are the different font attributes, what they do, and what values can be assigned to them.

Font

The font attribute allows you to declare multiple font settings in one attribute. This is a short hand way of setting the values.

Font-Family

The font family sets the type of font that is going to be used. This is similar to the HTML face attribute for the font element. The font family attribute allows you to set a group of fonts that the site should use if the user has them installed. You can use any font that you would like, but it is best to use fonts that most people will have, like Arial, Times New Roman, or Courier. You could also use a generic font family, like sans-serif. A generic font will use the default font for that family. Here is an example of the font family attribute.

font-family: courier, arial, sans-serif;

In the example, the browser will try to use the Courier font first if the user has it, if not then it will try to use Arial. If the user does not have any of those fonts, then the browser will use the default font for the sans-serif family of fonts. It is always best to use a generic font at the end of a font family attribute, this allows you a little more control over how the text will look.

Font Size Adjust

This adjusted the font size for an element based on the font's aspect value. The aspect value is the ratio of the font's lowercase x size in relationship with the font size. To use this attribute you would just put in the aspect value. Here is an example:

h2 { font-size-adjust: 0.58 }

Font Stretch

The font stretch attribute stretches or condenses the font horizontally only. Below is a list of options that can be used with the attribute.

wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded

Font Style

Font style only has three options that can be used with it. These set the style of the font that is being used. The values that can be used are italic, oblique, and normal. Normal is the default value, and does not make any changes to the text. Italic, will make the font italic, and oblique looks similar to italic.

Font Variant

This attribute only has two values. One value is normal and it is the default value, the other is small-caps. The small-caps value makes all lowercase letters look like their uppercase versions, but the same height as the lowercase letters. Below is an example of how the small-caps value looks.

This is an example of the small-caps value

Font-Weight

The font-weight attribute sets how bold text is on the site. You can use the values bold, bolder, lighter, and normal. You may also use any hundred value between 100 and 900.