Lesson 2: Applying Typography in CSS

Overview

In this lesson you will learn some of the specific CSS properties that are used to define typography on web pages, and will apply these properties to your portfolio website. You will also learn some strategies for selecting a font family.

Learner Outcomes

At the completion of this exercise:

Font Families: Serif, Sans-serif, and others

In CSS (and in typography in general) there are five basic types, or families, of fonts: serif, sans serif, cursive, fantasy, and monospace.

Serif fonts have small lines or strokes that extend from the ends of characters. They can look like small feet, caps, tails, flags or dots. Serif fonts have been used for centuries in printed books, magazines and newspapers.

Sans-serif fonts do not have serifs ("sans" is French for "without"). These fonts are simple and straightforward.

There has been extensive research on which of these font families, serif or sans-serif, is easier to read. Unfortunately, results are inconclusive. There are dozens of studies favoring both font families. The bottom line: There are many variables affecting readability of text, not just font family alone. For the body of a web page, it's important to choose a font that is not too cluttered and that flows gracefully from letter to letter without too much space between letters. Generally the best choice for attaining this uncluttered, flowing, easy-to-read look is sans-serif. However, it's possible to attain this look with certain serif fonts as well.

For page titles, headings and sub-headings, a serif font is sometimes a better choice, because they can be perceived as more stately and grand, which helps to contribute to how readers perceive the hierarchy of the page.

What about cursive, fantasy, and monospace?

These fonts are more difficult to read and should be used sparingly. Depending on the message or feeling you're trying to communicate, they might be suitable for short sections of text, such as headings or subheadings.

Common Typographic Properties in CSS

Typography on the Web involves the interplay between various properties in CSS. Here are a few of the most common:

font-family

This property specifies the font of an element. The value of font-family is a list of preferred fonts, separated by a comma, as in these example:

	body {
		font-family: Verdana, Arial, sans-serif;
	}
	h1 {
		font-family: "Times New Roman", Times, serif;
	}

If the user has the first font in the list installed on their computer, their browser will display that font. If they don't, the browser will try to display the next font in the list. The last font in the list should always be one of the five generic font families, described above. Again, they are:

This is the fallback font, to be used if none of the preferred fonts are available.

Note that in the above example, "Times New Roman" appears in quotation marks, whereas the other fonts don't. Anytime a font's name is more than one word, it must be in quotation marks.

font-size

This property specifies the size of the font. This can be expressed in relative units like % or em, or in absolute units like px (see the earlier lesson Anatomy of a Style if you need a refresher on these units).

Font size can also be expressed using terms like small, medium, large, larger, x-large, and xx-large.

font-style

This property specifies the style of a font, either normal, italic, or oblique.

font-weight

This property specifies the weight, or thickness, of characters. It can be normal, lighter, bold, or bolder. It can also be expressed as a numeric value between 100 and 900 (numbers must be divisible by 100).

line-height

This property specifies the height of a line of text. This is typically expressed either as a % or em and must be greater than the height of the font or else the lines of text will be squished together.

For maximum readability, the W3C's Web Content Accessibility Guidelines 2.0 calls for the line-height of blocks of text to be at least 1.5em or 150%

text-align

This property specifies how text is aligned horizontally. This can be either left, right, or center. It could also be justify, which aligns text on both the left and right sides of the page like a printed publication. However, this tends to result in awkward spaces between words and should be avoided on the web.

letter-spacing

This property enables you to specify an amount of space between letters. It can be expressed using the same units as other properties, such as font-size. It is sometimes used to give a distinctive look to certain elements such as headings.

text-shadow

This property is new in CSS3. Consequently it isn't supported by all browsers, but if you have a relatively current browser, this property can attach a shadow to text. If done well and used sparingly, this can be have a nice effect for content such as headings. For more information, consult the CSS3 Text-shadow Property page at W3Schools.com.

Activities

  1. Study each of the following websites for some possible font-family combinations:
  2. Select two fonts that you think would look nice for the body of your portfolio website. Since this will affect most of the text on your website, be sure to select fonts that you think will be easy to read. Also, be sure the two fonts are in the same family (for example, two sans-serif fonts or two serif fonts). Choose fonts that are similar to each other. Keep in mind who your audience is (who might ultimately read your portfolio?) and choose fonts that reflect the message and style you want to communicate to that audience. After selecting the fonts you like, search for your chosen fonts on CSS Font Stack. CSS Font Stack estimates the percentage of Windows and Mac computers that have each font installed. Be sure the combination of your two fonts has both Mac and Windows users covered. For example, if one of your font choices is common on Mac but not common on Windows, be sure your second font choice is common on Windows.
  3. Now repeat the above process, this time selecting two fonts that you think would look nice for the headings on your portfolio website.
  4. For your third font in each category, write the generic font family name, either serif or sans-serif.
  5. Next, open your web portfolio's external style sheet in your text editor, and its home page in a browser.
  6. Find the style definition for the body tag. Look at the properties that are currently used to define the body style. Add a font-family property, or if there's already one there, modify it by adding the fonts that you listed in your table. List them in order, separated by a comma. If any font name is more than one word, remember to enclose it in quotation marks. For example, assume you selected Century Gothic as your preferred font, Verdana as your browser-safe font, and sans-serif as your generic font family. Your font-family property would then look like this:
    font-family: "Century Gothic",Verdana,sans-serif;
  7. Save the file and refresh your browser to see what effect the change had on your home page.
  8. Now add a font-family style for h1, h2, and h3 headings. Note: When the same style applies to multiple elements, you can define that using one style definition, as in the following example: 
      h1,h2,h3 {
    font-family: Rockwell,"Times New Roman",serif;
  }
  9. Save the file and refresh your browser to see what effect the change had on your website's headings.
  10. Now experiment with the other properties listed at the top of this page. Apply them one-at-a-time to various elements and see what effect they have on the page. Try to use these styles to enhance your site's readability. Try to stylize your site using typography and color so that it uses contrast, size, hierarchy, and space effectively. Keep the styles that work, and delete the ones that don't.

Handouts/Online Documents

All done?

Show your instructor your results before continuing on to the next module.