Learn CSS – Part 3: Font Family and Its Descendants

If you’ve been following this series, you’ve learned what CSS is, the 3 places to write your code, and other methods for writing CSS. Today’s lesson will get into the font property and its various commands. You’ll learn how to do more than just bold and italicize your copy.

Learn CSS: Font-Family Property

Learn CSS – Part 3: Using CSS Font Property over HTML <font> Tag

If you worked with HTML coding in the past, you are use to using the <font> tag to re-size, bold, and provide a particular font to your copy. This was a great way to make some of the content on your webpage stand out.

But after reading my article, Deprecated HTML Tags, you will know that using this method is no longer considered part of the web standards practice of coding websites. There is a better way of emphasizing your copy. So what is the alternative? The CSS Font Property.

The CSS Font property allows you to adjust your copy in various methods that you could do in Microsoft Word or any word processing program. You can change the font, its size, weight, and style.

Here is the full command for the CSS font property:

font: font-family, font-size, font-style, font-weight, line-height;

The properties are not in a particular order but the two that are always standard are font-family and font-size. It doesn’t make sense to use the font command with only two properties, so only use the whole command if you decide to use three or more properties at a time.

Learn CSS – Part 3: Font-Family and Font-Size Properties

Font-Family

Font-family deals with the kind of font you want the copy to display when viewed on the web. Arial and Helvetica are the most common fonts used for viewing content in your browser, unless the author of the page or the person viewing the page has modified their browser settings.

Generally, you want to use a sans-serif font because it is easier to read on the screen and since most computers, Mac and Windows, have one or the other (or both) on their desktop, there should be no problem implementing either one within your code.

Font-Family Property

There is a chance the viewers computer may not have Arial or Helvetica, so a third option would be to add the name sans-serif and the browser will find a font on their computer that fits this format. So its best to always have more than two options.

One thing that I like about using Adobe Dreamweaver when I write my code, is that it pre-fills the commands that I am typing. When I begin typing the font-family command, a short list of fonts will pop up for me to choose. This keeps me from having the memorize a long list of fonts.

Adobe Dreamweaver Pre-Fill Example

Font-Size

The font-size property will increase or decrease the size of the copy on the screen and make your viewers eyes focus in on that content.

The standard size is 12px (px = pixels), but depending on the importance of the copy you want your audience to see, it could be bigger.

p {font-size: 14px;}

This line of code says every word in every paragraph tag will have a font size of 14 pixels. Pretty simple, huh?

Learn CSS – Part 3: Font-Style & Font-Weight

Font-Style

When I explained the last line of code in the previous section, you may have noticed that I emphasized the explanation. I did this so that you would be able to discern the difference between my regular speech and its translation.

This is a simple, yet power strategy in breaking your content up and keeping your viewers’ eyes from crossing. The font-style property is the command that will help in creating this kind of textual transition.

There are three main values for the font-style:

  • italic – some fonts have italic as part of their style format
  • oblique – if the font isn’t italic, it might have oblique as an option
  • normal – the original format of a font; no italicizing

Font-Weight

When you are writing content for your website, you want to let your viewers know what sections of your page has the most importance. This property, font-weight, will simply bold the copy. There are numerical values ranging from 100 to 900 and textual values like bolder and lighter but the differences may not be that visible. The value of bold is more common than the others.

Your Thoughts On Learning CSS

As I wrap up this article, I want get your thoughts…

Seeing all the values for the CSS Font property, which ones would you use more often and why? Leave me a comment on my Facebook Page.