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. There are examples of each of these font families on the W3C CSS Fonts page.

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 inclusive. 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. Read the article 16 best loved Font Bits in Web Design by Vivian of Inspiration Bit. Select two fonts that you think would look nice for the body of your portfolio website. Since this will effect most of the text on your website, be sure to select fonts that you think will be easy to read. Now select two fonts that you think would look nice for the headings on your portfolio website. 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. For both sets of fonts, choose fonts that are similar to one another.
  2. On a sheet of paper, draw two data tables with four columns and five rows each. Label the first table Preferred Body Fonts and the second table Preferred Heading Fonts. Across the top, add the following column headers to the top of the second, third, and fourth columns: Windows, Mac, and Linux. Number each row of the table 1-4, starting with the row beneath the header row. When finished, your tables should look something like this:
    Preferred Body Fonts
    My Choices Windows Mac Linux
    1.
    2.
    3.
    4.
    Preferred Heading Fonts
    My Choices Windows Mac Linux
    1.
    2.
    3.
    4.
  3. In the first column of each table, list your two font preferences in order of preference.
  4. The website codestyle.org conducts an ongoing semi-automated survey of which fonts users have installed on their computers. Consult the Windows font survey results, the Mac font survey results, and the Linux font survey results. On each of these results pages, check to see what percent of users have each of the four fonts you selected. Record your results in the data tables you created.
  5. What can you conclude from the survey results for the fonts you selected? Which of your preferred fonts are Windows users most likely to see when they visit your web page? What about Mac users? What about Linux users?
  6. Now consult the Common fonts to all versions of Windows & Mac. This is a list of so-called "browser-safe fonts", fonts that are commonly installed on both Windows and Mac. If either your two preferred sans-serif fonts (for the body) or your two preferred serif fonts (for headings) is not included among the browser safe fonts, chose a browser-safe font and add it to your table as a third option. Choose one that looks similar to your preferred fonts, so users will get a similar experience with your website, even if they don't have your preferred font installed. Note that some fonts are available on both Windows and Mac, but are known by different names. For example, Tahoma (Windows) and Geneva (Mac) are the same font. Therefore, both should be included as the third item in your table.
  7. For your fourth font in each category, write the generic font family name, either serif or sans-serif.
  8. Next, open your web portfolio's external style sheet in your text editor, and its home page in a browser.
  9. 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 and Gotham as your two preferred fonts, 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",Gotham,Verdana,sans-serif;
  10. Save the file and refresh your browser to see what effect the change had on your home page.
  11. 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: Warnick,Rockwell,"Times New Roman",serif;
  }
  12. Save the file and refresh your browser to see what effect the change had on your website's headings.
  13. 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.

    14. Handouts/Online Documents

    All done?

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